top of page



UX Designer & Researcher

Product Duration

January 2022 - February 2022

The Product

An online Returns & Exchanges flow for Tak, a clothing boutique. The target users are online shoppers who need a quick and convenient way to make online returns for items that did not work out. 

MacBook Pro.png


Design an online returns and exchanges flow for a clothing boutique that is easy to use. 


User research, personas, user journey maps, paper and digital wireframing, visual design, high fidelity and low fidelity prototyping, planning and conducting usability studies, iterating on designs. 

User Research Summary

I conducted user research in the form of semi-structured interviews with individuals who had made at least one online return in the last year. Participants were recruited from within my social circle, and included participants who ranged in age and gender, and who had varying online shopping behaviors. After conducting interviews, I reviewed my notes and created empathy maps. I identified three main user pain points.

Pain Points

Unexpectedly Paying for Return Shipping

Users were frustrated when they had to pay for their own return shipping. This was particularly frustrating when they did not realize until the end of the online return process that they would need to pay for shipping. Some users stated they intentionally only ordered from companies who offered free returns for certain items like shoes.

Online Return Process Unavailable or Hidden

Users were very frustrated when there was no online return process available, or the returns process felt hidden on the website.

Difficult Return Process Wastes Money

When the return process was too difficult or confusing, users end up keeping items that did not work out, resulting in wasted money for unwanted items.

"I think of myself as an expert online shopper. I read reviews and compare my options...but sometimes items I order just don’t work out."

  • Return online purchases that did not work out  

  • Make returns quickly and conveniently 

  • Get money back or receive a new item in exchange

  • No way to make return online

  • Need to pay extra for return shipping

  • Unhelpful customer support

Anna is a marketing consultant living in Austin, Texas. She is a frequent online shopper, and returns things that didn’t work out for her every few months. Anna prefers doing returns/exchanges online because it is usually more convenient than going into the store. Her online returns experience goes smoothly most of the time, but it is frustrating when she runs into issues like needing to pay extra for return shipping, or the business not having an online platform for making returns. It’s always nice when businesses make returns easy, and she trusts these businesses more. 

Persona: Anna

Allura - Avatar.png

Age:  32

Hometown:  Austin, TX

Family:  Fiancé, Dog

Occupation:  Marketing

Problem Statement

Anna is a frequent online shopper who needs a quick and convenient way to make returns for online purchases, because when the returns process is too difficult she ends up wasting money by keeping the unwanted item. 

User Journey Map

I created a user journey map for the 'Anna' persona, to think through the process of a user making an online return, keeping in mind the tasks they need to complete, how they might feel while completing those tasks, and where there might be opportunities to improve the process. .

User Journey Map [Returns].png
returns site map_edited.jpg


I built a sitemap to plan out the information architecture of the return process. I did not include all details for the entire site, but focused on the main components and the details of the return process, as the return process was the focus of this project. 

Paper Wireframes

I created several versions of the main screens in the returns flow, then compiled my favorite elements from each version for my final paper wireframe screens. Below are some examples of my paper wireframes.

Home Page
My Account
Order History
3. Home - Desktop with Account Drawer – 1.png

Digital Wireframes

When I was happy with my paper wireframes, I moved on to creating low fidelity digital wireframes in Adobe XD for the desktop screen size. 

This wireframe of the home page with the 'My Account' drawer open, shows that the returns process can be initiated through the search bar in the header, through the 'Returns & Exchanges' link in the footer, or through the 'My Orders' link in the 'My Account' drawer. 

2. Home - mobile.png
4. account drawer mobile.png

Digital Wireframe
Screen Size Variations

After designing the desktop screen size wireframes, I used the graceful degradation approach to design mobile screen sizes. 

The first image is the mobile version of the home screen. The second image shows the screen with the account drawer open.

Low Fidelity Prototype

Once I had digital wireframes for all the screens of the returns user flow, I connected them through interactions to create the first iteration of the low-fidelity prototype. After conducting a usability study, I updated the prototype based on the study findings. Check out the prototypes at the links below.

Lo-Fi Prototype 1

Lo-Fi Prototype 2

Screen Shot 2022-02-28 at 5.06.39 PM.png

Usability Study: Findings

Progress Bar

Some participants wanted to know how far in the online returns process they were, and what was coming next. Therefore, a progress bar should be added to show the steps.

Comments Section

Some participants were concerned they would not be able to provide more information if needed. Therefore, an optional 'Comments' section should be added.

Differentiate Items

Some participants wanted it to be more clear which items were part of their return. Therefore, selected items should be more clearly differentiated from unselected items.

Usability Study: Parameters

Study Type

Moderated Usability Study


United States, in person




15-20 Minutes


The top image shows a screen from the returns flow before the usability study. 

  • The image below shows the same screen after iterating on the design based on the results of the usability study. - A progress bar has been added to the top of the screen so that users know what steps of the returns process they have completed and what is left to come.


  • Items that have been selected to add to the return are more clearly differentiated from those that are not selected.

  • An optional 'Comments' box has been added if users want to provide additional information. 

  • The number of screens in the returns process has been reduced by adding the 'Refund Options' to this screen, rather than requiring users to click 'Proceed to Refund Options.'

9. Returns after selecting order or entering order number – 1.png
9. Returns after selecting order or entering order number – 25.png

Mockups: Desktop Screen Size

1. Home - Desktop.png
1. Home w Account Drawer - Desktop – 9.png
5. Orders History - Desktop.png
7. Returns - desktop – 5.png
9. Returns after selecting order or entering order number – 25.png
10. Return Confirmation and Shipping – 2.png

Mockups: Mobile Screen Size

2. Home - mobile – 2.png
iPhone 12, 12 Pro – 1.png
10. Returns after selecting order or entering order number- mobile – 4.png

High Fidelity Prototype

After updating my designs based on the usability study results, and adding in UI elements, I created a high fidelity prototype.

Link to Prototype

Screen Shot 2022-03-01 at 5.23.27 PM.png

Accessibility Considerations

All important images will have concise but descriptive alt-text so that users who rely on screen readers will know their content.

Elements are arranged in an intuitive order. This ensures that users who use keyboards to navigate and/or those using screen readers will be able to easily navigate through the content.

Colors meet contrast standards for accessibility.



Tak customers would now have an efficient way to make online returns for purchases that did not work out for them, increasing their trust and loyalty in the brand. 

What I learned

This project was a great way to practice 'graceful degradation' as I started by designing desktop screen sizes and designed down to mobile. I also strengthened my Adobe XD skills working on this project. 

Next Steps

My next step would be to conduct usability studies with my high fidelity desktop and mobile prototypes.

Based on my usability study findings I would iterate on my designed one more time before passing off designs to engineering. 

bottom of page