Mobile

Project Brief

• UX and UI Design

• User Research

Problem

For my capstone project in my UX course, we were instructed to create a responsive web design. Right away, I knew I wanted to help a local business because I find that local businesses have smaller budgets for UX design, and most often, websites for local businesses can be outdated and not user-friendly.

Research Strategy

User Research

Before embarking on the redesign process, I wanted to focus on understanding the user pain points and motivations when it comes to animal adoption. When determining which four users to recruit, it made the most sense to select a group with a diverse level of experience with animal adoption. That way, my own experiences in animal adoption won’t impact my design choices as someone with experience in animal adoption.

My research goal was to discover the user pain points with the original website and utilize the user feedback in the redesign. During the process of interviewing the users, it was clear that all four users had very similar pain points regarding the website. I decided to use an affinity map to organize the results and cross-examine the similarities and differences in user responses.

There was a clear consensus based on the user responses to the original website:

• Website was too content-heavy.

• Website centered around too many ads and sponsorships, which seemed to redirect the users attention from adopting an animal to focusing on the ads.

As a result, users were:

• Unlikely to revisit the website again or adopt

• Unable to navigate through the website successfully

After discovering that the user pain points attributed to an overall negative experience in the adoption process, I decided the next step in the research was a competitive analysis. The goal of this competitive analysis was to learn more about other animal rescues and fill in any gaps that we might need for this redesign process in order to improve the user experience. In this analysis, I chose to compare three different animal rescues in the large to mid-size scale to better understand the different features they offer and their overall website layout to establish user familiarity. These companies include Toronto humane society, Calgary humane society and Cochrane humane society.

As a result of the competitive analysis, I wanted to incorporate a few key points into the redesign process in order to improve the overall user experience:

• Less text and more illustrations or photos to communicate with the user

• More organized and straightforward site map that allows users to perform key tasks

The information on the original sitemap was a bit overwhelming at first glance and not consistent. As well, a few of the categories don’t fit well under the navigation. For example, in "Donate,” we can see options for support, third-party fundraising, or memberships, and it would be hard for users to find them as they are not categorized in a way that makes sense.

For the new sitemap, I wanted to make the navigation more clear and concise so users could efficiently get to the page they wanted. For instance, instead of events, fundraising, and volunteering being separate navigation buttons, I decided to categorize them as “get involved”.

Now that I have the sitemap figured out, it was time to create the task flow to better understand the common paths that a user would take in this sitemap and whether this would work.

When it came to adopting a dog, I had to make iterations to my high-fidelity screens because the flow from the “dog profile” to the “click on how to adopt” did not work out. Instead, users would benefit more from being able to book an appointment directly on the dog profile page, which would eliminate the need to click on “how to adopt." In my final design, I did include an accordion-style information page for users to expand on different topics, such as “adoption process."

For my sketches in this redesigning process, I wanted to address these user problems that we discovered earlier:

• Users have a better user experience when the design is less content-heavy with more photos and illustrations to communicate the content.

• Users felt overwhelmed when navigating the website and finding information.

• Users were confused by the advertisements, as they seemed to push users to place importance on them.

• No call for action when on the actual adoption page with the animal description, users wondered, “How do I adopt?”

1. Added more illustrations and less text

2. Added accordion style so users can expand information related to adoption instead of having to leave the page

3. Added “book an appointment” button for users to take action when it comes to adoption. The original website design only had the pet listing which confused users on the next steps if they saw a pet they wanted to adopt.

Desktop

This screen turned out just as I had imagined when I created my sketches. I had initial plans to remove the filters because I did not see the value in adding filters to a smaller animal rescue due to the limited amount of pets. However, I left the filters on to see how users would interact with this feature during the usability testing.

1. Type of appointment

2. Time and date available

3. Contact information

Bringing my designs to life with high-fidelity screens, I wanted to make sure that my final designs showcased a more refined, simplified, and user-friendly website compared to the original. First, to understand the pain points users experienced during the user research, I wanted to use less text and prioritize the use of multimedia throughout the website.

I decided to use a hero image of a woman with her dog. to limit the amount of text a user has to read.

To encourage users to adopt, I added interactive features like “recently adopted” pets and their stories.

For my user testing, I decided to keep the same individuals from my previous user interview so that I can accurately compare the responses from the original website to how they feel about the redesign.

I asked them to perform three tasks on both desktop/mobile screens:

• Book an appointment to adopt a dog (Ruby)
• Report animal cruelty
• Sign up for volunteering

When it came to booking an appointment and reporting animal cruelty, 100% of the users were able to successfully complete the task without any errors. However, only 50% of the users were able to sign up for volunteering without any errors.

The feedback from the user testing was that:

• Very straightforward
• Easy to navigate

It was clear that I needed to make iterations in order to help users sign up for volunteering. As well, make some iterations to add final touches to the UI component.

I moved the button to the centre of the hero image and fully enlarged the hero image to fit the screen.

This iteration helps utilize the white space better and visually makes more sense when looking at the other elements on this website - everything else fits the screen from left to right. I wanted to keep the flow of the website consistent.

Before

Rearranged the categories and replaced the original “report animal cruelty” to “become a volunteer” seeing as many of the participants in the user testing had trouble locating how to volunteer.

After careful consideration, “become a volunteer” does fit better when the tagline is “here are other ways to help”.

Report cruelty still remains as one of the navigation so ultimately thought it was a good idea to replace it.

Made the individual listings smaller to create better margins between the listing itself and the boarder (90) versus before (31).

This iteration helps for better readability for users.

From conducting user testing, it was difficult for users to find the specific dog listing.

In this case study, I applied a lot of user empathy to my design decisions. I learned the importance of user empathy when it comes to utilizing the research data and creating an action plan on how we can execute solutions to address user problems. At the same time, I learned how to delegate my tasks within the time constraints given.

I think I really pushed my comfort zone in terms of my UI design and stepped into the shoes of a designer whose purpose was to help these animals get adopted. From everything to the photos I selected, color theme, and text were all chosen to evoke a sense of empathy and make the designs appear more fun and lighthearted.