The company that we worked with is called Qivaro which is a supplement company that provides natural and high-quality supplements. They offer a wide range of products that cater to different needs such as immune system support and joint health. Their target audience focuses on people in any age group.
Project Details and Goals
Duration: 2 weeks, 6/2- 20/2, 2023
Project Role: UXUI Designer
Tools: Figma
Our client would like us to redesign the landing page, product category page, product detail page, and checkout page of their website on Shopify in order to improve the user experience and their branding. Due to time constraints and limitations within Shopify, we made the decision to design these pages using Figma, ensuring that our client can utilize our work in the future.
Our first goal is to develop a professional and trustworthy image for the website that encourages users to peruse its contents and ultimately make purchases.
Our second goal is to develop a website that maintains a positive user experience through a streamlined interface and user-friendly navigation.
We used the Double Diamond design model for our whole creative process and each stage included different components:
Discover Stage: Secondary Research
Define Stage: Affinity Map, Empathy Map, Persona, User Journey Map, Insight and Problem Statement
Develop Stage: Moodboard, Design System and Usability Test(with wireframes)
Deliver stage: Prototype
Secondary Research: UX Audit for Qivaro
We have done a UX audit to uncover the parts of the existing user experience that are and aren’t working and hence come up with recommendations that will eliminate these problems.
(1)Main Page
-Inconsistent Style
-Few buttons are not working
(2)Navigation Bar
-The navigation bar is not outstanding on the main page
-Categorisation of content is not clear
-Facebook and Youtube links are items on the navigation bar while there are social media icons in the top left-hand corner
(3)Product Page
-Too many images and information
-Weird size on the video section
(4)Checkout Page
-In general, the instructions on the checkout page are easy and clear
Recommendations
(1)Build up better categorization of product inventory
(2)Provide an easy search function on the website
(3)Provide filter function
(4)Remove all irrelevant buttons
(5)Ensure all buttons with valid links
(6)Use coherent product images
(7)Use text instead of images for product description (SEO)
Secondary Research: Competitors Analysis
We have done research on different competitors’ websites including Centrum, Swisse, Jamieson, GNC and My Protein. We did an analysis and summarised their key takeaways from their main page, navigation bar, product detail page and checkout page.
Affinity Map
After we did the secondary research, affinity mappings have been used to organize and analyze the key points. These are the following main topics and points that we have collected:
Persona
I have created two personas to represent more frequent users and less frequent users and they might have different goals, frustrations, motivations and needs for using the Qivaro website.
User Journey Map
We created two user journey maps after the persona was created. We have created two different scenarios and analyzed what challenges they may face and solutions that can be applied by our client. The company can put more focus on the low points of their experience in order to discover different opportunities and improve the user experience.
Insight Statements
Problem Statements
Moodboard
We have selected a template in Shopify called Emporium and created the wireframe based on its layout.
Rearrange For Navigation
To improve Qivaro’s website navigation, we streamlined the original 11 sections to 7 sections. We also consolidated their supplements and accessories section into a single section called “Products”. In addition, we reorganized the “About Us” section to make it more cohesive.
Design System
Usability Test
Usability tests helped us to evaluate the effectiveness and efficiency of our design. Therefore, we have conducted 3 rounds of usability testing on main page, product category page, product detail page and checkout page. My primary responsibility is to develop wireframes and prototypes for the product category page.
Selection Criteria:
-Age group: Above 20 years old
-Gender: Both male and female
-Have habit of taking supplements
-Living anywhere
In the first round, we tested our simple wireframes. In the second round, we tested our wireframes with more information and pictures added. In the final round, we tested our prototype.
We have summarised our key findings on each round and revised our design, the following paragraphs will be explained more about each round.
First-Round Usability Test
We have created 7 tasks and 7 participants completed them:
- Please identify the search bar.
- Please identify the products section in the navigation bar and select a category to explore.
- Please use the filters to narrow down the list of products based on any price range.
- Which section on the product page would you look for if you want to know the ingredients and benefits of the product?
- Which section would you look for to find customers’ reviews and ratings?
- Which button will you click if you want to add the product to the cart?
- Which section would you look for to check out the products in your cart?
We have generated 2 key findings after the test which is:
- The credibility of products comes from customer reviews and ratings
- The motivation for purchase is also based on customer reviews, ratings and promotions
Modifications on the product page:
- Putting the “Customer Review” section before the Youtube video
- Changing the ratings to yellow color to make it more prominent
- A slightly longer description of the product after the header (maximum 100 words)
Second-Round Usability Test
We have created 7 tasks and 3 participants completed them and most of the tasks are the same as the above except for the change in task 5 which is: ”Please use the filters to narrow down the list of products based on availability”.
We have generated a key finding after the test which is:
- The use of color for the website will affect the professional and trustworthy image of the brand
Modifications:
- For the announcement bar, change the color in a more eye-catching way
- For the main page, change the first photo into rotating banners
- For the main page, “Special Offer” section can be put in the upper section to catch browsers’ attention; “Who Are We” section can put in the lower part
- For the product category page, make the promotion banner more prominent
- For the product category page, revise the filter options by removing price and brand options, and incorporating new options such as product type, age group, and weight
- For the product page, change the priority of the product benefit to the first section to draw users’ attention
Third-Round Usability Test
We have created 7 tasks and 5 participants completed them,
- What is the first thing that catches your attention when you see this page?
- How easy or difficult is it to navigate to other areas of the website from the main page? (Easy 1–5 Difficult)
- Are there any design elements on the main page that you find particularly appealing or unappealing?
- Which section on the website would you find if you have questions want to ask online? (Observation Easy 1–5 Difficult)
- Please find the filter function to sort for the best seller(Observation Easy 1–5 Difficult)
- How helpful are these images or videos on the product page for you to understand its features and benefits? (Disagree 1–5 Agree)
- How relevant or helpful are those products featured on the “You May Also Like” section on the page? (Irrelevant 1–5 Relevant)
We have generated 4 key findings after the test which is:
- The first thing that caught the browser’s attention is the hero banner on the main page
- Trustworthy and qualified image comes from the certificate or award icon that the company put on its website
- Interesting and informative videos will affect the browser’s interest in clicking and playing the video
- The company logo design impacts the brand image
Modifications:
- For the main page, add the offer eg. 10% off on the promotion banner to make it more eye-catching
- For the main page, provide a contrast between the hero banner and the texts
- For the product page, the supplement fact is already shown on the bottle; there is no need to duplicate it and consider showing a picture of the pill itself
- For the navigation bar, fix the position
Prototype
Please check out this link for the prototype: https://www.figma.com/proto/tYQsGSFkhSdJyPGZLpxMea/Qivaro-Project?page-id=683%3A4200&node-id=683%3A4713&viewport=1077%2C399%2C0.1&scaling=scale-down&starting-point-node-id=683%3A4713
After we have finished our design, there are some suggestions that the company may take into consideration for their next step.
- Encourage customer reviews and ratings:
This can help build social proof for your products and increase customer trust in your brand. You can also feature customer reviews and ratings prominently on your website to help customers make informed purchasing decisions. Additionally, responding to reviews and addressing any negative feedback can help improve customer satisfaction and loyalty.
2. Offer a satisfaction guarantee:
To increase customer confidence in your products and reduce the risk of customer dissatisfaction, consider offering a satisfaction guarantee. This can help build trust with your customers and encourage them to try out your products.
3. Implement a refer-a-friend program:
To encourage word-of-mouth marketing and attract new customers, consider implementing a refer-a-friend program. This can provide rewards or discounts to customers who refer their friends or family to your website, and also incentivize new customers to make their first purchase. This can help build brand awareness and loyalty among your customers.
I am really thankful that I can engaged in this second client project and applied the knowledge I have learned from my previous projects.
This project has taught me the importance of having a backup plan. While we were initially instructed to build the website on Shopify, we encountered limitations with the trial template we selected for our client. As a result, we had to devise a strategy that involved creating wireframes in Figma and simultaneously testing the Shopify template to ensure we were not overly reliant on one platform. This experience has highlighted the value of being flexible and adaptable in the face of unexpected challenges during a short period of the design process.
Throughout the client project, I took on a more active role in the design phase, which allowed me to develop a greater familiarity with using Autolayout, components, and creating prototypes. As a result of this experience, I have significantly improved my skills in these areas, which will undoubtedly benefit me in future design projects.
Thank you for taking the time to read this case study. If you have any comments or feedback, please do not hesitate to share them.
Read the full article here
.png)
