relyst-hero-inset-beige.png
 
 

MOBILE APP DESIGN • E-COMMERCE

Relyst

Simplifying the thrill of the hunt

 

Role

Lead product designer and
UX researcher

Tools

Adobe XD • Google Forms • Pen & Paper • Google Slides • Zoom • Otter

Deliverables

User Interviews • Personas • Product Prioritization Process • Market Research • Competitive Analysis • SWOT • UX & Visual Design • Sketches • Wireframes • Prototyping • Usability Testing • Validation

 

Overview

The re-commerce market has been seeing major growth in the past few years as more people are going online to shop for secondhand. How are shoppers navigating this new resale landscape and is it actually easier for them to find what they are looking for? 

 

Solution

It was discovered that online shoppers spend an inordinate amount of time searching and comparing product listings. To help users find the best deal for their ‘one in a million’ all on one site, I designed a mobile app named ReLyst that can make shopping for secondhand fashion a seamless and speedy experience from search to checkout!

The Current User Behavior

With a focus on secondhand fashion, these are direct quotes from online shoppers during the interview phase.

With a focus on secondhand fashion, these are direct quotes from online shoppers during the interview phase.

It was discovered that online shoppers shared the same motivations and habits when shopping online for secondhand:

  • Users shop with intent because it’s too easy to go down the internet rabbit hole searching endlessly.

  • Users will research products and compare prices among different sellers and marketplaces to ensure that they are buying the best item for the value.

These motivations coupled with the many variables associated with secondhand items (e.g. availability, condition, and inconstant price structure) actually make the shopping experience time consuming, contrary to their expectations of online shopping being fast and easy with a click of a button.

Based on research findings, I developed a persona with a user story to help guide design decisions and understand user needs.

How might we facilitate online secondhand shopping so that people can search & shop quickly and efficiently?

Market Research

 

From my research, I discovered an indirect competitor named Lyst, which is an aggregator that allows shoppers to search for new items among many retailers under one site. The framework seemed perfect since it gathers various sources across the internet, resulting in better odds of finding a specific item.

After brainstorming other possible solutions, a product prioritization exercise with dot voting confirmed my idea that an aggregator would be a useful tool to help solve users’ frustrations with search.

A competitive analysis uncovered an indirect competitor that could solve users’ frustrations with searching resale items online.

A SWOT analysis revealed an opportunity for Lyst to gain traction in the resale market!

A window of opportunity.

Lyst’s platform is focused on new and trending fashion. It does have a small selection of secondhand that is mixed in with the new, but it is not robust enough for the growing sector who are only looking for secondhand.

Why Lyst?

Icon_Social Network3x.png

65 Million Users

Among Lyst’s massive following, it would be interesting to see how many of them shop secondhand or are likely to shop secondhand but since this information is not readily available, I hypothesize that a good portion of them will shop or have shopped secondhand. Research has shown that 51% of consumers plan on shifting their spending to secondhand and the rate of adoption increases with every age group.

 
 
Icon_Express Checkout3x.png

Express Checkout

Lyst has a feature where buyers can purchase items from multiple vendors in one transaction but its use is limited to only those retailers that give Lyst access to their inventory. Even though it’s not quite universal, it is a nice-to-have feature that can decrease cart abandonment (which I can see being a major buy-in for stakeholders!).

Icon_Mobile3x.png

Mobile App

I wanted to focus on a mobile app since more people are using their mobile phones for online shopping. According to prnewswire.com, mobile accounted for 8% of Lyst’s overall site traffic and grew to 25% by the end of [2012] and sales leads generated on mobile have grown ten-fold in that same year. For this project, I decided to focus on iOS since 6 out of the 7 interviewees own iPhones.

 

 HYPOTHESIS

Designing a resale feature in Lyst to aggregate search results will help users shop quickly and efficiently.

 

Lyst Usability Test

 

Before jumping into the design, I conducted a usability test on the current Lyst mobile app to see if there was room for improvement. I approached 7 people from the ages of 16 to 40 years at a local vintage store to perform specific tasks on the Lyst mobile app.

5 of 7

Users found the available tools helpful when searching for an item.

  • If the initial search didn’t give the users the results they wanted, they struggled to come up with other search terms for the second trial.

3 of 7

Users found it easy to comparison shop from multiple vendors by price.

  • Users expressed frustration when there was no easy function to keep track of the items beyond clicking the link to open a new window and toggling through multiple windows to compare products.

1 of 7

Users found the shipping and delivery information readily accessible.

  • Users really disliked having to parse through each retailer’s website for shipping policies after being redirected there from the Lyst site.

 

Transforming Lyst into ReLyst

 

As I worked through the user flow, I realized that I needed to design a separate platform dedicated to secondhand instead of adding a ‘pre-worn’ section on Lyst. There were way too many variants in the re-commerce market that mixing new and used items would inundate the user with too many steps.

