An App for Dog Food

Project overview

The product:

PawPal Express is a online store that offers dog food. The typical user are Dog owners, and most users are busy professionals. PawPal Express’s goal is to make Food delivery, fast, easy and customizeable.

Project duration:

January 2022 to Febuary 2022

The problem:

Available online food delivery websites have cluttered designs, inefficient systems for browsing through products, and confusing Tacking and checkout processes.

My role:

UX designer for the PawPal Express website design

The goal:

Design a Dog food delivery website to be user friendly by providing clear navigation and offering a easy tracking service.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the user

●User research ●Personas ●Problem statements ●Competitive audit ●Ideation

User research: summary

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 treat online shopping as a fun and relaxing activity when they need a break from school or work. However, many shopping websites are overwhelming and confusing to navigate, which frustrated many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of relaxation.

Navigation

Dog Food websites don’t have clear custom options, which results in confusing navigation

Interaction

Small buttons on shopping websites make item selection difficult, which sometimes leads users to make mistakes

Experience

Online shopping websites don’t provide an engaging browsing experience

I created a user journey map of Bargavi’s experience using the site to help identify possible pain points and improvement opportunities.

User research: pain points

Persona: Bargavi

Problem statement:

Bargavi is a busy marketing professional who needs to be able to track her dogs food easyily and to customize her pets to provide for her foods needs and health.

User journey map

Starting the design

●Digital wireframes ●Low-fidelity prototype ●Usability studies

Sitemap

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Refined Wireframe

Paper wireframe screen size variations

Because Square pet Foods’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Digital wireframes

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 useful button locations and visual element placement on the home page was a key part of my strategy.

Digital wireframe screen size variation(s)

Low-fidelity prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of selecting a plan to adopt a Tiger.

View Save a Tiger's low-fidelity prototype

Usability study: parameters

Study type:

Unmoderated usability study

Location:

Canada, remote

Participants:

5 participants

Length:

20-30 minutes

Usability study: findings

These were the main findings uncovered by the usability study:

Cart

Onec the purchase was over the user did not have the option to track know the status of the order

Checkout

Users weren’t able to easily copy the shipping address information into the billing info field

Account

During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info

Refining the design

●Mockups ●High-fidelity prototype ●Accessibility

Mockups

Based on the insights from the usability study, I made changes to improve the site’s Tracking flow. One of the changes I made was adding the option to trck using the word “Track” option in the main headline. This allowed users to track their item easily without going through a complicated process.

To make the tracking flow even easier and understanable for users, I added a order details that allowed users to view which item is on its way.

Mockups: Original screen size

Mockups: Screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.

Accessibility considerations

I used headings with different sized text for clear visual hierarchy

I used landmarks to help users navigate the site, including users who rely on assistive technologies

I designed the site with alt text available on each page for smooth screen reader access

Going Forward

●Takeaways ●Next Steps

Takeaways

Impact

I used headings with different sized text for clear visual hierarchy

What i learned

I used landmarks to help users navigate the site, including users who rely on assistive technologies

Next steps

Conduct follow-up usability testing on the new website

Identify any additional areas of need and ideate on new features

Let’s connect!

Thank you for reviewing my work on the PawPal Express app!

If you’d like to see more, or would like to get in touch, my contact information is provided below:

Email: reshmababu80@gmail.com