WangDog
App Design Case Study
The Space Between Us
Explore artwork that captures the subtle connections and meaningful gaps that define the human experience.
01 Product Overview
The Product
The purpose of the Wang Dog is to match qualified dog walkers with users who need help caring for their dogs,
Wang Dog goal is to help the busy users to take care of pet.
Project duration
January 2024 to March 2024
The problem
Users can’t spend more time with dogs,can’t take dogs for walks,can’t take dogs on vacation…
The Goal
Design a Wang dog let users friendly book recurring dog walkers,dog caregiver .
02
Understanding the user
My Role
UX designer leading the Wang Dog app design
Responsibilities
user research,
paper and digital wireframes,
low and high-fidelity prototyping,
Conducting usability studies,
accounting for accessibility,
iterating on designs
responsive design
02 Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research : Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs.
I discovered that users often sad because can’t spend more time with pets so users Wants to book recurring dog walkers who has experience with animals.
User research : Pain points
1
USER NEEDS
-
Wants to book recurring dog walkers
-
Would like to prescreen dog walkers
-
Wants a more consistent dog walker
2
USER DEMANDS
-
Would like a dog walker who has experience with animals
-
Would like to find dog walkers in advance
3
DIFFICULTY
-
Doesn’t know enough people to ask them to walk dogs
-
Dog walking is expensive
Persona: Mahalia
Problem statement:
Mahalia is a nurse in small town, and she have one dog, she needs to find a dog walker can take her dog for walks and to the park, because she work in night shift sometime.
User journey map
By creating user journey maps,
I wanted to illustrate the process of how Mahalia behaves, feels, and what she thinks while accomplishing her goals to address pain points or provide moments of delight.
03 Starting the design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Refined paper wireframe
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Dashboard with a list view of all dog care servers
Homepage is optimized for easy browsing through the carousel of images and nav menu options
Usability study: findings
These were the main findings uncovered by the usability study :
Round 1 findings
1
Need the navigation bar
2
Schedule:
the details of appointment
doesn’t list
3
Mission and chat: don’t have mission and chat to see the state of services
Round 2 findings
1
Not necessary of the prices of service
2
Not server classification
3
Check out:
the users can’t check again
the appointment after pay
04 Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Mockups
Based on insights from the usability studies, I applied design changes such as adding a simplifying navigation bar,
adding an mission to see the state of services ,and change the schedule to the appointment.
Before usability study
After usability study
Based on insights from the usability studies, I applied design changes such as adding a server classification,and make the checkout flow even more specifically and easier for users.
Before usability study
After usability study
Before usability study
After usability study
Mockups
Accessibility considerations
1
I used headings with different sized text for clear visual hierarchy
2
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3
I designed the site with alt text available on each page for smooth screen reader access
05 Going forward
-
Takeaways
-
Next steps