My Role as UX/UI Designer
Led end-to-end research and redesign of the app MVP
Maintained an agile workflow using a Kanban board for weekly tracking
Spearheaded early validation, usability testing, and QA testing efforts
Conducted accessibility audits to ensure WCAG are met and users with physical impairments can also access PHaR
My Impact
Improved cross-team workflow by 40% with the implementation of a Kanban board
Achieved a 70% Net Promoter Score (NPS) by leading user-centered design improvements, targeted research, and feedback-based iterations
Significantly enhanced task flow for critical screens, particularly for the "Request Pet Help" feature
Context
What is PHaR?
Pet Help & Rescue (PHaR) is an app designed to assist pet parents in preparing for and rescuing their animals during disasters. This concept was born out of the increasing frequency of natural disasters in recent years.
Goals
Problem Space
Where Art Thou, Users?
While doing a walkthrough of the app with our lead designer (who was leaving the project), critical flaws in PHaR's current design process became apparent:
Stakeholder Meeting
It's Presentation Time
In a sense there's just one mistake that kills startups: not making something users want.
Paul Graham (YCombinator Founder)
I recognized that we couldn't effectively advance the app in its current state, so I initiated a meeting with all my stakeholders to present my findings using the following slide deck (modified to honor my NDA). My goal was to realign the team and develop a strategic plan for moving forward.
The Verdict
After A LOT of deliberation, we collectively decided to extend PHaR's timeline to allow for additional foundational research, necessary app edits, and user testing. Additionally, we scaled back from a full app to an MVP launch to reduce costs.
Discover: Secondary Research
Rewind, What's the Competition Up To?
One of the questions our team struggled to answer was how PHaR provided value compared to other apps. I set out to find the answers by analyzing the market landscape, looking at both direct competitors (existing pet apps) and indirect ones (communication apps).
Research Takeaways
1
Market Gap
No crisis support apps aimed at helping pet parents in the market.
2
A lot of pet parents rely on apps to support their animals.
3
User Trust
Protecting and building rapport with users is critical for emergency apps.
Discover: User Interviews
Next Stop, Understanding Our Users
I interviewed 12 pet parents, half of which already experienced at least one natural disaster, to learn more about our target users (data simplified to honour NDA).
Define: MVP Feature Outline
Workshoppin' for Success
With objectives and user base clarified, I used a MoSCoW-like method to prioritize MVP features. This approach ensured crucial cross-team alignment and incorporated extensive input from front and back-end developers to determine priorities based on feasibility, time, and user needs
Develop: Design Principles
We Need More…Intention
To kick off design adjustments, I created UX principles to follow, based on what I had learned thus far. I didn't want us to lose sight of the vision.
Speed
Enabling users to make quick, easy decisions with little thought
Learnability
Creating an intuitive interface that users adapt to easily
Security
Safeguarding information and building trust with our users
Develop: Wireframing and Prototyping
Rapid Fire Iterative Designing
I replaced our current sitemap with one made out of sticky notes to accommodate changing navigation. I then created mid-fidelity wireframes for critical user flows (with relevant scenarios) and prototyped them for 8 testers. My strategy was simple: create, test, iterate. I went through this process for two main cycles.
Iteration 1: Step-by-Step Pet Rescue Request
Relatively low cognitive load
Instructions are relatively clear
Too many touch points for navigation and selection
UX writing is not clear: "What is a blast?"
Improve on preset option for user clarity
Expects message visibility, immediately
Iteration 2: Full Page, Scroll Pet Rescue Request
Pre-selected options, low cognitive load
Instructions and language clear
Message display, more intuitive
Scrolling can be taxing
User information may not be necessary on sender's side
The second iteration was carefully crafted based on user input, UI standards, and developer collaboration. It received positive feedback, so I adjusted the flow for the final deliverables (hi-fidelity designs).
Deliver: Handoff to Development
May I Speak to the Product Manager?
In the absence of a formal product manager, I created a Kanban board and closely collaborated with all developers to initiate design tickets, document changes, and transfer UI fixes into developer issues. This improved the design-to-development cycle time by approximately 40%.
Deliver: Testing
Follow the QA Leader
While development began their work, I created a robust test plan using Notion and Google Sheets. I collaborated with several users across different device sizes and types and conducted multiple rounds of usability and QA testing. Although we didn’t have formal QA tools, I made the most of what we had.
See for Yourself
Introducing, PHaR!
Notable Testimonials
Reflection
Three Cheers for PHaR
PHaR has been one of my more challenging projects, navigating tight timelines and complex stakeholder needs. My goals include:
Optimizing feature usage with data insights: Using quantitative analytics and qualitative feedback to expand features, improving UX/UI based on real user needs.
Ensuring design consistency in development: Collaborating closely with developers to resolve UI inconsistencies, refining handoff processes to align final output with design.
Advancing platform accessibility: Focusing on contrast issues to meet immediate needs, with plans for comprehensive accessibility audits to support users with disabilities.
