Woof App
Woof is a mobile app that helps users find
different service type/care providers for their
dog. Users can make a request for the different services they need for their beloved dogs and find a list of people to choose from.
PLATFORM: iOS
TEAM: 1 Designer, 1 Business Development
ROLE: Solo Designer
I am responsible for all design aspects of the project and also for working on the concept.
RESEARCH
Online Research on Dog Owners:
We did this to understand our target audience and learn more about which demographic would
our primary user.
Competitor Analysis: We did this to help build up our market insight. By exploring areas pertinent
to our concept, a competitor review helped us reveal opportunities to our approach. Some of the key questions we asked while making this analysis was:
-
What will be our unique feature?
-
What is the competitors’ approach to X?
-
What do they do better?
-
How could we improve Y?
This helped us carve out our niche – An app that's more targeted to providing customizable
services for dog by just sending a text. Also, the app will have a more fresh look, trendier interactions, and easier navigation system.
BRAINSTORM
Whiteboarding /Brainstorming: We used the framework where we brainstormed potential users, situations, their motivations, and outcomes from this app. We also chalked out our persona here with the potential task flow. Learnings from this brainstorming section helped me create a more user-centric design in the later stages as I was able to clearly understand some pain points of the persona and solve it accordingly. This also enabled me to list out some key aspects of the app.
WIREFRAME
Initial Wireframe: I put together the first sketches of the app based on the previous learnings from the research and whiteboard phase. While designing this app I tried to keep the navigation easy
and focused on making it user centric. I then gathered feedback from prospective users and other product designers and iterated on these wireframes to incorporate all the feedback I received.
Low-Fi Wireframe: Iterated on previous wireframes through some design critique from other product designers and created the digital low-fi version of the screens for further user testing.
User Testing Feedback: Getting feedback from users at this phase is a very crucial step as you want to access if we were heading in the right direction and also validate some assumptions made in the ideation. We listed out all their pain points on post-its so that it was easy to group the common ones and the most impactful ones for iteration. You can see some of the pain points in the image below.
Swiping
Interface
Map
Login Input Box
Social Media
Timeframe
PAIN
POINT
PATTERNS
Other
Filter
User 2
Feedback
User 1
Feedback
User 5
Feedback
User 3 Feedback
User 4
Feedback
Services
VET
Services
Mobile Vet
VISUAL DESIGN
Initial Style Guide
Color Palette: As we had different services available for the user to choose/combine it was important to have a multicolored color palette that would give equal emphasis on each service available. I was inspired by some multi-colored balls that I had at home and always admired how beautiful they look when they come together. The palette was refreshing and fun. Then I needed some neutral shades to balance the colors.
Typeface: I used SF NS Display which had a clean and crisp feel attached to it.
Hi-Fi Mockups
Based on the insights from the user pain points synthesis in the low-fi phase, I started to iterate on the user experience and implemented the visual designs for this phase. Once all the screens ever designed I created a rough prototype to test. Based on the user feedback, I iterated the screens to make them more user-centric.
BEFORE
Users wanted a way to be able to select dates
Users felt that the services were not aligned in the appropriate order
Users thought grey meant inactive state
Users felt a title for this section would be more useful
AFTER
Changes implemented:
-
Introduced the Select Dates feature
-
Changed the grey service items
-
Re-ordered all the services and placed most relevant ones on the top instead of bottom
-
Changed order of the elements in the Drag & Drop box.
User did not like the icon
AFTER
Users wanted the option to the list view as well
Users wanted to see another indication for swipable content
User felt there were too many tabs
User wanted this piece of information under the
'About' section.
Users was confused with this as it reminded then of a
slider. But they liked the visual look and feel of it.
BEFORE
Changes implemented:
-
Designed for a toggle button on the top to switch between profile and list view.
-
Included a drop shadow effect and another card peeping from the back to make it appear more swipeable
-
Changed the icon for send
-
Reduced the tabs to 3 main ones
-
Moved the grey content box under 'About section'
-
Moved the smiley away from the bar
ONBOARDING
LOGIN
TASK
HOMESCREEN
FILLED HOMESCREEN
GUIDE
LIST VIEW
FAVORITES
PROFILE VIEW - Reviews
PROFILE VIEW - About
VIEW OTHER PROJECTS
