Google Maps for Trees
I joined the Hack for LA santa monica tree map group to help with designing their web app. This was one of the first web apps i've designed before. We had a lot of contributors to the group. I played the role of the UX and UI Designer, but we also had some other contributing UX designers on the project.
*yellow highlight is to aid in speedy scan-ability
Residents often have many questions in regards to tree maintenance, pruning schedules, types of species, water consumption of trees in the Santa Monica Area, this was a burden for the Santa Monica Tree Service.
Understanding the Problem
Starting out, our goal was to use technology to reduce the amount of tree requests with the Santa Monica Tree Alliance. But also, by doing this, we can also make it easier for consumers to learn more about the trees around them. Specifically we were thinking about kids in class and understanding the invasive vs native trees as well as water consumption. One thing that was unique about the problem was that the Santa Monica Tree Service did keep a log of everything they were doing, which made it easy to convert this to data.
Website Requirements User research was provided to me in advance, we had a mission
Who are we designing for?
1. Santa Monica Tree Service
2. Residents of Santa Monica
What do users need?
The Santa Monica Tree service needs to be able to translate the data that they already provide, into an informative website that will reduce the amount of calls. Residents need a way to better understand the types of trees, schedules, and maintenance in a simple way.
Evaluation of Solutions
1. Low Effort / High Impact (left)
Solution: Build a Website - Easiest to use for all users
Building a website will be the easiest for users to adopt as a lot of residents will be elderly as well. Also any Santa Monica Tree Service will be able to easily update the data in the way there are already collecting data. It solves for both the Santa Monica Tree Service as well as the residents.
Sketching and Ideation
Initial sketches and laying out necessary features and functionality (What Do I Want To Do - as a user)
Initial brainstorming of ideas and new user thinking
Brainstorming on filters
Filters - Needed
Brainstorming Ideas on how filters could work
Filters - Part 1
Filters - Part 2
Filters and Detail Screen
HiFi Iteration 1
I did a pass to see what that team thought of using multiple settings for filters. I wanted to make it a less hidden experience, so put them right up front to allow user to manipulate very easily. This wasn’t the direction we ended up going, but supplied a good starting point.
As a team we decided it might be best to have all the filters / colorizations near each other in the search bar. Here are some of the samples that I provided.
Iteration 3 - Working with the detail window
As the user navigates, there needs to be a place to show information. Whether the user needs direction upon first visit, or detail when any given tree is clicked on. I decided on a vertically scrollable floating window as it feels like it consumes less space, and functionality is very similar to google maps. I pitched the idea of Smart Views, as it would be a great way to show a user story, and also educate on the current tree needs in Santa Monica. That idea got killed.
Iteration 4 - Legends
We tried several passes on collapsed, and expanded legends. Additionally how many tiles / data points need to be represented. We ended up only needing 9 tiles per legend. Here are some of the styles we explored.
HiFi Iteration 5 - Dropdown No Icons vs. Icons
We decided on floating dropdown menus right below the search bar for Map Colorization as well as filtering. There was a lot of pressure to do menu’s without icons. I’m a super visual person and love icons so I had to push for that approach. This took a couple rounds to convince, but ultimately I think it makes for a much better experience for kids as they have a color and visual reference, but also adults with less than perfect vision. (I left some of the color palettes visible)
Iteration 6 - Tree Color Palette
We did many rounds and adjustments on the color palettes and how they correspond to the map / legend. We ended up swapping out the map leaflet to a much brighter desaturated color so that definitely affected colors we had previously set also.
Iteration 7 - Card Structure for Tree Detail
We explored two options here (embedded with navigation and card structure). I felt the card structure created an effortless experience for the user to exit out of something vs trying to find a back button etc.
Iteration 8 - Finish
We explored a lot of visual options but had a lot of technical limitations we were trying to meet as well some differences in styles. Ultimately a lot of the ideas we presented and put together were scrapped and made in a leaner MVP style. A lot of things were kept as well though and the product is functioning smoothly!
Google Maps for Trees
Product Current Status
Wrapping It Up 🎁
How did users respond?
The Santa Monica Tree Service found it to be super helpful, especially because if someone calls they can easily provide the URL for more information, as well as include it on their website. Additionally it was helpful to residents to be able to monitor what was happening in their area.
We could create a way to capture image with geotagging
Challenges and Learnings
We had some challenges with keeping consistent contributors on the project, but I learned a lot about working with teams and providing solutions. One thing that was unique for me was I was always used to providing multiple solutions so people could view a few ideas, but some members found this to be a "weakness" in vision, I had never experienced that before.
Additionally I didn't spend enough time drawing / wireframing it out so spent too much time in hifi
What would you change?
The final product I would've wanted it to be a little more fun to use for younger students in school.