Five phone mockup screens displaying the Strut mobile app.

Designed Prototypes for Strut, an E-commerce Website and App

Client
NDA Startup Client
Role
Product Designer
Tools
Figma, Photoshop, Illustrator
Timeline
June – August 2022 (12 weeks)

**The app's name has been changed to adhere to NDA guidelines.

Strut is an e-commerce platform and iOS app for affordable, used luxury designer goods, addressing issues in the luxury resale market such as fake products and poor customer service.

Roles and Outcomes

As the sole product designer, I collaborated with 2 developers and a project manager. My responsibilities included conducting user research and creating an MVP prototype. Over 12 weeks, I iterated on the prototype, improving usability by 30%, which helped secure funding for the next development stage.

Prototype for Strut, an e-commerce app for buying used luxury designer products.
PROBLEM

Online Shoppers Have Lost Confidence in the Luxury Resale Market

Collage of article titles talking about fake goods on the second-hand luxury market and terrible customer service.

Market research revealed that online luxury resale shoppers struggle with confidence due to authenticity issues and poor customer service. Strut aims to resolve these issues with a robust authentication system, flexible returns, and a money-back guarantee.

USER RESEARCH

Identified the Users’ Needs Through User Interviews and Research

I conducted interviews with five users who had purchased second-hand luxury goods online and researched the market. Using affinity mapping, I identified that transparency, security, and flexibility are essential for the MVP prototype.

Figjam board covered with sticky notes with user's needs.
USABILITY TESTING

Gathered Users Interested in Online Shopping to Test the Prototype

The goal of the test was to determine if new users could complete the essential functions of browsing the inventory, adding items to the cart, and completing the checkout process. Based on feedback, I made several changes:

HIGH-FIDELITY DESIGN

Created High Fidelity Screens and Responsive Designs

After making the changes, I created high-fidelity screens for the MVP using Figma.

Browsing Inventory

The user can view the app’s inventory without have to login or make an account. They may also choose from various shopping categories and view the important details of each product.

4 mockup screens depicting the app's user flow for browsing the inventory.

Adding to the Cart

The “Add to Cart” button adds the item to the cart. Then the user can view the items in their cart and then proceed
to checkout; they may checkout as an existing user or as a guest user.

3 mockup screens depicting the app's user flow for adding an item to the cart.

Checking Out and Adding a Payment Method

The check out process fits all onto one screen. Tapping on each row opens up a popup window for entering necessary information such as the shipping method and the user’s address. The app provides a variety of payment methods to accommodate everyone’s needs.

3 mockup screens depicting the app's user flow for checking out and adding a payment method.

Designs for Different Browser Sizes

In addition to the mobile app screens, I also created designs for the browser version of the e-commerce store. I changed the number of columns for different screen sizes while keeping the same design elements.

Browser versions of the store on desktop and tablet.
DESIGN SYSTEM

Built a Brand New Design System

I developed a design system for consistent visual design and user experience, covering typography, images, brand logo, and buttons. The system reflects high fashion, avant-garde, clean, modern, and youthful aesthetics.

Strut's design system including typography, images, logo, buttons, and color palette.
IMPACT

Increased Usability Score by 30% and Secured Funding from Investors

Image of 2 hands holding a smartphone with the Strut app on display.

Usability testing with the same five individuals showed a 30% increase in the overall usability score using the Single Ease Question, a 7-point rating scale. The improved prototype helped secure funding for further development.

REFLECTION

What I Could Have Done Better

  • Assured participants that they are not being judged during usability testing.
  • Consider various user flows before designing the wireframes.
  • Involved everyone in the design process as creating a good user experience is everyone's responsibility, not just the designers’.