The weather is not only unpredictable, but even if it were, it would be really hard to remember what to wear for 3°C when you have been living in the 20°Cs and 30°Cs in the past few months.
Summary of the Project
This is my capstone design project that I worked on independently through ideation, research, designs and prototypes. I receive weekly feedback from regular my mentor as well as peer feedback on an ad-hoc basis. This project took a span of 2 months, a total of 70 hrs.View Final Design
In Toronto, the city where I live, the spring and fall “seasons” are always interesting. You would often spot a person wearing a heavy winter coat and a person wearing shorts and t-shirt standing right beside each other. No one knows what to wear! The weather is not only unpredictable (sometimes we can experience 4 seasons in a day), but even if it were, it’s really hard to suddenly recall what is appropriate to wear for 3°C when you have been living in the 20°Cs and 30°Cs in the past few months or vice versa.
The number on our weather app doesn’t translate into exactly what we should wear, and not having the right outfit/layers can be very frustrating and uncomfortable. That’s why we need something that can bridge the gap between the weather forecast and our own wardrobe, taking into consideration of the activity we do on that day. Because let’s face it, not all of us have the perfect sense of fashion, but we still want to be dressed appropriately so that we feel confident and prepared for what may come our way.
Instead of writing a design brief, I started the project by writing a story of how I would use the app, from there I extracted the potential functionalities I want to support in my design and created a survey to find out what people valued, what are their pain points, which helped me to narrow down the user stories and identify my MVP. The survey helped me to understand the different types of users, which I created personas for. I also created a user flow diagram, which made the later designs much easier and organized.
Writing the Story
I started the project by writing a story of how a person would use the app. Kind of like a storyboard but without drawing, it’s a way for me to flesh out the details of how it fits into the user’s daily life. Not all functions in the story were selected to be designed. Here is a snippet of the story.
"Every day after you come home, the app recommend you the outfit for the next day. You can customize your activities and fine-tune the outfit recommendation. E.g. on a Wednesday night, the app assumes that you are going to work the next day, but you decided to take the day off and go to the museum instead. You can change your activity to taking public transit and going to the museum, the app suggests a thick parka (for standing in the cold waiting for streetcar), a mid layer (to keep you warm in doors) and a pair of comfortable shoes (walking around the museum). At the end of the day you can rate this outfit suggestion and tell the app whether it was a bit too warm, a bit too cold or just right. The app will take this information and recommend more or less layers to you next time for similar activities."
After looking inward, it's time to look outward so that I don't live in the world of assumptions . I conducted a survey to on a sample size of 16 to learn about people’s preferences in various aspects that may be relevant to the design of Styaile. Some of the key findings are:
- 40% of the respondents indicated that sometimes they feel too cold at work, while being too warm was never a concern;
- Majority of the respondents prefer to dress more casually
- Majority of the respondents get dressed by having a few outfits on rotation
- The most shocking of all: almost all respondents indicated that they sometimes feel like they have nothing to wear, or they want to dress better but feel like something is missing but they don’t know what it is.
- By analyzing the response based on gender differences, men want to dress better just like women, but they just don’t want to put in as much effort
See all Survey Findings
This survey allowed me to narrow down the major pain points and validate my initial assumption. The pain for not knowing how to dress for unpredictable weather is real, people find it hard to dress for the outside and inside temperature differences, and everyone wants to dress better but find it hard to identify items that will fit their current wardrobe.
I identified 4 competitor sites/apps that either provide similar service or is popular among the target users. The app ClosetSpace and SmartCloset already has similar functionalities as Styaile such as letting the user create outfits based on what they own in their wardrobe. However ClosetSpace does not create outfit intelligently, while both of them do not have a good way to add clothing item. Overall, I identified the following opportunities in the current market.
- Provide relevant, real-time, bite-size outfit recommendation to save time for the user, and keep decision making to the minimum
- The outfit recommendation should be provided in an clear, usable, and aesthetically pleasing manner, since people tend to favor aspiration the aspirational version of themselves. This is why Pinterest is so popular, you can search for ways to style say “white t-shirt” and get results from professional fashion bloggers and celebrities to see what it could look like, instead of how it looks in real life.
- Adding and finding a clothing item should be easy and quick. Clothing items should reflect a better version
I came up with the following user stories to cover all the things that a potential user would want and what the app could add value to one’s life, separating the first time user from returning user. It is important to consider first time user as its separate category as they require extra care, there are so many apps in the market, if they don’t have a good experience or does not trust the user.
I then narrowed down the MVP to just stories that revolve around an onboarding process that help the user to set up quickly so they can see the benefit of the app as soon as possible, and the primary use cases and their supporting cases such adding a piece of clothing, receiving outfit recommendation everyday. In the following table you can see the initial set of user stories and which ones were chosen for MVP.
User Flow Diagram
I constructed the user flow diagram from the MVP stories to see how the stories work together. User flows are great because it allows me to consider the overall workflow without being distracted by the form. It makes later stages much easier and organized.
Here are a few interesting challenges I ran into during the design phase, and my solution for each of them.
I designed a two part onboarding process, the first part asking about the user’s lifestyle and habits. Instead of leaving the user there in a UI full of empty states, I decided to prompt the users with a series of simple selections, finding out what they already own in their current wardrobe (mostly basic pieces) so that the application can get the user started and let them see the benefit without the need to learn of the UI.
Adding an Item
One of the opportunities identified early on was that adding a clothing item should be quick and easy. In several other apps that I studied during research either allow the user to take pictures and upload image, let the user to search through brands, category of clothing (i.e. tops, bottoms …) There are some critical drawbacks to these solutions.
Taking picture of your own clothes is quick(ish), accurate, but the downside is that the average user is likely to have amateur photography skills, the photos that they take would be aesthetically unpleasing which can lead to a rather uninspiring experience when receiving recommendations through the app.
While searching through brands allow the user to find the exact item that they have (assuming the item is new enough that the brand still carries it), but digging through numerous levels can be exhausting with no guarantee of finding the item you are looking for. Also a lot of basic items are similar enough in image that the exact match in detail may not provide much added value.
In order to find an effective solution, I first brainstormed a few sample scenarios of when a user would want to add a new piece to the system.
- User just installed the app and wants to add his/her most worn items to the app to see the outfits created
- User recently bought new clothes and want to use it as resource to create new outfits
- User has not purchased the new item but wants to see the potential new outfits
For the first two scenarios, the user always know the exact item to be added because he/she already owns it. In the third scenario, the user has an idea but may be open to other options.
In the case where the user has a clear idea, they can describe the item with precise details in color and/or pattern, such as “white t-shirt”, or “denim shirt” etc. If the user is not so fashion literate, instead of saying “floral camisole”, she may say “floral top”.
So the fastest and most accurate way of narrowing down the item in search is to describe the piece in a formula like the above. The following wireframes are based on adding an item via natural language description of the item.
Add Button Placement
I couldn’t decide on the location of the add button, whether to do a floating button following Google Material Design or put it in the center of the bottom nav like Instagram.
Before the user testing I knew that I preferred it in the bottom nav but wanted to see if others have any strong opinions. I put it to a preference test on a sample size of 16, the result is while the first solution won by a close 2 votes and the result is not statistically significant. I looked at the feedback on both variations and found that the placement of the add button is very personal and subjective.
Based on this inconclusive result I decided to stick with putting it in the center of the bottom nav. One reason is that having a floating add button on outfit page can be mistaken as “add an outfit” and also it may block certain assets and impact the viewing experience. By putting it in the bottom nav, it is no longer feels contextual, but rather becomes a fixed action that the user can access at all times.
Real-time Background Image
The main intent of the app was to bridge the gap between the typical weather app with what we have in our wardrobe. Inspired by Yahoo weather, I included a relevant, real-time image that reflect the weather outside in the user’s current location, which will give the user a reference to the kind of weather they are dressing for, and makes the the recommendations more trustworthy.
There are a few ways to show an outfit: flat-lay photography or a collage, outfit on a model, or the most rare - a realistic arrangement as if someone is wearing it
Flat-lays and collages can be visually pleasing but they don’t do a good job of helping the user visualize what it looks like when the clothes are worn, how the colors, textures work together, and how scale comes into play.
Outfit on the model helps to visualize how the outfit looks on, but people have different body shapes, skin color, hair type and length which can all change the overall look significantly. We wouldn’t want to create an outfit that looks stunning on the model but unimpressive on real users, the visual contrast would leave a very negative experience.
The last option allows the user can see all aspects of the outfit without the distraction of the model, the user's version of the outfit is the only version he/she sees. If the outfit doesn’t look good it's because the outfit doesn’t work for them and not their fault.
Here is a video of the prototype. The prototype is made with Flinto for Mac, which allows for on-device usability testing, but does not create sharable links. This video will show the onboarding process, adding a new clothing item, browsing outfits, and getting outfit recommendation. Enjoy!
During this project I did a lot of writing, from writing the story in the beginning to crystallize my vision, describing the mood of the app during branding, writing down the SWOT analysis, consolidating the survey results and writing whatever design challenges that arise during the wireframe and design stage, documenting design decisions and rationalizing preferences that at first seems to be intuition, but actually can be translated into something that meeting the original objectives of the design. I knew about the benefit of writing in design, but in this project I experienced those benefits.
The clothes and outfit images are from various sources on the internet. This is a personal, experimental and conceptual project, and it is not for profit.
Like what you read? There's more!
a responsive e-commerce site
a responsive landing page for a mobile app