The goal of this project was to develop a Figma prototype for an app with an unconventional high end screen type. The concept is a digital closet app for a smart mirror targeted towards upper class fashion forward late teens, which can be used to plan or reuse outfits ideas, as well as categorizing items in a user’s wardrobe.
The prototype can be found here!
research
I learned that users want to be able to optimize their time getting ready, and a key factor slowing them down is deciding what to wear the morning of. By framing the decision making processes as something fun to do, users can plan outfits during their free time then when getting ready deciding an outfit is already done, thus optimizing time in a more efficient manner.
Mood board
I was inspired by outfit layouts on Pinterest, outfit of the day mirror pictures, as well as the outfit creator Cher has in Clueless. As the demographic is late teens, it was imperative that the app had a youthful exciting feel.
Other digital closet apps
After researching various digital closet apps, it was discovered that the fun of categorizing items and outfits was the main draw. Furthermore, the designs favored semi-minimalist layouts with bold bright colors accenting a clean simple background.
Site architecture & Site map
Developing a site architecture and site map allowed a solid outline of basic needs of the user ahead of time, as well as defining a natural flow for the user to take. It became clear that the focus is creating a simple flow to add an item and create outfits as those are the building blocks that the whole app is based around.
other smart mirrors
After researching various smart mirrors and testing some full body mirrors, it was determined that as the mirror gets lower the less intractable elements there would be as users would get frustrated reaching to tap things low to the ground. Thus, intractable elements would primarily lie at eye level, being at an optimal height for users to reach.
Moreover, since the user is meant to look at themselves it became clear that the center of the screen had to have a significant amount of clear space, with elements being placed in the center only in specific circumstances.
Development
Sketches
Wireframes
Delivery
Home page/Item add
The home screen has the a widget of the calendar section in order to have their planned outfits for the week visible right as the app launches and have a subtle reminder. Additionally the date and weather is visible for user's to plan their outfits around the temperature of the day.
Users have the ability to select photos from their camera roll and have the app scan them for possible items to be catalogued.
When reaching the item creator, the User can catalogue as many or as little tags about the item, in order to make searching for specific pieces quick, while also leaving the item creation process as much to the User's pace as possible. The User can also create their own custom tags as well. The cataloging system also carries throughout the app.
The home screen has a lot of negative space in order for the user to have room to see themselves in the mirror, which is illustrated in the prototype be a faint reflection in the background.
The Add Button is located at the top of the navigation menu to increase hierarchy. Furthermore, the mini screens/menus have a bar at the top corresponding to what branch of the site map the User is on which is also the same as the color in the navigation menu.
Alternative Item add
Alternatively, the User can take a picture of whatever item's they are wearing or possibly even holding up in order to scan items, using the smart mirror's camera. Furthermore, the User can set the amount of time before the mirror takes in order to give themselves more time.
Calendar
The calendar section allows users to plan outfits ahead of time, and go back and look at previous outfits in order to rewear them at a later date. Users are also able to filter through outfits with the catalogue system on the right to find things quickly.
The pieces used in the outfit are listed on the left side, with the tags listed on the right. Additionally, the outfit saved for the current date is highlighted with a green bar on the top of its preview image.
Closet
The closet section allows users to view and edit your saved items and outfits. Users can go into specific items to add tags after already creating an item, or select multiple items to create an outfit in the outfit creator.
Help
The throughout the experience, if the user gets confused on the various functions of the app they can press the help button on the navigation menu and an overlay will appear informing them all of the intractable elements and their purposes.
For the more important intractable elements they will appear in white text with a shadow highlighting the area of the screen being used, in order to give emphasis and natural feeling information.
Mockups
