ROOIBOOST
UI/UX
Website Design
e-Commerce
Specialises in sustainably sourced rooibos tea from South Africa, sold in Ukraine.
This project involves redesigning an existing website to incorporate the brand's colors and make it more dynamic. The aim is to create a modern, user-friendly site with interactive features to effectively showcase the brand's identity and products.
Role
-
UI/UX Designer
Timeline
-
5 weeks
Tools
-
Figma
-
Notion
-
Adobe Illustrator
.png)
Overview
First, I conducted an interview with the client to identify the target audience, understand the clients' and users' needs, and gain insight into the research the company had already conducted. My primary task was to redesign the existing website. However, I first needed a clearer understanding of how the client perceived their brand to make it as marketable and approachable as possible. The product is new to the Ukrainian market, targeting residents aged 18-35 who are active, seek alternatives to coffee, and are open to trying new things. The main client needs were to market the product, inform potential customers, attract brand ambassadors, and provide recipes for preparing rooibos tea.
After this I started working on the site map to have a better idea of the user flow.
Wireframing and Prototyping
After determining the flow and structure of the website, I began working on low-fidelity wireframes and their prototype. Given that the client's primary goal is to sell products, my initial focus was on mapping out the ordering process and wireframing key pages such as the Home page, Products page, an exemplary Product page, Cart, and Checkout. The aim for the wireframes was to test the ease of navigation for users and to prioritize the functional aspects of the website over visual design.
Once the wireframes were completed, I proceeded to prototype them and then conduct usability testing. I tested the low-fidelity prototype with five users who fit the target audience. The main task they had was to order 250g of ground rooibos tea. This allowed me to test how easy it was for users to navigate from point A (Home page) to point B (Checkout page) and what challenges they faced. Throughout the process, I asked them questions to gain insight into their navigation experience and their previous experiences with online ordering. The following is a summary of their feedback:
-
80% of users said they would like to see a more detailed description of how to brew rooibos. Although this question is answered in the FAQ section and there are several blog articles on tea preparation, during the interviews I noticed that most users quickly scrolled past the blog section. Therefore, I also added a short brewing instruction for rooibos to each product page (only for rooibos, not accessories).
-
40% of users also mentioned that they would like to log into their personal account on the checkout page to avoid filling out the same information multiple times.
-
80% of users wanted to see how long delivery would take on the checkout page.
Design
Once the structure was established and I was confident with the website's flow, I moved on to creating visual mockups. I used the existing brand colors and patterns and introduced new fonts to highlight small elements, ensure optimal readability, and support the brand's identity. The goal was to create a vibrant, dynamic website that reflects the brand's values.
Next steps
The project concluded after the final design part, but if I were to continue, I would explore and/ or add the following:
-
Conduct usability testing using high-fidelity prototype.
-
Additionally conduct usability testing on mobile to understand product experience on a different platform.
-
Explore additional features - delivery to nearby countries, multiple currency options, etc. As the company develops I would also be interested in including such features as the map of the real-life locations.
