Case Study: Website redesign - Interactive Mid-fidelity Prototype of an e-commerce website
Duration: 2 weeks
Role: All roles
When: July 2022
What I Did: Card sort, User Interviews, Competitive research, analysis of state, Define, Site map, Sketch, Wireframe, Prototype, and User testing.
Project Overview
My Science Shop's objective is to inform, entertain, and inspire with their assorted science-based products but it can be difficult when you cannot find the types of educational products you need. My objective starting out was to create a more intuitive and straightforward approach to navigation and information architecture by ensuring that all items are properly categorized. During the process, I noticed some pain points of the items not being consistently described and visual cues and express payments being absent. Using the industry standards, I went back to implement those aspects that would increase efficiency and customer retention.
Observation and Research - the first step in every science
Card Sort + Competitive Research + Analysis of site
Observation and analysis of the site:
Top navigation is crowded with two rows and dropdowns which gives an outdated look and runs the risk of cognitive overload.
Navigation has overlapping sections that, upon further investigation, had items missing from groups it was a member of and items where they should not be.
Bit outdated in a couple of ways sprinkled throughout the site.
Looking at poin points to better understand what someone would experience
Fixing information architecture based off of Card Sorting
The New Site Map
The types of users that would typically use this site for education and information or to buy gifts for others or themselves.
Ideation and Testing
Wireframe + User testing
In the front page, you can see the navigation is updated with a minimalist look and I added an indication of how many images were in the rotating carousel.
User testing showed me that it was not obvious to everyone that quantity could be changed and that some find it more likely to finish the transaction if there are faster payment options like Paypal or Apple pay.
Shopping Cart page needed visual hierarchy for buttons and consistency with making sure the person knows exactly what is going on and what they are getting in each step.
Insights and what I learned:
Consistency in style is good but having things with too much similarity causes confusion.
Let the user know where they stand at all times. With product or place in the checkout process.
Users want easy, fast, and convenient.
Each platform (web to phone, iPhone to android) has its own style and movement norm.
Always be mindful of accessibility.
Results:
A cleaner and more straightforward navigation is not only more appealing to deal with but it lowers cognitive overload on customers, resulting in less frustration when using it and therefore more retention of customers.
Keeping things consistent and transparent about products increases trust in the product and company.
Faster and easier payment methods help with a more convenent experience and makes the customer feel safer about their financial information