Tradesy Redesign

KLEINER PERKINS DESIGN FELLOWS APPLICATION

Overview: For the 2019 KP Design Fellowship challenge, I decided to do a case study on Tradesy, a women's shopping app that operates in a peer-to-peer marketplace, allowing users to easily buy/sell luxury and fashionable clothing items. I used this opportunity to investigate pain points with their current interface and identify ways to improve the functionality in key user flows of the app.

Timeline: 2 weeks

My Role: User Experience Design, Interaction Design, User Research & Analysis

The Context

We currently live in a society which has embraced the sharing economy model. Whether it’s Uber or Airbnb, we’ve become accustomed to the idea of sharing resources with each other through apps, thus building a sense of mutual trust and empowerment amongst people. In addition, it also comes with the added benefit of quick cash while better utilizing existing resources, and offering great convenience to users.

Tradesy is one such app based around the sharing model as well but not necessarily in a direct sense. It’s a platform that, just like any other app with a sharing based model, has 2 kinds of users. There is the buyer that utilizes Tradesy to access affordable clothing and purchase items easily. And then there is the seller, looking to empty out their closet and sell items they don’t use anymore.

Founded in 2009, Tradesy has grown to be a leading player amongst its competitors like Poshmark, Thredup and The RealReal. However, what sets Tradesy apart is the fact that it primarily serves to empower women of all ages, providing them with a convenient, affordable and easy platform to explore fashion. However, the Tradesy mobile app currently has some functional barriers that limit accessibility. It also fails to empathize with user needs due to the lack of error preventive measures and status indicators. This led me to my design question:

How can we improve the current experience of the Tradesy app to reflect best practices and make the online buyer/seller journey more accessible for users?

In this case study, I will be looking at the Tradesy iOS app to get a better sense of these barriers and how they limit certain functionalities for users. Through research and analysis, I will address both UX functional and user pain points to provide recommendations that improve key user flows within the app.

The Process

Heuristic Evaluation

Before delving into user research, I decided to conduct a heuristic evaluation to assess the platform myself and get a better understanding of the flows and potential barriers. After spending some time exploring the Tradesy app, a few questions came to my mind based on my observations for some opportunities of improvements in the current design.

I also used Neilson Norman’s Usability Heuristics as a framework to assess the Tradesy app against 10 key principles of interaction design and this helped me identify two key areas for improvement:

  1. Error prevention: “Users are often distracted from the task at hand, so prevent unconscious errors by offering suggestions, utilizing constraints, and being flexible”

    Keeping this in mind, I noticed that the Tradesy app did not account for error preventive methods for potential mistakes that users could make due to poor layout and lack of enough distinction between buttons and text.
  2. Recognition rather than recall: “Showing users things they can recognize improves usability over needing to recall items from scratch because the extra context helps users retrieve information from memory”

    This also falls in like with Jacob’s law that dictates that most users spend their time on other websites, so following design conventions aid users in seamlessly using the app. Tradesy fails to follow conventions in certain flows which leads to a point of confusion and struggle in remembering important information within the app like how to remove an item from the shopping bag.

User Research

As a designer, my core ethos when approaching a project lies in constant iteration and user feedback. My first step in gathering insights was to identify the key audience of Tradesy. Initially, I was under the impression that this app was only for the older high-earning demographic (considering that Tradesy is used for designer items) but after reading more about their business goals, I saw that they wanted the make clothing accessible and affordable for women of all ages. So keeping this in mind and reading a couple of articles online about their user base, I identified 2 personas to cater my redesign for:

Insights & Pain Points

While identifying the key personas, I was luckily able to have casual interviews with 3 recently graduated students from my network (persona 1) and one of my older female co-workers from my part-time job (persona 2).  While gauging their thoughts on the app, I also asked them to perform the following tasks to understand the basic interface interactions.

The task analysis not only helped me to see how they behaved with this app but I was also able to get a better understanding of their reactions to certain flows by talking to them throughout this exercise.

After examining the results of all the interviews and the analysis from my heuristic evaluation, I was able to narrow down 2 key pain points with the app which presented as design opportunities in this case study:

1. LACK OF FAMILIAR GESTURES AND KEY INDICATORS

When you click an item for preview, the screen has 2 important buttons: ‘Add to Bag’ and ‘Save to Favorites’. The ‘Add to Bag’ button works perfectly fine when clicked as two indicators pop up to confirm this action: the pop up box and the red notification in the bag located in the bottom nav bar.

However, when the ‘Save to Favorites’ button is clicked, there is only one indication confirming the action, which is the heart filling up in black color. This is problematic because the app does not provide any indication as to where the item is stored once this button is clicked, thus leaving the users confused on how to access their favorites.

There is also another room from improvement in the flow to remove or save an item from the shopping bag. Currently, the app employs a two step method to confirm the user’s action but this becomes non intuitive and doesn’t comply with familiar gestures (like the swipe interaction) that people are used to across other apps.

