StyleSpark

Assisting both fashion lovers and beginners through providing fast, personalized fashion recommendations in order to spark exploration, foster self-expression, and promote empowerment.

Overview

Context: Designed and ideated in my first ever Designathon, hosted by Rice University. The goal of the project was to create an app or website that addresses any problems that students may have. StyleSpark aims help students in empowering themselves and fostering communities of self-expression across campuses, despite lack of time, finance, and confusion in identity. Won 1st in the AI category and was one of the top 8 finalists out of 60 submission.

Duration:
Jan 2024 (48 Hours)

Team:
Michel Guo, Leeann Feng, Cindy Li

Role:
UI/UX Designer
UX Researcher

Tools:
‍Figma

SUMMARY

Effortlessly create outfits that match your style

This project is divided into two parts: one for fashion enthusiasts who want to speed up their styling process and the other for individuals/beginners looking to start their fashion journey. This case study specifically focuses on students. As a team, we designed this project in hopes of fostering a fashion community, helping individuals feel empowered, and allowing students to express themselves despite the time constraints.

THE PROBLEM

Addressing challenges that undergrads may face...

The theme of the Rice Designathon was to “design a digital application that addresses a challenge that undergraduate students may face.” This theme is extremely relatable as all of us designers were undergrad students. We began to ideate. Common struggles include management problems, social anxiety, mental health issues, housing/dining, inability to connect with their community. However, many apps have already been developed to try and tackle these issues.

There must be something else... how about issues w/ confidence and self expression?

Thus, our approach shifted towards empowering college students’ self-expression and confidence. Though many categories could have been chosen, such as music, art, and more, we ultimately decided to go with fashion as a form of self expression and confidence. While outfit planning apps exist, we saw an opportunity to enhance efficiency by developing a platform that incorporates AI to help offer customized, efficient, and rapid outfit creation in order to maximize a student’s time. We wanted to explore innovative ways to foster self-expression and confidence within the context of college life.

RESEARCH

Is this an actual problem?

Beyond our team members having this problem, do other students feel the same? In order to understand our users better, we decided to first focus on the specifics demographic of female, non-binary, and female identifying students. To ensure we aren’t missing out on the male population, we decided to conduct a survey and interview a few individuals on Rice Campus.

We wanted to know...

1. Why college students care or don’t care about fashion
2. What students’ concerns are when exploring fashion
3. What fashion means to students and how important it is for them
4. How much time students spend on creating outfits

We found that...

Students consider fashion a form of self-expression, empowerment, and personal uniqueness. They viewed fashion as a way to express their identity. Out of the individuals we interviewed the quotes that stood out were...

The survey (n=74) echoed these sentiments when asked what fashion means to them. Other information that the survey showed were...

Our interviews and surveys reveal that there are people who care about fashion and this is indeed a problem that can be addressed among college students. Moreover, the survey suggests that students draw their fashion inspiration from social media, peers, and public figures. With Pinterest, Instagram, and TikTok being the most preferred social media platforms.

PRODUCT GOAL & ANALYSIS

Get personalized outfit recommendations effortlessly

We wanted to create an app that could streamline the process of creating and planning outfits, while providing inspiration to those who are confused, don’t know how to start, or just want to try new styles. StyleSpark aims to become the app that cultivates self-expression and confidence in users through fashion while addressing problems such as time and budget.

Comparative Analysis: Who else does something similar?

There are a few companies that does something similar as us. However, none of them focus on streamlining the process of creating outfits on an almost daily basis.

USER TESTING & ITERATION

Tweaking the designs

Within our first iteration of the hi-fi, there were a lot of margin inconsistencies. The colors were also similar, resulting in some features being less visible. Moreover, some of our user testings revealed that certain features weren’t as intuitive as we thought it would be. This also resulted in changes to how each feature is presented.

Increase Visibility

To maximize the visibility of our features we changed the background color and some of the contrasts. This is to make sure that our product is accessible and intuitive. Moreover, through this change features that we wanted to highlight popped out more.

Highlighting Features

There are two features that weren’t as highlighted as we thought it was., the search bar and the AI stylist chat. The first former blended into the background and the bar for the latter made it look out of date and made the screen look weirdly divided. Thus we addressed this by changing up the styling and coloration.

AI Stylist Chat Feature

One of our product’s most unique selling point is the AI Stylist. Therefore, we wanted to ensure that the interaction is as seamless and intuitive. We changed multiple aspects to enhance not just the aesthetic looks of the feature but also to draw attention to the difference between the user’s chat and the AI Stylist’s response.

