In this design challenge at General Assembly the task was to improve an e-commerce website. I chose to re-design the website for a New York based clothing boutique called CLOTH. I found it difficult to navigate when browsing through and was curious to see how other online shoppers experienced it.
To see what some of our direct competitors have on their websites, I did a competitive analysis on 3 other contemporary clothing boutiques. Some key features I found from on their websites that CLOTH is missing are:
• Landing pages with featured items and curated themes to shop by.
• Drop down navigation menu with background.
• Filter or sort by to narrow search.
• Sale tab visible on the navigation menu.
I conducted 4 user interviews and contextual inquiries to observe the behaviors of our users while navigating through the website. I gathered my notes and did an affinity map exercise to categorize the main trends and pain points within them.
From my research, these are the key takeaways I gathered that our users struggle with. I would like to focus on these factors in order to create a more intuitive experience for our shoppers.
After confirming the difficulty of browsing through the current website, I created a user flow to show the steps our persona Adrienne would take to shop and checkout. Adrienne would be able to browse more at first glance when she reaches the home page and have a smooth checkout process.
View Site Map Here
Before jumping into digital I always sketch out my first round iterations on paper first to get my ideas across quickly. Below are some hand sketches I started with to improve the browsing experience through checkout. Then I move onto building digital mid-fidelity wireframes to refine my layout and elements.
Below are callouts of the added features that help improve the user experience of the CLOTH e-commerce website. View desktop prototype to shop new arrivals, view product page, and check out.
• Continue building responsive design for mobile.
• Design “My Account” page including favorites and order history.
• Go more in depth with “filter” and “sort by” functions.
• Conduct A/B testing to gather more feedback and design new iterations.
I learned that the design process is never ending and there is always room for improvement. Users also having visual guidance to follow in order to complete their tasks, but when presented with too many options they can get confused. Less is more, but make sure it is descriptive and clear.