.jpg)
Tools
Adobe Illustrator, Adobe Photoshop, Google Forms, Figma
Overview
Iris is designed for fashion lovers! The goal of Iris is to create a fashion community for inspiration, sharing outfits, and linking outfits! With other perks such as the ability to hire stylist and have your explore feed focus on users with similar body types.
Problem
Many people struggle dressing for their body type or with choosing a outfit! Browsing through social platforms can be distracting with other content constantly being created ! There is also not a fashion centered app like this available in the US.
Role
Solo UX Designer & UI Designer, researcher, and Graphic Designer.
Scope
3 weeks
Design Process
Competetive analysis
The data
The demographic
The Personas
Wireframing
First round of wireframing I created a login & onboarding to choose the body shape you most identify with. Along with your user profile, stylist profile, messaging, and a gallery/explore page of different styles. Then of course a basic navigation bar.
As I got the general layout mapped out I wanted to play around with different colorways & layouts for the app/profiles with the selected color palette. The color palette is neutral with warm tones and subtle amounts of color. The goal is to have the app feel gender neutral Designing the several colorways allowed me to do A/B testing to help decide the most liked color options which you can view the colors in the prototype!
What was done next?
Next I first updated the onboarding, originally it was basic text and a drop down menu. I discovered the text wasn’t adding enough interest and was deemed as boring. So I went for a more interactive and fun onboarding process. The illustrations helped visualize body shapes better and was much more interesting to use. To my surprise many people were not familiar with the variety of body shapes out in the world! The lack of knowledge on body shapes led me to provide a tips & tricks page to help guide the users better!
.png)
Refining profile screens
Here, you have the original stylist profile and the new stylist profile ( Left ) and your user profiles first and original ( Right) . The changes to the stylist profile consisted of change the menu options on the profile so users interested in using the stylist services they can see how they have collaborated, their favorites, and testimonials. These changes allowed users to establish trust with stylist and validate the stylists capabilites. Lastly, I added a message tab on the stylists page so users can reach out to them easier. The users profile I also changed the menu catergories to give users easier access to their feed with other users on it! Earlier on in the process the navigation bar did not have labels, the labels made it easier for the users to identifty what they needed or wanted to do.
Shopping, inspiration, or for later
Another great feature about Iris is the ability to tag your clothing items and other users can save the link/photo or shop from the link. Originally I was thinking the tags would automatically pop up. I noticed after some testing and feedback that the method was not the best visually and would cover parts of the photo. Next, I tried to have the tagged items appear below the caption however, the tagged items often got skipped over during the prototype testing. Which landed on the last screen to the right where you can click the tag icon and a clickable link will appear. You can now like, save, message, and view the tags much easier especially with the the icon changes.
Usability testing
While testing the prototype the users were tasked with several tasks :
-
Signup as a NEW user and find your body type frorm the the two iterations, hint choose the Pear!
-
View the different features like the 3 feeds : explore, body shape , and stylist.
-
Goto profile and find your messages and open up the conversation with Malena (stylist) . Then find Malenas profile.
-
upload a photo and tag your item and explore the feed.
User Feedback
During the testing phase for Iris it overall went well! I wanted the app to feel similar to some of the major apps that already exist so the app was relatable, a few testers clearly saw the connection. All users felt the app was pretty simple to use and straight forward layout. There was some confusion in areas were icons weren't labeled or there wasnt any exit options or back buttons ( which was incorporated later). Overall, the 5 participants who tested Iris were really excited and said things like " I wish there was something like this", "When can you make this real?" and " I never know how to dress my body type I'd love this app". This was exciting because I wasnt expecting such positive feedback, but the body shape tips, styling services, and the ability to tag outfits for purchase got all of them wanting more!
Thinking about accessibility
To ensure the color palette was accessible I did the web aim contrast checker for the tan and navy. Then the Navy and dark grey, and the navy and mustard yellow.
Brand Identity
Prototype
Learnings
By far this was my favorite project to work on because it incorporates my passion for fashion and I learned a lot of new techniques in Figma! I loved learning how to make carousels, exploring different scroll techniques and creating small details like a useable like button. I got to try out a lot of new things and makes me feel good about creating new projects as my skills progress each time. Back, to the app I also loved the research findings I always knew dressing for your body type was difficult and I know some people paid attention to it. From my findings I discovered there seemed to be a huge desire to learn how to dress for your body type even a lot of excitement knowing there would be help for that. If I could bring this to life it would be a huge influence on fashion to hopefully promote buying for your body type versus a trend which simply doesnt work for everyone.