The lounge is an animal rescue dedicated to saving companion animals' lives and preparing them for their journey to a new, safe, and loving home. The typical users are adults over 21 years old who can commit, afford, and care for their companion animal. Lounge's goal is to make the adoption process fun and hassle-free experience for its users.
December 2021 to January 2022
The current adoption process is overwhelming, and users don't have the clear, detailed required information upfront before getting emotionally involved.
Design a user-friendly website, especially an adoption flow, by providing all the necessary information upfront and making the adoption process hassle-free and fun for users.
UX designer. I led and designed the adoption flow from conception to delivery.
I conducted interviews, paper and digital wireframing, and low and high-fidelity prototyping. I also conducted usability studies, accounted for accessibility, and iterated on responsive designs.
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. Users want to have clear, detailed information and requirements in advance and a well-structured adoption flow. However, many shelters websites are overwhelming and confusing to navigate and find information, which frustrates many target users and causes a pleasurable experience of adopting a pet to become frustrating for users.
Shelter's website designs are often busy and visually cluttered, which overwhelms users.
Lack of call to action and indicators to guide users where to find information or where to start the process leads to disappointed and lost users.
Adoption flows are overwhelming and not engaging due to the length and the time users spend completing one, which makes the online adoption process a hassle.
I created an empathy map for each of the users I interviewed and then made an aggregated empathy map to demonstrate the complete understanding of users.
As a busy registered nurse and a mom, I want to Have quick access to information and a flexible appointment system so that I can arrange my schedule with my partner and work without overlapping or compromising anything.
Ashley is a busy registered nurse and a mom who needs to have quick access to a clear and detailed information because they want to arrange the schedule with partner without overlapping or compromising anything.
As a busy individual and father of two, I want to know all the requirements in advance so that I can be prepared and efficient with my limited time.
Mike is a busy individual and a father of two children who needs to know all the requirements and information in advance because they want to be prepared and more efficient with their limited time.
I created a user journey map of Ashley’s and Mike's experience using the website to help identify possible pain points and improvement opportunities.
An audit of a few competitors' websites provided direction on gaps and opportunities to address with the adoption flow.
I used the Crazy 8s method to develop ideas. My focus was on finding a straightforward way to make the experience smooth and easy and address the users' needs and pain points.
The website's navigation is the primary pain point, so I used that knowledge to create a sitemap. First, my goal was to make strategic information architecture decisions to improve the overall website navigation. Next, I structured the design and made sure the flow was similar to existing products in the market, simple, and easy to use.
Next, I sketched out paper wireframes for each screen for my website, keeping the user pain points about navigation and browsing, especially for adoption flow in mind.
Because Lounge users access the site on various devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive. The wireframes variations focus on optimizing the navigation experience for users.
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 proper button locations, indicators, and visual element placement on the pages was crucial for my strategy.
Digital wireframe screen variations
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow. After receiving feedback about the adoption flow's overall experience, placement of elements, and page layout, I made sure to listen to the input. So, I implemented several suggestions in places that addressed user pain points.
Unmoderated usability study
United States, remote
Some pages were not properly connected, users were not able to go to the main page or one step back.
Users were frustrated with the number of steps completing the main task.
Some information were repetitive and also occupied the digital real estate.
To bring the user's focus to one task at a time, I rearranged the elements and removed all the unnecessary visual clutters to achieve a minimal and straightforward page design.
Based on the insights from the usability study, I made changes to improve the adoption flow. One of the changes I made was removing the repetitive content that occupied digital real estate. This allowed users to focus on the main task and gave the overall page more negative/white space.
The high-fidelity prototype followed the same user flow as the low-fidelity prototype. In addition, it included the design changes made after the usability study and several changes suggested by members of my team.
1. I used headings with different-sized text for a 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 on each page for smooth screen reader access.
4. I ensured that all the colors and contrasts aligned with accessibility guidelines.
Our users shared that the design was intuitive, engaging with all the visual elements and indicators, and demonstrated a clear visual hierarchy.
Slight design change can have a significant impact on the overall user experience. The most important takeaway for me is to always focus on the user's actual needs when designing ideas and solutions.
1. After launch, conduct a follow-up usability testing on the adoption flow and new responsive website.
2. Identify any additional areas that need attention and iterate on the design.
3. Ideate on new beneficial features for users.