As part of a HCI (Human-Computer Interaction) Methods class, I worked on a group project named ‘Incredible Fit’, that aimed to provide custom-fitted clothing to its users.
The project transitioned from brainstorming, all the way to creating a high-fidelity interactive prototype.
- Brainstorming: The group I worked with had a great team spirit. Each team member got the opportunity to share their ideas, and we unanimously went ahead with the idea we liked the most.
- Conducting a survey: We then designed and conducted a survey through which we gathered quick insights about the people’s clothes shopping habits. To gain deeper insights, we decided to recruit participants for a usability study.
- Performing usability studies: Through the survey, we reached out to participants who agreed to take part in a usability study. We made each participant try out an existing website that was similar to the kind of website we planned to design. We gave them tasks to perform and observed as they performed each task. We later questioned them about their opinion about the website, and what they liked and disliked. We used these notes to design our website.
- Presenting 3 design ideas in class: Next, we came up with 3 design ideas for the website and presented each of them in class in the form of storyboards. Based on the feedback that we received from our Professor as well as peers, we picked the best design ideas, added some new ones, and merged them into a final design that would be our website’s design.
Below are the storyboards we created for each design:
5. Low-fidelity prototyping: The final design was then paper prototyped and presented in class. Our Professor and peers tried out our low-fidelity prototype and provided feedback, which we then used to modify our design, so as to make it even more usable and user-centered.
6. High-fidelity prototyping: Finally, we created a high-fidelity interactive prototype using Sketch and InVision. You can check it out using the link below:
You may also view our final class presentation video below:
Ann Taylor – The clothing images are from the Ann Taylor website.
Flat Icons – The icons are from http://www.flaticon.com/
Silhouette (Front View) – http://www.clker.com/cliparts/F/e/5/S/W/m/woman-silhouette-hi.png
Silhouette (Side View) – http://il6.picdn.net/shutterstock/videos/9866624/thumb/1.jpg