PORTFOLIO
_edited_edited.png)
_edited_edited.png)
_edited.png)
Case study:
HBV
App & Responsive Website
Project Overview
The problem
People in the busy world have kindness on animals but they don't know how to help in this modern world.
The goal
HBV's goal is to connect to those people and act as a platform to them to do some goodness to those animals in the society.
The product
HBV is a socially responsible app providing an opportunities for all to help animals. HBV’s goal is to help dogs at anytime by volunteers.
.
My role
UX designer leading the app and responsive website design from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Project duration
December 2021 to February 2022.
Understanding the user
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users wants to help animals especially dogs but they couldn’t help due to their busy schedule. However, many of them don’t know how to help which makes them frustrated. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation. the feedback received through research made it very clear that users would be open and willing to help those animals if they had access to an easy-to-use tool to help guide them.
Personas & problem statements
Shyam
Shyam is a Front-end developer and he is a dog lover who needs an app because he is in a busy schedule and he could help those dogs from his place.
.png)
Gowtham Raj
Gowtham is a Hacker and who loves animals who needs an app to help these animals because he could contact to the veterinarian and share the exact location of the incident.
.png)
Competitive Audit
An audit of a few competitor’s products provided direction on gaps and opportunities to address with the HBV app.
_edited.jpg)
_edited.jpg)
_edited.jpg)
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on donating and helping features.
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the HBV app. These designs focused on delivering personalized guidance to users to help animals.
_edited.jpg)
Usability study findings
To prepare for testing, I created a low-fidelity prototype which you can view here. I used this prototype to conduct an unmoderated usability study with 7 participants. Here are the main findings uncovered by the usability study:
1) Payments
People want easy access to donate for medical expenses.
.
2) Location
People had difficulty in find the location of the spot/hospital.
.
3) Information
People wanted accurate details about animals and facts about it.
.
Refining the design
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section from the home screen to browse information about the species and a section for donating to expenses.
_edited.jpg)
Additional design changes to the “Journal” page, and providing a clearer information of were left before an item expired.
_edited.jpg)
Accessibility considerations
1) Screen readers
Clear labels for interactive elements that can be read by screen readers
.
2) IA
Initial focus of the home screen on personalized recommendations help define the primary task or action for the user.
.
Refined designs
_edited.jpg)
_edited.jpg)
_edited.jpg)
_edited.jpg)
_edited.jpg)
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
_edited.jpg)
Responsive Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the HBV sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
_edited_edited.jpg)
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
.
_edited.jpg)
Going forward
Takeaways
Impact
Users shared that the app made the humanity raise again seem like something they could actually help. One quote from peer feedback was that “The HBV app helps bring caring about the environment to a personal level in a way that’s easy and engaging.”
.
What I learned
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
.
Next steps
1) Research
Conduct research on how successful the app is in reaching the goal to stop the sufferings of dogs.
.
2) Features
Add more educational resources for users to learn about types of dogs and how unique to have one.
.
3) Rewards
Provide incentives and rewards to users for helping those dogs .
.