Extra Information to Aid Daily Outfits

FINAL ITERATION

Hi-Fi: Final Design Decisions

Some pages had more than one lo-fi due to different people playing with different types of designs. We chose the one that looked the best and most intuitive. After that we started on our hi-fi wireframes. Below are our final decisions. For a closer look check out the Figma file.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Onboarding

The onboarding experience is the first time the user will get to interact with our app, thus it is extremely important to make a good first impression.

We hope to make the onboarding experience as intuitive and easy to use as possible, despite the complicated steps we need to take to collect the right information in order to recommend the best outfits.
‍
If the user is to create an account they’ll be taken to a page to measure their body size and a closet scanning page. They can also decide to do either of these things on a later date if it is not convenient to do so at the moment. The body scanning UI is inspired by Apple’s Face ID in hopes of making the process feel more familiar to users. There is also a voice that will guide users.

Discover New Styles

The discover page is made for individuals to find new outfits that they like or discover their style. It is the page that users will first land on if they made a new account.

This is aimed at students and individuals who want to enter fashion but don’t know how, or students and individuals who want some new inspiration. Through the help of AI, shopping recommendations, and friend inspiration/suggestions, it can help individuals feel less fear when entering into the fashion sphere. This in turn can better help foster a community of self-expression and confidence.
‍
There are multiple other features within this page. You can look through new outfits for your wardrobe, find online shopping recommendations, chat with AI to find new outfits, or look at your friend’s for inspiration.

Wardrobe: Making Outfits from Items You Own

The wardrobe page is what individuals land on entering the app with an account.

Often times students don’t have money or want to save money, thus using items from their existing wardrobe would both save money and reduce environmental waste. Moreover, some people buy single items, but end up now knowing how to style it. Therefore this page is to help you create and plan outfits that fit your style and boosts your self confidence based on existing items.
‍
This page contains 5 main features. First an AI stylist button to directly talk to the stylist. Then there is information about today’s weather and associated holiday. Then there is the planned for today outfit, and upcoming outfits in case you want to swap into another outfit. Under that is a recommendation to dress based on weather, event, or more. This feature is there in case you suddenly wants to spice things up or change. Lastly. there is a saved outfits folder feature. This is a folder that users can use as inspiration.

Personal AI Stylist to Guide Your Fashion Journey

Your own personal AI stylist will help you pick out new outfits, put together outfits, and recommend outfits depending on what you want. It can also give information on current trends, personalized and professional styling tips, and more.

In the case that the user wants to visualize an outfit without trying it on, it can ask the AI to generate an image. This works because the app already analyzed the user’s body type, face shape, and sizes when onboarding. Thus, users can retain their creative freedom and have fun putting together outfits while speeding up the process.

There are also recommended prompts for users if they aren’t sure what they are looking for.

OUTCOME

We won first in our category and were a finalist!!

After 48 hours of hard work, we heard back. We won 1st within the AI incorporation category and were an overall finalist out of 44 teams. The judges were all industry professionals such as Senior Product Designer at Stanford, UI Engineer at Apple, Product Designer at JPMorgan Chase, Voyant, and Intuit, UX Design Specialist at Lucid, and more.

REFLECTION

Looking Back...

This is in fact the first time I’ve joined a Designathon. I had not known my teammates before this experience, and it was wonderful meeting new people and working with them!

Evaluating and Solving Problems

Through this experience, I really got to better understand the process it takes to ideate, research, and then create the solution. Understanding the scope of the problem is important and the time frame that we do have.

Developing a Solution

Originally we had a lot of ideas, but not all ideas could be finished within the 48 hour time frame as we were all mostly beginners. Thus we needed to carefully select the important main features that address the identified needs. Moreover, we needed to ensure that the design was user-friendly and easy to use.

Iterative Design Process

Iteration is extremely Important. Each round of user testing, feedback, and discussion provided insight on how the app can be better improved. This ensured that the final product was intuitive to use, modern, inclusive, and cohesive in design. The design process never ends, things can always be improved. I really learned that I shouldn’t be afraid to change how things look.

Collaboration

Each individual in the team had different skill sets. This meant that proper collaboration enhanced the process and quality of our final design. It was such a blessing to work with this team, and I found out just how much I enjoy working on these projects in a team as opposed to alone, as it was easy to get feedback from each other and learn from each other’s skill sets.