STYLENS

A shopping app that elevates the fashion discovery process and encourages intentional purchases.
View Prototype

Role

UI/UX Designer

Tools

Figma
Zoom
Photoshop

Skills

UI/UX Design
User Research
Information Architecture
Wireframing
Prototyping
Usability Testing

Duration

6 weeks

Overview

Problem

Fashion retail is an ever-evolving space and even more so in the past several years. With 80% of all retail sales happening in-store versus 20% online, brick and mortar stores still account for the majority of business. However, when shopping in-person, there are many conveniences that shoppers miss from the online experience.

Goal: To bridge the gap between online and in-store shopping in a way that feels low-effort and seamless.

Research

My primary research goals were to gain insights on shoppers' habits around in-store and online shopping, discover any pain points, and learn what the most important influencing factors are for making a purchase.

User Interviews

I began my research with user interviews to learn about shoppers' experiences, needs, and obstacles. I spoke with 5 participants over Zoom with a script of guiding questions.

Key Questions:

What are the main factors that influence your decision to buy or not buy?

How do you typically discover new brands, clothing, and accessories that you want to buy?

What do you find the most convenient about online shopping?

Affinity Map

I organized the observations from my interviews into an affinity map to conceptualize patterns in the data.

Key Observations:

Many users struggle to determine fit/sizing for brands they are not familiar with

Users mainly discover new brands and products through social media influencers and targeted ads (Instagram, TikTok), as well as people-watching and word of mouth

There is a desire to be more intentional with purchases: “Is this something that will be a staple in my closet?”

In light of these findings, I moved away from the idea of an app to be used to facilitate an in-store experience and instead identified the fashion discovery process as an area that could benefit from a new mobile app with tools designed for an easier user journey. I decided to perform a competitor analysis of brands offering a similar type of discovery tool and shopping experience.

Competitor Analysis

I analyzed three shopping apps/tools which each have specific elements that they do particularly well: Amazon, which offers an extensive product catalog, Google Lens, which allows users to pull up product listings from a snapshot, and Shop, which consolidates various storefronts into a streamlined shopping experience.

What’s missing from the market is an app that combines a tailored shopping experience with an advanced visual search feature and AI-powered suggestions.

DEFINE

From these various research methods, I crystallized my user goals, needs, and frustrations into one primary persona who represents the target market I am designing for.

With this persona in mind, I narrowed the focus of my project to one POV and "How Might We" statement.

POV: Users discover new fashion through social media and on the street, but struggle to identify pieces and figure out sizing.

How might we make the fashion discovery process easier for users?

Priority Feature Set

Since my time and resources for this project were limited, it was important to focus my efforts on building out a few features that would be the most impactful.

"StyLens" (Visual Search)

An AI-powered image search tool that allows users to find product matches directly from their camera or by searching pictures or screenshots from the camera roll.

Style Feed

A curated shopping feed of based on your past purchases, brands followed, and filtering preferences. The more you use the app, the better your recommendations become.

My Profile

The user enters their body measurements, fit preferences, and typical sizes worn so that the app can make sizing suggestions for clothing items from unfamiliar brands.

Wishlist

A place to save products before committing to the purchase. Featuring price drop alerts.

Sitemap

Now it’s time to create a more concrete structure for the product.

User Flows

Based on the sitemap, I mapped out user flows for three of the core functionalities of the app: onboarding, identifying an item using the STYLENS visual search tool, and adding an item to the wishlist.

Design

Low-Fidelity Wireframes

For the initial low-fidelity wireframes, I drew up rough sketches to get an idea of layout and organization. I then digitized these into a simple prototype so I could test it with a handful of users to get some feedback before proceeding further with the design.

Initial Testing Revealed...

1. The flow and navigation was straightforward and simple to understand

2. Several users were confused by the heart icon in the bottom navigation bar; they thought it would favorite the item instead of leading to the wishlist

3.  One user felt that the homepage looked too cluttered

In light of this feedback, I made the necessary revisions to improve the clarity and visual balance of the design for the high-fidelity wireframes.

Branding

Before jumping into high-fidelity, I needed to define the brand identity. I wanted the branding to have a modern, tech-forward feel with hints of playfulness.

I combined the words “style” and “lens” into a stylized wordmark, “STYLENS.” The logo image combines a camera viewfinder with a spark to symbolize the AI-powered visual search technology.

I chose a clean, round sans-serif font that felt modern with a touch of youthfulness.

The color palette features a bright turquoise and pink which will be applied in gentle washes in the background.

UI Kit

When I began constructing the hi-fi wireframes, I applied the brand style to each component to create a cohesive look and brand identity. This was the resulting UI kit.

High-Fidelity Wireframes

For the high-fidelity wireframes, I built out two main user flows: 1. Conducting a visual search and adding the item to your wishlist, and 2. Finding the item in your wishlist and adding it to your cart to purchase.

Iterate

Usability Testing

I conducted usability testing with 5 participants over Zoom. They were asked to complete two tasks relating to the user flows along with more general questions about their thoughts on the design. This yielded some very useful insights.

2/5

users wanted the visual search tool to be available on the home screen for quick access

2/5

users thought the STYLENS logo was a button to open the camera

3/5

users wanted to see some sort of popup confirmation after adding an item to the wishlist

Overall, users found the soft and minimal UI appealing and felt the font and spacing to be easy on the eyes.

Revisions

Based on the feedback from the usability testing, I decided to make a few high-priority revisions.

Try the final prototype in Figma here:

View Prototype

Closing Thoughts

This project was deeply rewarding to work on because it is a topic and area I find very interesting and I had the chance to design end-to-end. When sharing my final product, several of my users expressed that they would want to use this app if it actually existed. Through this process, I gained further confirmation of the importance of keeping an open mind and open ears to truly discover what the user needs in a product.

Next Steps

The next steps for this project would be to flesh out additional features, such as AI styling recommendations, product comparison tools, video content, and AR (augmented reality) try-on features.

Additionally, the creation of brand storefronts would be useful for facilitating curated shopping experiences and opening the door to future brand partnerships.

View another project: