Fashionista — Your Personal Fashion Expert.
As more and more people seek fashion in their life, matching outfits with accessories and make-up in the most appropriate way is becoming a skill for fashion seekers, especially among young people. Even Amazon launched a new $200 Echo Look camera judging people’s outfits. Fashionista is a mobile application that delivers personal expert suggestions for matching fashion items. The system can customize the suggestions according to items the user has recorded through the camera and the outfits recognition. The more the user recorded in the system, the more scientific and diverse the suggestions will appear. It is important to mention that the user would be the decision maker in the end, not the system. The application is only giving options for the user to choose from. The matching outcome is drawn from searching among thousands of data from the clouds and compare with the user’s items.
At first, we thought about designing a tangible tool that the user can hold in their hands to scan the outfit and fashion items they have before getting the suggestion. Later we found through user research that most people would like to use their phone’s camera to record since it has no expense and is the most convenient to carry around. After several interviews, we decided to implement the following functions into this application:
- Camera recording and recognition
- Barcode scan and recognition
- Outfit recognition and judgment through selfie photos
- Suggestion making through the system and cloud data comparison
- Customization and recording each individual user’ preferences
We conducted both low-fidelity prototype and high-fidelity prototype and had several iterations through the process. This blog post will be focusing on the latest high-fidelity prototype made by “Marvel” (a prototyping tool).
- The log-in screen is simple with two colors. We used deep purple to produce a unique and light feeling of the theme. The user can log in with their email address and password. First time user can create a new account with Fashionista.
- The home page has three main parts: a narrative with an appealing picture, a menu button on the upper right corner, and a camera button near to the bottom. By clicking the camera button, the user can start recording any items he/she has.
- When the menu button is clicked, there will come a drop menu, which includes options such as home page, account page, notifications, and settings.
- When the user clicks the camera button on the home page, the recording process starts. The first screen after that is capture screen, where the user chooses to either taking pictures of the items and edit, or scanning the barcode if it is available. All the photos can be found in the photo folder at the left side of the bottom bar.
- If the user chooses to take a picture, the system will automatically recognize the information about the item. After the recognition, the user will be asked to fill out the information manually. The user can go back to the camera to retake a picture at any time through the camera button at the lower left corner.
- The third screen is for the user to confirm all the information about the item.
If the user chooses to scan the barcode to record. It will lead to these three screen shown above. The same process with the picture taking, except the capture screen will be bar code scanning.
The step after recording is these two pages. According to the item added by the user, a “New” label will show up at the top of the category so that the user can clearly see what has been added and click it to check out. The add button at the lower left corner is to add a new item, which will lead to the capture screen again.
- After confirming the newly added item in the categoty page, the system will lead the user to style identifying page, in which the user will choose the style the item belongs to. This step is designed manually because each person has different definition about their own style gallery.
- Finally, there will be a screen inform the user that the process has ended and a new item has been successfully added.
- The user can check any recorded items in their account and make changes or add new ones. The user can also log out from the account screen.
- After the user recorded more than three items in the system. The matching function will become available. On the home page, the user can click “Start Matching” or start adding a new item. These options are designed to deliver more user control and freedom so that the user can go to or exit from a screen conveniently.
- If the user click “Start Matching”, a tutorial reminder will jump up. The user can choose either to watch it or skip it.
If the user chooses to watch the tutorial, it will be shown as in the picture. The user can click to the next, or skip it at any time they want.
- After the tutorial, the matching process starts. The first step is taking a selfie with the outfit. They system will search from the cloud data and recognize the brand, style, color and all the available information of the user’s outfit.
- If anything is not recognized correctly by the system, the user can edit it by clicking the label on the second screen above.
After taking a selfie, the user will be asked to select the items he/she wants to match with today’s outfit. At least one item has to be selected in this step. If not, the system will give a reminder, which is an error prevent design. After selecting, the “check” of the selected item will illuminate to inform the user. Then the user can go to the next screen, or confirm to end the selection step.
- After selecting the items, the system will ask the user what style she/he wants today. Again, this step is designed manually because each user has different definitions about the styles.
- The final screen is the suggestion formed by the system. The user would be able to see the suggested items and the matching effect on the same screen. In the end, the user can make the decision accordingly.
After finishing the high-fidelity prototype, we invited two participants in our testing process. Basically, we identified them as our target users, since both of them own more than ten accessories in one category and, in most of time, only use/wear only a few of them for their combination.
During the tests, we asked participants to explore the functions of our application with only the introduction of the background and general design ideas. Them, we observed and recorded the paths and timelines they operated the prototype, trying to find out whether the functions and formats meet they subconscious understanding and using habit. We assume pages they stayed for a longer time maybe confusing and need to be improved.
Finally, we did short interviews toward the tests, asking them about the feeling and idea about our design and further improvements.
Generally, our prototype works smoothly in both of the user tests. Our users claimed that the function of the application is usable and necessary in their daily life. Also, one of the user underlined twice that she love the design which replace most of the word into icons and graphic so that the functions and work flows are more intuitive.
For the improvement, both of our participants showed confusing after finishing the record process, which could blame the order or our screens. Given it should show different screen for first time user, since they have no recorded accessories, we designed input function at the very beginning of the whole prototype, so it will show up for the first time user. However, the connection between the input process and matching function is not obvious enough, and was arranged on the position that doesn’t meet users’ operation habit (on the right top comer). So in the improvement, the button should be move to the center of the screen.
Also, there is a bug on the recognize screen. As shown on the screen, users can only edit the recognized item or retake the photo. However, there should be a button that allow users add new items that are not recognized by the camera.