top of page

Style.Rx

An End-to-End Shopping Application
ROLE
UX Researcher
UX | UI Designer
TOOLS
Figma
Miro 
DATE
2023
July
Illustrator

Background

Shopping for clothes is an essential aspect of many people's lives. It is a way for individuals to express their style, feel confident, and keep up with the latest fashion trends.

Problem

People who shop for clothes using social media often feel frustrated when they are unable to easily find where the influencer got their clothes from.

Solution 

Creating a shopping app with a visual search tool that allows users to upload a photo worn by someone else, and present users with similar styles from retailers they prefer shopping from, as well as new retailers they haven’t shopped from before.

Understanding the Users

I interviewed people who regularly shop for clothes online. The use of affinity mapping helped me understand their goals, frustrations, and how they typically search for clothes.

StyleRx_Affinity Map Section.png

Key Takeaways

Common Frustrations

A problem for many users when they’re exploring new clothing styles introduced to them by social media influencers, is that they have a difficult time finding out where the influencer got their clothes from.

Steps to Find Inspired Clothing

First, users listen to the whole video or read through the video description for clothes mentioned

Then, they check for affiliate link or the comments section

Worst case scenario, Google and hope for the best

User Persona_Image.png

How Might We...

Make it easier for users to find the same or similar clothing styles worn by others?

Solution

One possible answer is to create a shopping app with a visual search tool that allow users to upload a photo of an influencer wearing the desired clothing item(s). Afterwards, the visual search tool will present users with similar styles from retailers they prefer shopping from, and new retailers they haven’t shopped from before.

Market Research

Researching a direct competitor and companies that have an analogous process helped me understand how the visual search tool can be used. It also provided me with the opportunity to incorporate capabilities they have not included in their apps within the solution.

Feature Roadmap

Designing the bottom navigation and related screens for the visual search tool, which will be known as Outfit Finder, was considered a priority because it served as a solution to the users frustrations.

Feature Roadmap (2).png
Style Profile Set Up

If users choose to skip filling out their Style Profile in the onboarding process, they have the ability to enter that information at a later time by tapping the Account icon. Users will be informed about the benefits of entering their measurements and brand preferences, and then have the option of uploading a photo of themselves so they can see how clothes look on them before completing their profile. 

Style Profile.png
Style Profile.png
Find Similar Styles

When users select the Outfit Finder Icon, they’ll be directed to a page that briefly explains the purpose of this feature. After uploading a screenshot of an outfit or clothing style, users will select the indicator labeled with the category they want to browse. When they select an item, they’ll be brought to the product listing page where they can add that item to their shopping bag.

Outfit Finder.png
Outfit Finder.png
Checkout

Once users are ready to purchase their item(s), they need to select the shopping bag icon, then the checkout button. From there, they can choose a shipping option from different retailers, review their order, and then place their order.

Checkout.png
Checkout.png

Branding

Determining the brand helped guide the aesthetics of what Style.Rx can look like. 

Component Library

Utilizing a component library ensures a consistent visual experience throughout the entire application. I used icons with a slightly rounded aesthetic to convey a soft & gentle appearance, in contrast with sharp and distinctive buttons.

Usability Testing
Ease of Completing Task

The word “Next” paired with the arrow icon when choosing the screenshot clarified directions when going through the task of finding similar styles.

Checkout & Payment 

100 percent.png

Find Similar Style Using

Outfit Finder

95 percent.png

Fill out Style Profile

100 percent.png
Iterations from Feedback

Participants were recruited to help identify potential problems, and validate assumptions about users behavior and preferences when interacting with the product. 

When setting up the Style Profile, having the ability input measurements in addition to sizes may allow Style.Rx to offer accurate size recommendations, especially since sizing differs across clothing brands.

Final Screens

Home.png
My Brands.png
Virtual Fitting Room.png
Outfit Finder.png
Uploaded Photo.png

Prototype

Complete Style Profile

Find Similar Styles Using Outfit Finder

Checkout & Purchase

Feasibility

Because users are submitting sensitive information to various payment gateways, secure payment integration is essential for the checkout process.

There would also need to be application programming interface (API) Integrations between Style.Rx and partnering retailers to present accurate product availability, and for Style.Rx to relay purchase information to partnering retailers.

It’s important to highlight that forming partnerships and collaborations with each retailer is vital to creating a single platform where users can shop from their preferred clothing brands and discover new brands.

Secure Payment

API Integration

Retailer Partnerships

There are a myriad of considerations when building a shopping application like Style.Rx, such as creating a robust revenue model, abiding by retail compliance laws, and implementing user data analytics. The information below briefly explains the importance of incorporating the following variables. This list is non-exhaustive:

Learning Opportunities & Next Steps

During the low-fidelity stage, I learned that the name of the feature “Outfit Finder” and its function resonated with 80% of users I recruited. This was the highest value when comparing it to other names like “Style Scope” or “Find Look,” which allowed me to confidently move forward with the name when designing the prototype.

Although it is beneficial for users to see a one time tooltip after clicking on the Outfit Finder icon for the first time, it might be worth explaining the feature when designing the onboarding process. Doing so informs users about what the Outfit Finder icon means after they create an account.

Testing Early

Onboarding Screens

more works

bottom of page