BelleArbre UX Design | HackSEA 3rd Place Winner
A Google Maps-based Campaign App for Bellevue Resident Empowerment and Engagement
My Role
Lead UX Designer
My Skills & Tool
User Interview, User Flow, Wireframing, Usability Testing, UI Design, Persona, Figma
Meet My Team
HeeJu Kim, Front-end Developer
Hannah Lin, Business Analyst
Brian Seong, Developer
Harry Lin, Back-end Developer
Duration
10/2022
(1 week)
Project Overview
In recent years, many large companies have built office parks in Bellevue, attracting new residents to work. However, during the construction process, numerous trees were cut down, depriving residents of fresh air and green spaces for recreation.
The Bellevue government has implemented policies to encourage companies to maintain green spaces, but these policies have limited effectiveness. To address this issue, the government hopes to increase residents' awareness of the importance of trees and their canopy. By doing so, they aim to influence companies to prioritize the retention of green spaces. The government also expects residents to explore the city and be mindful of the environment.
Increase Awareness
Bellevue government wants to educate residents that Bellevue is a city park.
Residents Primarily New Arrivals
Bellevue residents are primarily new arrivals who are eager to explore the area.
Explore the Residency
This is a campaign app embedded in Google Maps that helps Bellevue residents learn about the city's canopy.
Problem
How can we raise Bellevue residents' awareness of the tree canopy and encourage exploring it in a simple, approachable way to protect the environment?
Design Process
Solution
Explore Nearby Trees with BelleArbre: A Google Maps Campaign App
By doing so, the tree canopy exploration campaign can attract more user reach and trigger them to take actions. The impact of this product is that Trees4Livability, an organization has been working with the City of Bellevue appreciated this solution.
Feature 1
Gamification photo-taking
Select scenic spots along the path as photo task unlocking points to motivate users to explore the tree canopy.
Feature 2
AI generated tree canopy exploration route
Automatically generate suitable exploration paths based on local tree species information.
Challenges
Challenge 1
Users want social sharing with certain people it might decrease the exposure
Approach to the Challenge:
Why Did I Choose this Approach?
Utilizing User-Centric Solutions for Photo-Sharing Habits via Certain Channels
Photo-fueled city walks: App caters to sharing
To address this, I designed a square sticker featuring an icon and cheering hashtags for users to share via social media such as Twitter, Instagram, Facebook, and private message.
🚀 Advantages of this Solution: The solution caters to the everyday behavior of its target users. For instance, these users typically take photos of interesting sights during a city walk and either share them as Instagram stories or send them to someone they think would appreciate them.
🔐 Limitations to this Solution: If most users tend to send their proof of participation via private messages, the exposure will not be as great as through social media.
Challenge 2
Users desire to explore independently without sticking certain route all the way
Approach to the Challenge:
Beyond browsing: Engaging users with photo-driven tasks
Through user interviews, I discovered that providing photo-taking tasks for them to complete aligns better with their behavior.
Why Did I Choose this Approach?
From point A to curiosity: App fuels organic discovery in nature
🚀 Advantages: Freeing users from a set route encourages exploration. At parks, users don't follow exact mapped paths, but wander to intended destinations, discovering interesting flora/fauna, and capturing photos, rather than constantly referencing phones.
🔐 Limitations to this Solution: A pathway will offer three task points, but the plants at each task point may not exhibit distinct seasonal views throughout the year.
Secondary Research
Key Secondary Research Result
66.7%
of the trees in the residential area were cut down due to construction
25%
of the population of Bellevue is expected to grow over the next 20 years with the prosperous business vibe
21.8+kg
a mature tree can absorb 21.8+ kg of carbon dioxide annually
Key Competitive Research Results
Primary Research
I found that conducting interviews before designing was a great way to gather valuable insights and inform important aspects of the project such as personas, user journey maps, feature ideas, and workflow.
User Insight
During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I prepared an interview script with 16 questions, focusing on our target audiences’ experiences, motivations, and daily routines. I recruited and interviewed 10 users remotely. I referenced the user interview findings throughout the entire design process.
Persona
To understand user behavior, goals, needs and frustrations, I created an archetype based on two user persona segments. These personas were developed through interviews and research, and refined as more data was gathered. I referred to the archetype to reassess initial ideas, ensuring our product meets the needs of all users, regardless of their circumstances.
User Journey Map: before using BelleArbre APP
With the business goal of improving the checkout experience for our users in mind, I created a current-state user journey map. This helped us identify two unnecessary steps and potential drop-off points in the flow. By eliminating these from the new design, we were able to create a much faster checkout process that ultimately contributed to increased conversion rates.
Ideation
Sketch
I began with low-fidelity sketches and wireframes to enable rapid visualization and decision-making. The sketches, based on the archetype, business objectives, and heuristic evaluation, highlighted too many distractions in the flow. I frequently revisited the sketches throughout the design process to stay focused on primary goals and ideas.
Wireframes
I converted initial sketches into low-fidelity wireframes in Figma, enhancing them with relevant text for user testing. After incorporating feedback from internal reviews and tests, I iterated the wireframes into high-fidelity prototypes.
Gamification badge
I designed the badges based on my study on the local Bellevue species.
Gamification metrics: badge with variation attracts 30% more users
I created two sets of badges and decided to choose one based on the outcome of usability testing.
Growth share matrix to raise the resident awareness
Breadcrumbs to increase engagement
I used metaphor design breadcrumbs to increase engagement. If users haven’t collected the spots yet, the icons on the collection card will remain inactive. But after they collect the spot, the icons become active and turn green. When users are getting close to the spot, the icon changes and an orange shadow appears as a clue. Even on the map, there will be a tooltip to guide users to the spot. After collecting the spot, users can take a photo and share it, even if they haven’t completed all the photo-taking tasks on the route.
Call-to-action design strategy
Prioritize the user preference
After conducting primary research, which included user interviews, I prioritized the buttons by implementing a call-to-action strategy. Generally, users tend to explore an area and visualize the places they would like to visit using the map. Even if they receive filtered results in the list, they are likely to click on the destination to view it on the map. Hence, I designed the exploration button to be larger and filled with the primary color.
Major Iterations
Iteration 1
An iteration based on the results of user interview
In the original design, I used the Google Map API with detailed information. However, users found it confusing and it distracted them from the tree canopy route provided by the app. Therefore, I decided to use a simplified map. Additionally, I replaced the generic tree icon with an image of the Pacific Dogwood, a common street tree in Bellevue, to represent the points on the map.
Iteration 2
An iteration based on the results of user interview
Initially, the app sent proof of participation via Gmail to prompt users to complete the task. However, based on the results from the user interview, users expressed a preference for sharing something fun on social media. To address this, I designed a square sticker featuring an icon and cheering hashtags for users to share.
Iteration 3
An iteration based on the results of usability testing
According to usability testing, users often browse different routes on Google Maps before deciding which one to take. To enhance the usability, I replaced the small "exploration icon" with a larger "exploration button.” Instead of using Google Map's standard color matching, I based the color scheme on BelleArbre's main visual color.
Key Findings
💡 Whether or not the city walk was planned, users often use Google Maps to find a destination but want to search for nearby nature routes upon arrival.
💡 The campaign icon on the front page should be clear and visible to aid user onboarding.
Product Success
This APP won the third prize from HackSEA 2022.
Designing delightful user experiences through stakeholder-centric approach
As the UX design lead of my team of five members, I led the primary user research to help pinpoint pain points through research, transform research findings into business solutions, and shape the user journey throughout the platform by rapid prototyping iteration in Figma within 30 hours.
When making consumer-facing products with"Designing Delightful User Experiences through Stakeholder-Centric Approach" multiple stakeholder needs, starting from the user's perspective and considering the interaction between different stakeholders, we can design a more delightful experience.
This project won the third place at HackSEA partnered by Amazon.