Melissa Chukri Design Portfolio
Digital Fashion Assistant
This project was part of our HCDE (418) Interaction Design course. Part of the design challenge posed in this class was to come up with an idea that addresses some everyday issue that people may face. We spent the next 10 weeks iterating and prototyping our project, we performed user research, created personas, created user scenarios, sketches, storyboards, sitemaps, paper prototype, usability tests, wireframes, and high fidelity mockups. For our prototype click here.
Case Study​
Our project seeks to help users quickly choose unique, fashionable, and seasonal appropriate outfits while they are getting ready for their day or a special occasion. We want to allow users to explore new fashion combinations; expanding upon the wardrobe they already own. We hope to reduce the frustration of not being able to find something to wear in the morning by allowing users to input all their clothing and our tool will generate a possible outfit to wear. Our tool would take into consideration fashion trends, the weather for that day, as well as a user's preference for the day; do they want to dress business casual, fancy, or comfortable?
Meet the Team
Lisa Hu, myself, Jessica Wong and Ethan Zhe
User Research
For this project, we did agile user research of the current desires and needs of users who spend a significant amount of time getting ready.
This gives us a better understanding of what is a problem so that our product will know what to address when we’re coming up with ideas.
From the research, we can make assumptions about who our ideal users are and how we plan to design for them. We can then create scenarios and personas of what our “average user” might look like.
Personas
After we combined our research findings, we moved on to create two personas based on what we learned.
A persona represents a cluster of users who exhibit similar behavioral patterns. Behaviors, attitudes, and motivations are common to an archetype; regardless of age, gender, education, and other typical demographics.
After we did web research, we had a better understanding of our potential users and made a primary persona - Amy and a secondary persona Paul.
They have personalities, habits, goals, frustrations and scenarios forecasting how our product will help them save time and dress better. It acted as a point of reference for our future work. In the case where were met with tough design details, we can refer to our user goals to determine whether we should include or exclude certain design.
User Scenarios
Each scenario tellings a story of how the persona is using our product with various goals. Creating scenarios illustrates how we imagine personas interact with our product, it is also a way to brainstorm our product's features, use cases.
Amy's Scenario:
Our persona is Amy, a financial advisor intern at Amazon whose goals are to quickly choose a unique outfit in the morning while keeping up with the other fashionable women in her office.
Amy’s snoozed her alarm for the third time this morning. It isn’t until her housemate bursts through the door that Amy realizes just how late she is, the bus to get her to work on time will be here in 15 minutes. Amy has a big presentation today in front of her manager and another team; today wasn’t the day to oversleep. Amy flies out of bed and stares at her closet, a very full, yet well organized, closet stares back. The stand off continues as Amy’s mind races with ideas of what to wear. Flashes of her eagerly fashionable coworkers play in her head, making the decision even more disheartening; if only she had the fashion sense that those ladies had. With no time to try on multiple outfits, only to undoubtedly choose the first one she tried on, Amy reaches for the new tool her house made suggested last weekend; hoping this will end the fashion war going on in her mind. It’s an unusually sunny day for late winter in Seattle; the new tool took in Amy’s fashion requirements for the day and returns with a summery dress, kitten heels and an oversized sweater. Too casual, Amy increases the “formal” setting and tries again. The first response is something she’d wear to a wedding. “TEN MINUETS!!” her housemate screams to her. Amy dismisses that option and agreed that this third outfit is the winner, no more time for indecisiveness. Luckily it’s as if the tool read her mind, it’s the perfect balance of trendy business formal. Amy is thrilled, she’d never thought of putting that top with her red-wedged heels, it feels like a completely new outfit.
Amy throws on her outfit tosses her hair into a trendy ballerina bun, a touch of mascara and she’s out the door with mere seconds to spare as the bus pulls up. Her manager was pleased with her presentation and stating that she was glowing with confidence, just the kind of thing she’d expect to see from a senior employee. Additionally, she complimented her on her shoes, asking if they were new, to which Amy replied, “oh these old things; no, I’ve had them for years!” Amy silently reminds herself to thank her housemate; this fashion tool saved her this morning, it gave her the confidence to shine in the presentation, which quite possibly landed her her dream job after graduation!
Paul's Scenario:
Our persona is Paul, a grad student whose goals are to improve his daily outfit as well as how he looks for special occasions in hopes to find a girlfriend.
Paul walks through the door of his small studio apartment. A black t-shirt and baggy blue jeans coupled with a necessary raincoat are what accompanied him for his long day at work and an evening full of classes. His close friend is throwing a semi-formal birthday party this evening and he wants to look really nice. Finding something masculine and fashionable to wear has always been a source of anxiety for Paul. Over the holiday break, he discovered a new tool that he is using to enhance his style. With its guidance, he made several new clothing purchases and was gifted many new items over the holiday, but matching or coming up with fashionable outfits is still a daunting task. Paul isn’t confident about his previous semi-formal outfit choices, his own mother told him his outfit for their family Christmas gathering was an “odd choice, it looks like you’re trying too hard.” This negative feedback only adds to his anxiety when getting ready to attend events like the one this evening. Luckily this new tool is boosting his fashion confidence; his outfit from New Year's Eve had a few ladies turning their heads in his direction.
He easily added in the new additions to his wardrobe into this new fashion tool last weekend, so he is ready to get dressed for his event tonight. It’s a cold wintery evening, and he wants to look his best. The tool offers him an outfit choice; he isn’t so sure about that one so he dismisses it. The application provides a second look; this one he approves of. He finds the pieces that comprise this outfit and Paul is out the door in less than 20 minutes. Paul feels confident in his outfit choice and is glad that he won't be late to the event. When he gets there he’s introduced to a friends sister and they hit it off, the first thing she mentioned was how classy he looked in his new outfit.
Sketches
After we did user research, created personas and scenarios, we start to brainstorm about the interface design of our product based on use cases illustrated in scenarios. Sketches are easy and cheap to create, and are disposable, making it a perfect way to explore design ideas on the early phase of our design process. Our team had a brainstorm section, and created sketches of our interface
Storyboards
​
Based on our brainstorm ideas, we started to think about how users will be using our product under certain context. To help communicate ideas, each of us created three storyboards to show 3 different experiences our personas would have with our product.
Each storyboard has 6 frames, and tells a story or an experience that we imagine our personas would have. This can help us explore all the features and functions that our product could have.
Site Map
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
A sitemap is a tree like visualization that demonstrates the flow of a user's interactions through the application.We created it to organize our design ideas and to make decisions about behaviors and interaction points of our application.
We made decisions about paths a user could take through our interface. Sitemaps allow you to identify navigational menus and to pivot points where the user will be required to make a choice.This phase previous was creating a story of how or why a user would use with the device, the site map takes the how a step further and designs the flow and the paths the user will take through the tool you’ve created.
This phase previous was creating a story of how or why a user would use with the device, the site map takes the how a step further and designs the flow and the paths the user will take through the tool you’ve created.
Lo-Fidelity Prototypes
Paper prototypes are fast to make and fast to test and make changes. So we first designed and made paper prototype to show our interface design, and how our product can be interacted with. Our paper prototype was made based on the persona, scenarios and storyboard.
After we finished with our paper prototype, we started doing usability testing and evaluation with it to gain feedback from our potential users. It is important to test out design with real users early in the stage so that we can make quick changes before we progress the design in software.
Annotated Wireframes
Based on our modified paper prototype, we created wireframes. Wireframes are simplistic designs the show many screens involved in the interface. Additionally, there are callouts that point out the points of interactions and note where they lead. Wireframes in their simplicity allow users in usability tests focus on just the interactions and locations of interactions points to perfect the foundation of the design.
We created it to being to see what the interaction would look like laid out in our interface. The wireframes also point out where we’ll need additional content, like pictures, links or text.
wireframes do not have any visual designs they are simple without pictures, body text or any extra details. All of these simplistic design elements are in preparation for the visual designs and final mock up.
Visual Designs
After showing our wireframes to users, we took their feedback, made decisions based on our findings and progressed with visual designs and mockups. We created these comps to bring all of our ideas to a final presentation.
High-fidelity mockups introduce visual designs, pictures and text. This stage brings all the design ideas and iterations together and adds visual designs to make the design look like a completed product.
While they don’t have to be interactable this is the phase in which some aspects of interaction could have been mocked up using tools like Axure or Balsamiq. High-fidelity mockups allow users in usability tests look at the whole design, interactions, visual design, and context; giving users a holistic view of what the product would look and feel like post development.
Clickable Prototype
This is a clickable prototype with our visual designs. it showcases what our design could be like if implemented in a mobile environment. This prototype has limited click targets due to time constraints but gives users a basic understanding of how the tool could be used.