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
My Team
HeeJu Kim, Front-end DeveloperHannah Lin, Business AnalystBrian Seong, DeveloperHarry Lin, Back-end Developer
Time
2022
Project Overview
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, decrease impact and encourage tree canopy exploration to protect the environment in a simple and approachable way?
Design Process
Solution
BelleArbre is a embedded campaign APP on Google Map to increase resident awareness to explore the tree canopy nearby.
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:
Utilizing User-Centric Solutions for Photo-Sharing Habits via Certain Channels
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.
Why Did I Choose this Approach?
Photo-fueled city walks: App caters to sharing
🚀 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 of this Solution: Freeing users from a given route can encourage them to explore more. When visiting a park, users typically don't keep their eyes glued to their phones and follow the exact path outlined on the map. Instead, they tend to reach their intended destinations and wander around in small areas according to their interests. They wait to discover interesting small animals, plants, and scenery before taking out their phones to capture photos.
🔐 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 interview
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
I wanted to better understand our users' behavior and habits, goals and needs, and frustrations. To achieve this, I created an archetype that was based on two different personas of the user segments. These personas were developed by conducting user interviews and primary research, and I continued to refine them throughout the project as I gathered more data. Whenever I need to take a step back and reassess my initial ideas, I refer to the archetype. Through this process, I was able to ensure that our product is tailored to meet the needs of each and every user, no matter their unique 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 started the design process by creating sketches and wireframes with low-fidelity to help speed up decision-making through visualization without wasting time. My sketches were based on the archetype, business objectives, and heuristic evaluation, and they all highlighted that there were too many distractions in the flow. I kept going back to the sketches throughout the entire design process to ensure that I didn't lose sight of our primary goals and ideas.
Wireframes
I used Figma to turn my initial sketches into low-fidelity wireframes. Later, I enhanced them by adding relevant text. These wireframes were well-defined enough for user testing. Based on the feedback from internal reviews and tests, I made some changes and then moved on to create high-fidelity prototypes.
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 second prize from HackSEA 2022.
What I learned
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.
Our team members strive for perfection but, at the same time, tend to procrastinate. The pursuit of perfection and on-time delivery must be balanced. Make team members know if they bump into difficulty. They should let others know if the team members cannot achieve the expected results, it needs to be explained in advance so that the team cannot seize the time to find alternative solutions.
This project won the third place at HackSEA partnered by Amazon.