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.
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
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.
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.
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.
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.
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
Find Similar Style Using
Outfit Finder
Fill out Style Profile
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
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