Using the Lyst app as a guide, I kept the typeface, the general layout and color palette the same but took some liberties in the application in order to differentiate it from the sister product.

Various iterations of buttons and the pagination on the search interface.

I focused first on the button placements and pagination since these prompt action. I made sure that these elements were placed in areas that did not distract from the product itself while being intuitive to the users’ actions.

Once I had a high fidelity mock up, I conducted more usability tests to improve the information architecture, user flow, and the copy write all the while iterating and redesigning certain features in order to get a working prototype of ReLyst, an aggregator and a market place for secondhand fashion.

The ‘Search’ screen was simplified so users can begin their search without distraction.

The ‘Search’ screen was simplified so users can begin their search without distraction.

The product list page was expanded to include more information that users want to see at first glance.

Based on how users search online for secondhand items, additional options were added to the advanced filters.

The sort feature was amended to incorporate shipping costs into the price.

Designing A New Experience

 

Features, screens and pathways for comparison shopping and checkout were designed anew since they were missing from the Lyst mobile app.

 

Comparison Table

A comparison table is an easy way for users to check products side by side. I sketched different CTA options and ways users can access the comparison table until I finally settled on the ellipsis. To notify users about the additional features within the ellipsis, a tooltip appears right before the aggregated search results.

Searching for the sweet spot! It was challenging to find space for the comparison feature CTA on an already crammed product page but...

 
 

…with the use of the ellipsis, users can select and compare products when needed.

 

Express Checkout

My initial intent for the checkout process was to make the process fast and easy. But after synthesizing the results of the usability test, it turned out that changes needed to be made on how the content was presented so users can focus on each task to avoid mistakes when inputting their information.

The product detail page needed more explicit information so users did not have more questions than answers.

The cart must quickly summarize and confirm the contents without causing additional confusion.

The information hierarchy for shipping was consolidated into easily digestible parts.

Design Solution and Validation

 

With the prototype in hand, I was ready to test the app with another set of users at my local vintage store. Using the same criteria from the Lyst usability test, there was a marked improvement with the added features in ReLyst.

 

7 of 7

Users found the available tools helpful when searching for an item.

7 of 7

Users found it easy to comparison shop from multiple vendors by price.

5 of 7

Users found the shipping and delivery information readily accessible.

The user flow and features that were tested to determine validation of the design solution.

Instead of spending 30+ minutes shopping, the user can now spend less than 10 minutes from search, compare to checkout.

Searching for a specific item should not be a guessing game.

Instead of spending time visiting multiple sites and figuring out key search terms to find what you are looking for, ReLyst is an aggregator that will ‘scan’ the web and pool the results onto one site.  

aggregator-image.jpg

At a loss for words? Use the image search feature in the search bar to search an item by an image or photo instead of text.

Image-Search-Feature-whitebg.gif

See something you like? Select ‘See Similar Items’ to narrow down the results to the exact item you want to see.

Relyst-Similar-Items-1500px.jpg

People comparison shop to validate their purchases.

With an improved product list page that factors in shipping details, you can confidently assess the best price between items without being surprised by “hidden” costs.

And with a feature that enables an easy-to-read comparison table, you can see how products stack against each other to ensure you are getting the best value and condition available on the world wide web .

The checkout process should be easy, simple and secure!

Not only an aggregator, you can also shop directly on ReLyst. With Express Checkout in the mobile app, you can purchase items from different vendors in one transaction.  To make checking out quicker, create an account to safely save your payment and shipping information so you can snag that one of a kind item before anyone else.

 
express-checkout-50percent-whitebg.gif
 

Shipping shouldn’t be a mystery (and people like choices)!

Choose how and when you want your item shipped and delivered during check out. With select sellers, a nice-to-have option is the ability to safely pick up your item in person so you can avoid the risks associated with shipping such as lost packages or damaged products (the usual culprits)!

 
trans-shipping-50percent.png
 

Reflection

 

Shopping secondhand online is a unique experience and requires a different approach than regular retail platforms. With so many variables in secondhand fashion, it was a challenge to find that balance of giving the users the pertinent information they need without intimidating them with too much information on a mobile screen. Given more time, I would  like to continue to:

  • Test with a larger pool of people to see what can be improved and solve for other pain points.

  • Investigate safety measures that will protect sellers and buyers from risks that can come with in person Local Pickup.

  • Design layouts and user flow in other scenarios besides the ‘happy path’, such as error states or how the platform would function without Express Checkout or for a guest.

  • Explore ways to transform the platform into a circular economy by converting buyers into sellers and interviewing established secondhand sellers to determine their pain points and needs so that ReLyst can become the premiere platform for their listings. 

 
Next
Next

Google Maps Redesign