Duration | 4 weeks
Role | UX/UI Designer
Tools | Figma, FigJam, Whimsical
worldwide fashion inspiration
Styled is a mobile application designed to bring together different trends and styles from around the globe, to one screen. Whether it’s moving somewhere new or just going on a vacation, fashion trends tend to be different depending on the location. Many factors vary, such as weather, clothing trends, and hairstyles.
Something hiding in the back of someone’s closet could be a prized possession somewhere else. The idea of this application is to bring together people of all ages and cultures and allow them to express their style and see what’s trending, even on the other side of the world.
RESEARCH
GOAL
The main research goal for this project was to observe users’ struggles and pain points when it comes to fashion and trends in general. I wanted to observe and see what users struggle with the most when it comes to trends and why. I was able to interview people of different backgrounds and cultures, which allowed me to get a wide array of insights.
Competitive analysis
I conducted competitive analyses in order to gain a comprehensive understanding of the current fashion/social media app industry. I noticed that the most successful fashion apps prioritized personalized recommendations and community engagement, providing a seamless user experience. I was able to conclude that some of the apps had a complex navigation, making it difficult for users to quickly browse. Overall, this part of my research was crucial in understanding this industry and how it works.
user interviews
I conducted user interviews with 5 participants; 3 of them from South Korea, and 2 of them from the United States. My main goal for this was to empathize with the user and understand their struggles when it came to looking for fashion inspiration. Because I interviewed participants from two completely different cultures, I was able to gain insight on what their main pain points were. When planning to move or travel, all participants had one thing in common: they didn’t know what to wear. With the difference in standards and trends anywhere, most participants seemed to struggle in knowing what to wear abroad, or even the next city over.
“I think social media in general is challenging because it’s hard to know what I want to invest in and what is going to go out of style soon.”
“I think it’s very easy to forget the expectations and standards of certain countries.”
“It would be easier to plan outfits if I could get a sense of the weather and what the people in that area are also wearing.”
SYNTHESIS
AFFINITY MAPPING
I was able to gather what patterns I noticed and categorized everything into one place, which allowed me to gather my thoughts on the research I conducted.
Users tend to have a difficult time preparing for a trip or a move, they never know what’s trending in certain areas.
Most users enjoy keeping up with the latest trends and taking inspiration from different sources
user personas
I created 2 personas, Sarah and Alec. This process was very insightful, as the personas helped encapsulate how the average user of this app would think. Sarah and Alec portrayed the pain points and struggles of the participants who were interviewed, allowing me to fully empathize with the user.
problem statements
Problem
Users have a difficult time getting inspired based off location and weather.
POVs
I’d like to explore ways for users who are interested in fashion to gather in one place.
I’d like to explore options for users to be able to connect with each other and show what trends they are currently interested in.
I’d like to find ways for users to find inspiration easily.
HMWs
How might we increase users’ interest and create a space for fashion-lovers around the globe?
How might we help the user to educate/inspire others about their culture and country?
How might we help the user to get inspired and catch up on what’s trending?
ideation
sitemap
After synthesizing my research, I had a solid idea of how I wanted my app to look. I created a sitemap to visualize what categories I would focus on, and what kind of content would go into them.
User flows
Once I could get the general picture of what things were going to look like, I created a user flow to go more in depth with the app details. I created a flow for a search/add to folder process, as I felt that this was the most crucial aspect of the app. I made sure to think about yes/no options, as well as alternative routes. This was definitely helpful in kickstarting my design process.
testing & iterations
low-Fidelity wireframes
I created sketches of what I thought to be my key screens, making sure to create a few different versions of each one. This allowed me to get a rough idea of what I wanted my designs to look like, and which direction I wanted to take.
Mid-Fidelity wireframes
After creating a few sketches and mapping out what my key screens were, I began to wireframe at a higher level, while still keeping things simple enough to change later, if needed. While creating these wireframes, I mainly focused on the user’s needs and pain points. Along with creating these wireframes, I was able to test them out with a few participants in order to gather insights on what I had so far.
All users were able to digest the screens and understand what the purpose of each one was.
Some of the users did get confused if there was a lack of screens in a certain flow, as not all of them had been designed.
branding
moodboard
After finalizing a few design choices, it was time to start thinking about what I wanted my app to look like, visually. I spent a lot of time pondering what design styles I wanted for Styled. By creating this moodboard, I was able to specify what visual direction I wanted to go in, and what choices I wanted to make.
LOGO
With the Styled logo, I played around with a few options to see what I liked the most. My main goal was to keep it simple enough so the user could focus mainly on the content of the app. I ended up going with the first logo, I felt that it fit the overall look that I was trying to achieve, without distracting the user.
UI Kit
With the UI kit I created, I decided to go for a darker theme with brighter colors as the highlight. I felt like this would be a newer and fresher look compared to the apps I previously did my competitor analyses on. My main goal was for the colors to stand out enough without hindering the user experience.
the design
high fidelity prototype
I decided to go for a dark theme with Styled which added a modern taste to the app. While creating my final design, I was able to think in the user’s perspective to make for the best user experience I could create. While creating these wireframes, I made sure to consistently look at the research I did prior, which allowed me to design FOR the user.
onboarding
For the Onboarding flow, I thought about the previous competitive analyses I conducted and came to the conclusion that it was best to keep things simple and straightforward. To create a seamless user experience, I made the primary buttons bright in order to stand out with the dark background.
Search/community
With Styled having a heavy emphasis on the community aspect, I made sure to hone in on the Search feature in order for users to be able to discover new trends and styles easily. I was able to look at the previous research I conducted and came to the conclusion that adding a “recommended” feature would make for the best user experience. I wanted the user to effortlessly move from their search results to viewing different profiles, encouraging them to discover new people from all over the world.
new post/profile
For adding a new post, I decided to make it familiar for the user. I wanted to make the user experience as simple as possible for the user to be able to focus on the community aspect in general. The overall simplicity of uploading a post allows the user to post whatever they want, whenever they want.
discover
With the discover feature, I wanted to emphasize the worldwide aspect of this app. This would be a way for users to share trends and inspire each other from all over the globe.
Folders
Social media apps that focus on photo-sharing tend to get unorganized and messy; I created a folder feature in order for users to have all their saved inspiration in one place. This allows the user to have a better experience overall by having them freely customize and organize their folders to their taste.
test
User testing
After creating my final prototype, it was finally time to test them with five users who would be likely to use an app like Styled. The participants were instructed to complete three tasks: Sign up, Search, and Discover. I had them casually browse the prototype, as if they were just using the app in real life. This method allowed me gather insights on the prototype and what iterations I could potentially make.
Results
All three tasks had a 100% completion rate.
There were only a few misclicks, only for buttons that the user wasn’t meant to use.
Users wanted to see the “Folder” flow all the way through, with the add and edit options available.
“I like how straightforward everything is, I felt like I was able to finish each task because everything was laid out for me.”
“I like the colors of the app, i think they stand out and led me to the right direction.”
“i like that you can put anything into a personal folder, it makes it easier to customize the app to fit your needs.”
reflection
next steps
As the design process is never over, I will continue iterating and improving my designs. I expect to conduct more user tests in order to take these next steps, and to continue receiving user input throughout the process. I think it’s very important to keep iterating with designs without having an “it’s finished” mindset.
What i learned
This design project taught me the importance of the user and how it affects the design process in general. As Styled is a community app that focuses mainly on the user getting style inspiration, I definitely learned how to value the user while designing and why I needed to do so. Especially with prototyping, I was able to put the user first and ask myself how I can deliver the most realistic, but user-friendly experience.
Overall, this project provided growth for me as a designer, and I hope to continue iterating and testing to improve not only the designs, but my skillsets as well.