Whimsy Walks Mobile App
Whimsy Walks is a platform for people to explore neighborhood art and nature walks. Our group’s design of the Whimsy Walks mobile application focuses on the neighborhood walkers as our target users.
Contributions
My Role
UI/UX Designer and researcher, designing a order system mobile app for Yi Fang, from conception to final prototype.
Project type
UX Design
Project duration
November - December 2022
Design Tools
Figma, Photoshop, Illustrator
Why Whimsy Walks?
During the pandemic, exercise options were limited, This situation then let people discover the joy of walking in their community. Whimsy Walks helps create a brand new experience of walking, not just walking but also finding the beauty within neighborhoods. Whimsy Walks also allows people to connect the beauties that around us.
The problem
Users are hard to discover attractions with the Whimsy Walks website while they walking, some attractions are far away from their homes. Users can barely recognize the attraction and sometimes couldn't find where the attraction is. Users have to scroll a long page to find their interested attractions on the website.
Research
During the research phase, we conducted a comprehensive survey to introduce the whimsy walks program and gather insights into user needs and frustrations. The survey consisted of three parts: gathering general user information, understanding walking preferences, and determining Whimsy Walks site preferences. Our goal was to gain a better understanding of people's perceptions of the program, their community preferences, preferred walking times, and identify our target audience.
What we found
After conducting the survey, we created an affinity diagram to organize and analyze the feedback gathered from the participants. This diagram helped us to have a clear visual representation of all the insights and perspectives shared by the respondents. Some insights and takeaways are
-
Some participants think the project only focuses on Seattle, which is useless for residents living in other places.
-
Safety is the most important thing that participants concern about
-
Some participants think the whimsy walk sites are too spread out, it would be more attractive if there are multiple sites in one short walking route, or near each other.
-
The majority of participants are from the 18-25 age group
-
Most of the participants use mobile applications when they walk, Counting steps is the most used feature followed by music, then navigation and recording route.
-
Most research participants also walk with a companion, with family members as the most common companion.
Persona
After conducting the survey and synthesizing the data from the survey, We were able to create three user personas. Based on the data we collected, our user base is fairly diverse, so we created 3 personas and used these as a reference to create wireframes and high-fidelity prototypes to ensure the design could focus on these users.
Design Process
Sitemap
Before sketching, we came up with four main features that will include in the mobile app, after signing up to work on different feature pages, we were able to create a sitemap
10+10 Sketch
Begin with sketches for the Whimsy Walks project, we used the "10 plus 10" method to create sketches. I first create 10 sketches and based on the first 10 sketches, I created 10 more detailed and focused sketches. This helped flesh our design ideas that address Whimsy Walks' stakeholder needs.
Wireframes
Based on the 10+10 method, we then came up with wireframes that mainly focus on four features. We tried to keep it simple and this wireframe helped us to come up with the v1 prototype that allows us to conduct usability tests for the next step.
V1 Prototype
Userbility Test
Heuristic Evaluation
Once we finished our v1 prototype, we got some feedback on our Whimsy Walks prototype from participants who conducted a heuristic evaluation for our prototype. which helped us to further improve our prototype.
Findings
According to the feedback we got from participants, there were several problems we can fix and something we can improve
1
Participant got confused by discover section
2
Participant unable to join groups.
3
Participant couldn't find a place to exit the pop up window
Redesign prototype
After the usability test, I realized that it would be valuable to have a page that gives users an opportunity to share their own thought with their neighbors and friends. Begin with this thought, Made some changes
After the usability test, I realized that it would be valuable to have a page that gives users an opportunity to share their own thought with their neighbors and friends. Begin with this thought, Made some changes
Discover page
The original discover page is a page to find groups and join groups based on users' preferences, which confused participants. Starting with that, I changed the use of the discover page from find groups to a place where users can see other people's posts and put find groups into adding friends button, other than that, I also added a "learn more" button where users can click to see more information about the attraction that people tagged. With this change, now users are able to share their own on the app and get closer to their community.
Before
Before
After
After
Before
After
"Add Friends" button
After changing the discover page, I realized that adding "Join group" and "add friends" to the same page might also help users to find new friends and groups easier, so I decided to put these two features together.
Final
After conducting the usability test, getting feedback, and making some changes, we finally made up a V2 high-fidelity prototype.
Create & Join Walk groups and plans. Walk and discover with friends! You are no longer alone
Users can create and join walking groups. encouraging people to interact more, move more, and discover their neighborhood.
Learn about a specific Whimsy Walk attraction
Users can learn about a specific Whimsy Walk attraction and hear the artist's statement about their creation.
Discover Whimsy Walks Attractions nearby based on User Preferences
Users can view the different Whimsy Walks attractions through the a map or list view
Create and Explore Routes
Users can plan out various routes between the different Artifacts that Whimsy Walks offers. From there, features such as health tabs and edits to the route are also available.
Typography
Color