The page also has too much information packed in one screen, making it hard for users to identify which items are saved in checkout and which ones are saved for later.

2. LENGTHY USER FLOW FOR SELLING AN ITEM

The current flow for selling an item requires the user to go through many steps and screens, making it a tiring and cumbersome task. And even after looking at each screen, there are small choices in the layout which makes the flow all the more frustrating like having no cancel button to get out of the flow at any point or poor use of screen spacing that leads to unnecessary extra steps for the user to navigate through.

The interactions in this flow are also all over the place with an obvious lack of synergy. Some screens automatically move to the next step whereas other screens require the user to manually click on the next button to move on. Many users found the order illogical as well and over all, the interviews clearly showed that people found this to be very frustrating, thus demotivating them to sell items.

Solution

1. INCLUSION OF FAMILIAR GESTURES AND KEY INDICATIONS

Figuring out the best way to add another indicator to show that an item was added to favorites, while also revealing the location of this item was quite tricky. I considered a lot of ideas like rearranging the bottom nav bar to accommodate a separate tab purely for favorites but that would’ve resulted in rearranging the bottom nav bar altogether and figuring out which one to keep/remove.

So instead, I decided to explore the animation route to figure out the easiest way to show the indication without making too many changes in the existing design. In the current app, when the user clicks ‘Add to Bag’, a small red circle pops up in the bottom nav bar next to the ‘Bag' icon.

So I decided to emulate this interaction for Favorites as well to have another red circle pop up beside the ‘Me’ icon. But instead of staying there, the red circle disappears just in time for the user to see that something has been added into the ‘Me’ section of the Tradesy app. This small but effective interaction immediately grabs the users attention and directs it towards the location of where the item in favorites is stored.

To add more familiarity into the action of removing an item from the shopping bag, I removed the 2 buttons entirely and retained the right swipe gesture to reveal not just the option of ‘Remove’ but also ‘Save for Later’. This reduces cognitive load for the user and makes the action more intuitive as they only need to perform one gesture to access both the options.

The original screen was also a little cluttered with a lot of information, so I incorporated separate tabs for easier access to items in the current shopping bag and items saved for later.

2. IMPROVED AND MORE INTUITIVE USER FLOW TO SELL AN ITEM

In rethinking the user flow for selling an item, I first mapped out the current flow to get an idea of the number of steps involved and how the information was grouped together.

When looking at this diagram, it’s very clear that Tradesy dedicates a step (and thus separate screens) for every set of information rather than having one long form for the users to fill. While this is done in good intention, as breaking it up into sections makes it easier for users to fill in the information, it adds unnecessary bulk into the flow, making it as long as 12 screens.

So the revised version reduces two step by combining two sets of screens, like shown above. This also makes the flow more logical, for example users are accustomed to seeing the basic details of the product (designer + item description) first and grouped together. The total screen number of this flow is also reduced from 12 to 9 by combining screens of the same group into one and making better use of empty space. Examples of this is shown below:

Another set of key changes done in this flow is the layout of the individual screens. Keeping in mind the pain points identified in my research, the revised view of each screen now includes the following changes:

Overall, the new layout empowers the users, by making important actions accessible and more intuitive to perform.

Another element that I decided to change in this flow is the addition of the ‘Add Photos’ before the camera pops up. Because right now, after selecting the category of the item, the camera pops up immediately without any warning to the users that they have to take pictures of the product. Therefore, “Add Photos” screen informs the user to prepare to take photos, so they can gather their item and prepare accordingly before moving on to open the camera. Again, small actions like this helps bring in a smooth and uninterrupted experience to the user without any unexpected surprises or frustrating moments.

Final Outcome

Key Takeaways

Analyzing such small details of the Tradesy app interaction was most definitely a fun exercise as it taught me a lot about how certain changes, however small, can help make such a big difference in the user’s journey of navigating the app.

There were a lot of other small changes that I wanted to discuss but due to time limitations, I had to take a step back and assess what were the most important pain points that I had to focus on. Narrowing the scope to meet the time limitations has always been a challenge for me personally but this design exercise was a great way for me to improve my decision making in prioritizing the right features depending on time and context.

Future Considerations

If I had some more time to work on this, I would definitely dive into analyzing other concerns brought up in the user interviews like the disorganized layout of information in the product preview page and how the ‘Me’ page doesn't contain enough emphasis on the important sections of the app like the closet, favorites, etc. due to a dull and ‘settings’ like page layout.

I would also do A/B testing on my recommended changes to assess whether they really help improve the experience for users or not. Indications of this would come from timing the speed for performing an action, the speed for finding information and of course good old interview questions to gauge their over all thoughts on both the options. This would tremendously help me to iterate on these designs further to incorporate their feedback.

And finally, I would also do a wider user research to identify other missing personas and their pain points in using the app. This would again bring a more holistic view in evaluating the Tradesy app and would give more scope in figuring out what problems within the app are recurring amongst most users and what are simply outliers.