UX/UI Designer based in Brisbane
bio_boutique_responsive_mockup.jpg

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

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

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.

Persona_Bio_Boutique_Cate.jpg
Personas and empathy maps

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

Empathy_Map_Bio_Boutique.jpg
Bio Boutique user storyboard

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

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.

Bio_Boutique_Sitemap.png
wireframe_sketches_bio_boutique.jpg
Responsive wireframes

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

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.

Bio_Boutique_User_Flow_vertical.png
4. User interface design

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.

process-deliverables-by-celene-zaghini.png
5. Usability testing

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

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.

https://celene880130.invisionapp.com/public/share/7EWTRWMRG

Outcomes

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.