Bioko Treats E-Commerce Website Redesign
Creating a delightful and convenient shopping experience
Since 2000, Bioko has been one of the best chocolate makers in Ghana. With the aim of delivering desirable affordable chocolates, they needed to enhance their online shopping experience to reflect their business and grow their online customer base.
Role
As part of a 2 member team, I was responsible for implementing the experience design strategy, concepts ideation, and delivering the final designs.
Methods
Competitor Analysis, Website Analysis, User Interviews, Sketching & Design, and Prototyping
Timeline
4-week sprint (Nov 2020 – Dec 2020)
Challenge
Delivering a desirable shopping experience
We were approached by Bioko Treats – a chocolate brand to help them deliver on their promise of providing their customers with desirable chocolate experiences. This involved redesigning their website both aesthetically and structurally to help users purchase their chocolate and other brand services online.
Reviewing the shopping experience
The drawbacks of the existing website
Upon visiting the existing website I knew it needed an uplift aesthetically to reflect the brand. Not only so, but there was room for more improvement in terms of the shopping experience.
I did a quick run through the online shop to determine which key areas needed some improvements and here’s what I found:
Wrong page redirects to other products whilst trying to complete another task
Confusing shopping experience for the 'create your own box' product
Inability to make direct online payments
Key Takeaways
From the review of the current website, it was clear the aspects that were to be improved were:
- Fix the product to checkout flow – the right buttons/links needed to lead to the right products and pages
- Improve custom box experience – the brand had a unique product where users could select their preferred chocolate bonbons and pralines for their choice of box type but the online experience needed to be worked on
- Include payment options – adding a payment to the website so users could have a complete online shopping experience
- Improve website copy and content layout
Competitive Analysis
What are other chocolate brands doing?
With a better understanding of the platform, we wanted to see what other chocolate brands with similar services were doing with their website. We scanned other brands’ websites to have a feel of their shopping experience and also asked some customers their opinions to know the kind of solutions that will give Bioko the competitive advantage.
Here’s what we found out:
Good product shots
Most brands had good product shots of which some online users attested that it impacted their buying decisions.
Online payment services
The brands with online shops had payment services that allowed users to make direct payments.
Descriptive details of products
Products on competitor websites were described in detail making users aware of their purchase order
User Research
User interviews and affinity mapping to understand shopping experience
We interviewed three users to use the website to understand what they expected in terms of the shopping experience and the challenges they encountered.
We synthesized their feedback trends and this is what was said:
??♂️??♀️??
I want to complete payments for my order online
??♂️
Can’t I preview a product without visiting its page?
??♀️??
How do I add the bonbons I like to my box?
??♀️
Can someone outside Ghana make an order for delivery in Ghana?
??♂️????♀️
I prefer white to a brown/dark page background
??
The product images are not so appealing
??♀️??♂️
The text is not that legible
Key
??♂️ – User 1
??♀️ – User 2
?? – User 3
Design Concepts & Sketches
Crafting the desirable shopping experience
What I had learned from the user research corroborated the key takeaways from reviewing the existing site. This gave a sense of direction as to how my design concepts could address the major issues of the existing site.
Sketch of 'create your box' concept
Sketch of proposed shop page
Sketch of checkout process
Design improvements & user feedback
High fidelity screens of key areas in need of improvement
Using Figma, I created high-fidelity mockups and prototypes after a series of testing and iterations with the major areas of feedback as the focus
'Create your own box' shopping experience
An improved ‘Create Your Own Box’ shop which gave users a realistic experience of filling up their chocolate boxes with their preferred bonbon and pralines
Video of create your own box product interaction
Checkout page
An improved checkout page with payment functionality enabling users to pay using debit/credit cards or a mobile wallet
Video of product checkout interaction
Solution
Introducing a desirable chocolate shopping experience
The new Bioko Treats interface design conveyed simplicity and confidence. There was no unnecessary UI aesthetics rather a clean and uncluttered design with readable typography. All design decisions were to help present to users a delightful shopping experience
Project Impact
Positive results and room for growth
This project was a challenging yet exciting one. The redesign certainly increased their online customer base and also impacted sales via the complete shopping experience.
- Over 100% increase in unique visitors after the first month of launch
- Over 80 completed online sales in the first two months
- Average of 300 visitors per month
