Case Study: Redesigning an e-Commerce Website
Project 2 for the IronHack UX/UI bootcamp has dawned on us. At the same time, I’ve been travelling the States and keeping up with the different time zones has been more than ambitious…
Regardless, a lot has been learned and working with mood boards, user flows, sitemaps and information architecture has been insightful and really needed.
We started the project with research to understand the market better and found the following:
Knowing the market better, we then looked at the website and conducted a Heuristic analysis (according to the Nielson heuristics) to identify the key problems:
This was done to evaluate competitors’ and the clients webiste by identifying good features and design mistakes to create a better interface for the online store. We found that the most common mistakes were:
- consistency and standards
- aesthetics and minimal design
Once we knew the market, we compiled an interview guide for to conduct a stakeholder interview for a dried fruit company in Chile, Sara Suazo, to understand their business objectives and need. We obtained key insights from the interview, which helped us conduct a competitor analysis.
We spotted key competitors in the market and looked at their e-commerce sites to identify key features:
We then did a SWOT analysis to identify our client’s strengths, weaknesses, opportunities and threats and help us map out the competitors according to their brand identity:
Once this was done, we did a user interview to ensure that we were taking the rebranding in the right direction. User’s gave us insights into what they are looking for and it showed us what users are looking for:
- wanting to follow a healthy diet
- knowing how to easily buy dried fruit and confectionary items locally
- What benefits does one get from eating dried fruit
This helped us with the affinity map and found that we are working with mindful consumers, who are interested in wellness and health benefits, but they are also aware of competitors in the market. This guided us when compiling the user persona. We identified the archetype as a 30-something year old who wants to be more conscious of their wellness and diets. This helped us to map out their problems, needs, frustrations and desires in the market:
Once this was done, we could identify the user journey steps and pain points for our e-commerce rebranding:
This helped to move forward with the How Might We model to identify effectively:
- how to showcase nutritional values of each product
- showcase product categories in a simple and effective way
- showcase wellness information that shows the benefits of each product in an everyday diet
- show and list all the products they offer in a better, more aesthetically pleasing way
Lo-fidelity wireframes were conducted amongst each team member to discuss how the e-commerce site would work — this was then combined with the most common areas to create mid-fidelity wireframes.
We conducted usability testing to ensure that our mid-fidelity wireframes worked and that we were on the right path with the rebranding. Our target audience was healthy families, age groups 25–36, who could conduct the test online to check the usability and purchase methods. Key metrics that were used were the completion rate — how capable users are of completing the task and CSAT — the convenience of the ordering process.
Insights that were obtained from the usability testing were:
- on the homepage, users navigate well but struggled with the back option
- inconsistencies with logo navigation
- issues with redundant data entries and payment options
- need for a better organisation of the product categories
After this, we started on the UI design of the site. We conducted a visual competitor analysis and put together a mood board to differentiate the client in the market:
Our UI kit and style guide were formed… We decided on the poppins font and used orange to stay on-brand with the current site, and the turquoise colour is a firm contract and differentiates the colour from competitors. This showcased a warm and inviting mood that stood out with the pops of blue. This colour choice aimed to evoke emotions of trust, welcoming gestures, and a genuine and authentic brand that is friendly, familiar, and warm.
Our design was responsive and we used a 8px grid for mobile and a 12-column grid with 20 gutters and 100 margins for web:
If you have any constructive feedback, please feel free to add them in the comments section 😊
