The last synthesizing document I created was the storyboard, which helps me build empathy with the user in a very quick and visual way.

With sufficient research data and knowledge of what users need, I moved on to the define stage of the process. The first step was to create a document highlighting business, user, and technical goals. By looking at where goals overlap each other, I have a better understanding of how to prioritize my design.

From there, I ran an online card sorting activity with 5 participants to gain a better knowledge of how users typically categorize different types of clothing. Each participant was asked to sort 30 different items into different categories. At the end of this activity, I was able to find similar and unique patterns that helped me with how I should categorize items.

Next I created a sitemap to clearly outline the structure of contents of the website. This ensures that I include the essential features that meet my user’s needs.

After the Sitemap, I created one user flow and one task flow to illustrate how a user finishes a task. The user flow demonstrates specifically about one task, whereas the task flow shows many ways a user can reach their goal. This is a crucial step in this process because it helps us understand not only what the user’s actions are, but also what the user is thinking about.

The first step in the ideation process was to create a feature roadmap in order to prioritize the necessary features and any other extra features that should be included on the website. Given that clothing websites have been a around for quite some time already, it was important for me to make sure I included most of the standard features found across these websites.

With a clear idea of what should be included on the website, I move on to the next step in the ideation phase by sketching out 3 different homepage ideas. While sketching out ideas, I had to keep in mind that I was designing for Jennifer (persona) and what would meet her needs.

After sketching out different ideas of the homepage, I combined ideas from each of them to create digital mid-fidelity wireframes. I created a homepage, women’s categories page, jeans collection page, a product page, and a shopping cart page. This allowed me to have a better idea of how the visual hierarchy, element sizing and spacing, and the flow would look before adding details.

After creating wireframes and having a better understand of how the overall structure of the website should look like, I moved on to designing the brands logo. I started by listing out the brand attributes which are: neutral, fresh, clean, and modern. Since redesigning the brand logo is one of my main goals, I added four more attributes to make things more interesting: minimalist, attractive, trendy and unique. I created a logo that is simple but strongly reflects the brands attributes. Then I arranged a brand style tile that includes the website’s color palette, typography, imagery, and other elements.

After identifying the brand’s style and elements, I moved on to designing high-fidelity responsive wireframes for the homepage and the product page. By making sure everything from images to element spacing and alignment was spot on and consistent, I was able to move on to the next stage.

In order for me to create a prototype for usability testing, I finished a few more high-fidelity wireframe pages to make sure users will be able to finish the given task. Then I created my first clickable prototype using the website InVisionapp. With the help of my mentor, I reiterated my prototype a few times before finding real participants to conduct the test.

The goal and main focus of conducting this usability test is to uncover any misunderstandings or obstacles that the user might run into regarding my designs. I created a usability testing plan and found 5 participants at a school campus to conduct moderated, in-person usability tests. Each person was given one main task and scenario regarding purchasing an item using the prototype. As my participants ran through the test, I made sure they spoke out each and every action they took in order for me to record down quality data.
(Click here to see full test findings notes)

After gathering all the data from the usability test, I synthesized the test findings by creating an affinity map. Similar to the empathy map from the earlier stages, the affinity map allows me to find important patterns through the user’s behaviors, actions, comments, and feedback.

( Click here to see full affinity map notes)

By synthesizing the test findings with the affinity map, I was able to find areas of design that needed improvement. Below I’ve listed out three usability test insights with corresponding revisions that I applied to my prototype in order to improve the overall user flow and experience of the website.

• All users were confused where to click at first and prefers the image of the product to be clickable
  Revision: Made sure both the image and title is clickable

• All users prefer using the filter function before scrolling down to find the item
  Revision: Made sure the filter function is ready and working

• 3 of the 5 participants were not sure what content of the product to click on first (size,color,quantity,etc)
  Revision: Made sure all features are clickable under no specific order

The next step would be to eventually conduct another round of usability test with the updated prototype to uncover more insights so I can further improve the design. It would also be necessary to create a few more screens to make the overall prototype and website feel more finished. Furthermore, this project would then be pushed out to the real market where real users can actually browse and test the website. Then from there we can accurately measure if our design choices meet the user’s needs.

Clothing websites have always been a thing for me growing up, so being able to work on a project from the beginning stages to the design stages really left a big impact for me. I enjoyed conducting user research and then implementing my research findings into actual design choices. A few highlights of this project include: 1. Conducting user interview to learn about user behavior 2. implementing design choices 3. Seeing how participants react to my prototype and updating them to meet their needs.