Shoe store return & exchange flow
Composition of 3 devices of different platforms with the app preview on the screens

The product

YourShoes, an affordable shoe store, caters to a user demographic typically aged between 22 and 45, with a majority being working adults.

The problem

The store requires a well-designed return and exchange flow, as a confusing process may potentially reduce client conversion rates and erode trust in the brand.

The goal

Craft a user-friendly home page and return/exchange flow, ensuring clear navigation and a seamless experience.

My role

UX designer (generalist) designing website 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.

Understanding
the user

User research: summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified from the research was working adults who buy shoes for season or for events. This group confirmed assumptions about the main website user.


Another group comprises parents who frequently need to acquire new pair of shoes for their kids promptly and stress-free due to the rapid growth of children. Addressing the needs of this group will enhance the overall experience for all customer segments.

User research: pain points

Time

Most users prefer not to invest much time in shopping; they aim to make the perfect choice quickly.

Stress

When users realize they've made the wrong choice, it becomes stressful. Therefore, a poor or complex solution flow can erode trust.

Persona: Ada

Problem statement

Ada, a teacher and mother of two, seeks a quick and stress-free solution to purchase new shoes for herself and her kids.

User Persona slide with image of user and infortamtion about

User journey map

Mapping Ada’s user journey revealed how helpful it would be for users to have flawless returns & exchanges flow.

The slide with table representation of the User Journey

Starting
the design

Site map

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 graphical representation of the site map

Paper wireframes

Subsequently, I drafted paper wireframes for each screen, addressing user pain points related to navigation, browsing, and the checkout flow.

Given that YOURSHOES customers use a variety of devices, I initiated the design for additional screen sizes to ensure full responsiveness of the site.

Paper wireframwes screenshot

Digital wireframes

Transitioning from paper to digital wireframes clarified how the redesign could effectively address user pain points and enhance the overall user experience.

A key aspect of my strategy was prioritizing optimal button locations and visual element placements on the home page.

Digital wireframes screenshot

Low-fidelity prototype

To create a low-fidelity prototype, I linked all screens associated with the returns & exchanges user flow.

Having received feedback from my team regarding aspects such as button placement and page organization, I actively incorporated their suggestions, focusing on addressing user pain points.

Lo-fi prototype
Low-fidelity prototype screenshot

Usability study: Parameters

Study type

Unmoderated usability study

Location

Sweden, Stokholm, remote

Participants

5 participants

Length

20-30 minutes

Usability study: Findings

Clarity

Initiating the returns & exchanges flow proved challenging to locate

Information

Users need to be aware of the remaining days for returns/exchanges to alleviate stress

Choice

Rather than typing the reason, offering predefined options for selection is preferable

Refining
the design

Mockups

After optimization based on usability study results next step was to create hi-fidelity mockups of the home page and returns & exchanges flow.

Defined voice and tone, typeface and brand colours, used stock images to give it the closest to reality look.

Low-fidelity mockup preview High-fidelity mockup preview

Mockups

Incorporated every screen of the returns & exchanges flow in high fidelity to furnish comprehensive information for further development.

Low-fidelity mockup preview High-fidelity mockup preview

Screen size variations

I included different screen sizes in my designs, building on my initial sketches. Knowing that users shop from various devices, I made sure to improve the browsing experience for different screen sizes, like mobile and tablet, for a smoother overall experience.

Composition of 3 devices of different platforms with the app prevew on the screens

High-fidelity prototype

My high-fidelity prototype adhered to the same user flow as the low-fidelity version, incorporating both the design changes implemented after the usability study and several additional modifications suggested by my team.

Hi-fi prototype
Screenshot of the high-fidelity prototype

Accessibility considerations

Employed varied text sizes in headings to establish a clear visual hierarchy.

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

The site designed with accessible alt text on every page, ensuring a smooth experience for screen reader users.

Going
Forward

Takeaways

Impact

Our target users expressed that the design exhibited intuitive navigation, enhanced engagement with images, and demonstrated a clear visual hierarchy.

What I learned

I discovered that even minor design changes can significantly impact the user experience. My key takeaway is always prioritizing the genuine needs of the user when generating design ideas and solutions.

Next steps

Conduct follow-up usability testing on the new website.

Identify any additional areas of need and ideate on new features.

thank you!