Bio Boutique ecommerce website
The challenge:
Help a local business build their online presence from scratch. Design a responsive ecommerce website for Bio Boutique, a new sustainable and ethical business passionate about changing the world one piece of plastic at a time.
My role:
Develop a logo, branding and responsive ecommerce website that showcases the eco-friendly, zero waste products.
1. Research
Research began by analysing trends in the competitive landscape of eco friendly products and identifying opportunities. We then conducted empathy research to how and why customers shop eco friendly products? What drives them? To Discover the common needs, pain points, and human behaviour of the target market.
Summary of findings
If eco friendly products were cheaper 100% of respondents would use them more.
52.94% of respondents shopped eco friendly products because of environmental benefits.
Transparency regarding materials/ingredient used and manufacturing/factory standards for textiles is extremely important to users.
Packaging concerns were high regards to plastic, biodegradable etc.
Many users perceive eco friendly products to be expensive.
Cost is a motivator. Also free shipping.
What the company does with it’s money is a motivator (donate to charities, plant trees etc.)
Competitor sites hard to find what users are looking for.
Personas and empathy maps
PAINS
• Plastic pieces in the packaging
• Expensive shipping costs and expensive products seem like a luxury
• Hard to find which products are suitable
• Worried about whether the packaging isbiodegradable
• Not sure where to start
GAINS
• To have products safe for me, my family and the environment
• To use high quality, reusable products in the home
• Longevity and practicality is important
• To save money by buying quality over quantity
• Plant-based, biodegradable packaging
• To feel good about myself for minimising domestic landfill output
• To use less plastic in every day life
• To let others know of her achievements
Bio Boutique user storyboard
We illustrated a storyboard that captures one of the persona’s user journey when using an eco friendly website. This highlighted frustrations which inspired features for the site and helped with the user flow.
2. Information Architecture
After liaising with the client, and using information from secondary research and the competitor analysis, the Bio Boutique sitemap was mapped out. The user can shop by room of the home, category of eco friendly nature or using the search function tool.
Responsive wireframes
Designs were first sketched on paper, then built into low-fidelity wireframes in Sketch keeping in mind the following opportunities:
Design website with clean interface and clear information about company and products, where they are sourced etc.
Use iconography to make it easy for users to know what the company and products stand for, their benefits to the environment, ratings.
Free shipping over a certain amount.
Explain how users can save money by buying certain eco friendly products. (infographics)
Push the ethos of quality products bought once saves money over time.
Fashion statement pieces.
More affordable products so eco friendly products are not seen as a luxury.
3. Interaction design
User flows and task flows were created to visualise the path a user would take to complete a task. The user flow below maps out the path from entering the website homepage through to the order confirmation.
4. User interface design
Based on research findings, the interface of the ecommerce site needed to be friendly, accessible to information and clear about the benefits. With this in mind, iconography with the benefits of the products is one of the main features. With serif typography headlines, greenery and messages that convey helping the environment, the interface shows that the company is transparent about their products. The logo is in a handwritten font with a few leaves on top of the ‘o’ to look like a piece of fruit. The interface needed to be streamlined, to create a hassle-free shopping experience with the least amount of clicks as possible.
5. Usability testing
The total number of participants that did the test was 3 people, all female between the ages of 28 and 40. The test was done individually on their desktops. I would send them the link and they would try complete the tasks. I got them to answer some key questions and once they had completed the tasks, I gave them a call to get some feedback about their experience. I lay them out in an affinity map to point the direction towards the next steps and final responsive website design.
High fidelity prototypes
Low fidelity prototypes were made for desktop and mobile. High fidelity prototypes were created for desktop using InVision. Once usability testing was completed, revisions were made to the prototype.
Outcomes
It was a worthwhile experience helping to support an innovative, sustainable and ethical farming movement. The client is happy with the outcomes of this project and I hope it proves to be successful. After secondary research and competitor analysis, I realised I didn’t know much about zero waste products and how everyday household items were damaging the planet. So it was educational for me throughout the process and I have already started changing my every day habits, thinking about where items are sourced and what they are made out of before buying them. I have become a more conscious shopper because of this UX project.