END-TO-END MOBILE FIRST RESPONSIVE WEBSITE
Pawsurance
OVERVIEW
ROLE
CreatorUX ResearcherUX/UI Designer
TOOLS
Figma
Miro
OptimalSort
TIMELINE
80 hours
Timeline
Background
As a student project for DesignLab’s UX Academy, we created our own end-to-end digital product backed by real research, user interviews, prototypes, and tests.
Pawsurance* is a website that helps educate pet owners about the wide variety of health care options for their pets. This website also has the data and tools to help pet owners select find best plan fit for them.
*Not a real website
Pawsurance provides comprehensive, digestible information about pet health insurance so that owners can learn about and select the best health options for their pets.
Goal
Competitor Analysis
DEFINE
STRENGTHS
Big name, well known
Public workshops too
Large variety of terrariums
Large variety of events
Based on the data and observations from the research, the Frugal Pet Parent and the Protective Pet Parent personas were created.
These are the main users who would utilize Pawsurance to find more information and the best solutions for their pet’s health care.
From the gathered insights and an Open Cart Sort with the interview participants, I learned how pet parents would prefer information prioritized.
This sitemap organized the framework of main categories and sub-categories to be available on the website.
Flows
I created these flows to help comprehend how users will interact with the website, and how to best lead them there.
The happy path shows the flow of an ideal user submitting a questionnaire and signing up for insurance.
The task flow breaks down each step the user encounters.
STRENGTHS
Detailed package breakdown
Attractive brick & mortar
WEAKNESESS
$89/person
Minimum of
Not very aesthetic products
WEAKNESESS
In-person only in Houston
Photo carousel marker not very visible
NEEDS
Transparent, clear prices
Breakdown of plan details
Simple, quick process
These responsive wireframes were developed from combining the data found from:
Positive feedback from old website’s usability audit
Needs/wants from the user interviews
Strengths from Competitor Analysis
Click here for desktop wireframes
Usability Tests
USER INTERVIEWS
PAINS
Overwhelming # of options
Don’t know where to begin
Coverage is not fully explained
Insurance is expensive
Interview Details
Participants: 6 pet owners (cat + dogs)
Location: across U.S.
Work status: Full-time employees
Format: In-person + Zoom
Insights
PERSONA
SITEMAP
RESEARCH
Low Fidelity Wireframes
DESIGN
UI Kit
The client wanted their color palette to match these images of flower bouquets. They requested a colorful, fresh, and vibrant feel.
High Fidelity Wireframes
CHANGES MADE:
Created a responsive mobile page
Decluttered and re-organized navigation bar into hamburger icon & page
Added CTAs to hero section for more direction
Present past clients for credibility
Broke down WHO?, HOW?, WHAT?, etc.
Included actual images - not just stock photos
Added more pictures throughout to better show products/services
Clarified “How it Works” with better detail
Integrated testimonials from Yelp
Created gallery of images
Added Terrarium prices CTA for direction
WANTS
Comprehensive coverage
Testimonials
AFTER
WEAKNESESS
In-person only in Idaho
Starting price point + clean up fee
It was rewarding to hear the Succulent Scene’s gratitude regarding their website redesign. They really saw the value in the user research and testing and understood the reasoning behind the changes and decision making process.
BEFORE
PROTOTYPES
Goals:
Examine how users naturally move through the product
Confirm an clear path for the main tasks
Confirm overall positive user experience and intuitive usability
Gain feedback and iterate where improvements can be made
Results
Task Completion
Positive Feedback
Iterations
STRENGTHS
Stylish, catchy UI
Multiple products
Professional pictures
Worked with big names
5/5
Participants successfully submitted an inquiry from Contact Us page
“It was easy to understand the distinction between the two party services.”
Critical Insights
BEFORE
Final Designs
CONCLUSION
Tasks:
Explore either In-Person Party or Virtual Party page
Submit inquiry form on Contact Us page
4/5
Participants explored the In-Person Party or Virtual Party page
“I love all the example pictures of how your products and events look like.”
4/5 participants didn’t read through “How it Works” steps in the sub pages - just scrolled through
3/5 participants clicked on Terrarium cards looking to find more information
3/5 participants thought the “We’ve partied with” examples should be moved lower on the homepage
CHANGES
AFTER
Changed top image with the Virtual Party page for repeating pattern and more cohesiveness
Removed “How it Works” as it was being overlooked in the tests
Broke it up into smaller, more digestable steps (yellow sections)
Introduced the Next Step CTA to better direct user flow
✔ New, engaging website redesign
✔ Updated, alluring color palette
✔ Authentic, convincing image gallery
✔ Clear, intuitive user flow
✔ Descriptive, digestable information
Future Design Considerations
Include video snippets of their parties
Test what people prefer to see first “Who We Are” or “What We Do”
Check if any pages lack activity