WeWear helps alleviate your morning routine by suggesting outfit combinations, pieces to purchase, and a look at what your friends are wearing,
Overview
At one point or another, everyone has found themselves tearing through their closet trying to put together the perfect outfit. WeWear does the searching, matching, and coordination for you, at the push of a button.
I was the sole UX designer for the scope of the project. I conducted user research and analyses, identified my target market, and created the brand identity with wireframes and prototypes.
The target audience included but was not limited to students, early commuters, office employees, event-goers, busy people, and the uncreative.
Sometimes outfits may not look as you envisioned. Pre-uploaded pictures of your clothing will show you what your outfit will look like before you even try it on.
You may not know how formally to dress for a specific event. Filters and selections refine your outfit choices to fall under the guidelines of your specifications.
Not everyone enjoys shopping in person because you can’t bring your wardrobe to the mall. The online store suggests pieces to purchase based on what you already.
Discovery
Competitive Analysis
User Personas
Clothing Screener
H&M was mentioned three times, as the most preferred brand among users.
Four users described their style as ‘comfortable’.
Only 30% of users enjoyed surprises, which defeats the purpose of a randomly generated outfit.
40% of users take a while to make decisions, so pre-saved outfits would create limited options to choose from making decisions easier.
50% of users frequent social media daily, meaning the Outfit of the Day option may be used frequently, thus retaining users.
Define
User Flow
Site Map
Lo-Fidelity Wireframe
Usability Test
As a commuter, I want to pick out my outfit ahead of time so I can save time getting ready in the morning.
As a co-founder of a startup, I want to learn more about dressing appropriately for different types of scenarios at work.
As a student, I want to be able to see what my friends are doing, so I won’t feel like I am alone or left out.
As an engineer, I want to be able to dress smart casual, but have pieces on hand ex: a blazer, that would upgrade my outfit to business casual if needed for meetings or presentations.
As an event-goer, I want to feel like I'm wearing the latest trends while staying on a budget, so that I can continue to afford my other monthly expenses.
User Stories
Conducting usability testing allowed me to gauge the user’s true experience with WeWear. The unfiltered opinions help me form iterations on issues I may not have seen. The design is cohesive to me because I created the screens. Usability testing highlighted users’ frustrations, body language, and even advice for future screens.
Add hashtags to classify clothing in different categories of formality
Adding a gradient between text and product image to improve readability/accessibility
Darkening selected section once pressed
The user flows provided the most likable features of Instagram, Stichfix, and H&M by peeling back the different steps of each action. These features combined form the overall app experience, while avoiding the pain points seen in other applications, such as the lack of chronologically ordered posts on Instagram.
Develop
Mood Board
Color Palette
While creating a color palette for WeWear, I decided a neutral color stance would be appropriate for an app that deals with all the different colors and textures found in a wardrobe. After surveying users for an opinion, the first color palette was favored.
The calm colors represent organization and order, perfect for a stressful situation like running late or deciding between two pieces of clothing.
Typography
While deciding on typography, I chose the sans serif font, Livvic. The clean font is a lot more accessible in readability than the Kyiv sans font.
Livvic signals to the user that there are aspects of fun, like the stories feature, that can also be experienced.
The font itself represents a professional aspect while remaining fun, just like the type of outfits you may create in WeWear
Logo
The WeWear logo is an upside-down shirt that represents the letter W. The t-shirt is a clever take, foreshadowing the main aspect of the app without saying a word.
Deliver
Hi-Fidelity Wireframe
Takeaways/ Future Iterations
If I had more time, I would have added
A section to ‘hang up’ your clothing. The user would add hashtags to their uploaded pieces to classify the type of event each would be worn to.
I would also add an option to save outfits for later if the user just wanted to play around in the app but did not need the outfit immediately.
Lastly, I would include a section where users would be able to subscribe to monthly outfits sent straight to their homes!
Overall, I had an easier time using Figma, Adobe Color, and Google Spreadsheets than my previous projects. I also learned that taking a break from your screens will reveal iteration flaws you may not have originally picked up on while designing.
While conducting designs In the future, I will use what I have learned to improve my overall designs, make sure I take necessary breaks when designing, and constantly include accessibility rules in my work to ensure I do not cause unnecessary issues for the user’s experience.