Tak
Role
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.
Goal
Design an online returns and exchanges flow for a clothing boutique that is easy to use.
Responsibilites
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."
Goals
-
Return online purchases that did not work out
-
Make returns quickly and conveniently
-
Get money back or receive a new item in exchange
Frustrations
-
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
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](https://static.wixstatic.com/media/460eae_16683d684b61494cbe4ae89a9f078d79~mv2.png/v1/fill/w_599,h_337,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/User%20Journey%20Map%20%5BReturns%5D.png)
Sitemap
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
Returns
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.
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.
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
Location
United States, in person
Participants
5
Length
15-20 Minutes
Mockups
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.'
Mockups: Desktop Screen Size
Mockups: Mobile Screen Size
High Fidelity Prototype
After updating my designs based on the usability study results, and adding in UI elements, I created a high fidelity prototype.
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.
Takeaways
Impact
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.