Fithub website

April 2021
Project Overview
Fithub is a Colombian startup that aims to help people adopt better habits. They launched their website in 2020 to provide users with a faster and more efficient way to order products without the need to visit physical stores. The company approached me with the clear goal of understanding how users were using their website, uncovering usability issues, and identifying opportunities for improvement. We conducted user research, leading to a redesign of certain screens to enhance the user experience when making purchases.
UX deliverables
📚 Desk Research
💻 Usability Testing
💼 Benchmarking
✏️ Wireframing

The Problem

Apr 2021

Our research identified three main issues with the current website:

  • Inaccessibility: During our testing, two users were unable to complete a purchase due to a fixed height issue in the modal component used in sign-in, new address, and other processes. The primary button was placed at the bottom, making it unreachable on smaller devices.‍
  • Incompleteness: Users felt that the product detail page lacked essential information and appeared empty, which made it challenging to decide on a product or try new ones.
  • ‍Confusion: Navigating and exploring product categories proved to be tedious. Users mainly used the search bar to find products and frequently had to return to the home page to switch between categories. Furthermore, within categories, all products from subcategories were listed together, creating confusion.
How can we make the Fithub website more accessible, relevant, and user-friendly for navigation?
Take a closer look at the wireframes on FigJam

Actions

Apr 2021

‍I considered comments from social media channels to understand users' main pain points and identify missing functionalities in the product.
I conducted remote user testing sessions to gain a deeper understanding of how users were interacting with the website and gathered their feedback.
Subsequently, we converted insights into actionable steps, prioritizing them based on impact and feasibility:

  • Fix the mobile layout and behavior of modals (Frontend developer)
  • Redesign the product detail page.
  • Rethink the checkout process to allow users to navigate back without losing their information (Backend-Frontend developers).
  • Redefine navigation and key features to make exploration and use more straightforward.

Gathering User Feedback

We compared our approach with direct competitors and international references to gather insights for redesigning different components.

Design Wireframes

‍The new product detail page underwent several iterations before we finalized the design.

Results

Navigation desktop

The desktop experience remained largely unchanged, with a reduction in the use of the orange color, which now indicates action or active pages. Categories were visible in the header, and hovering revealed subcategories in each one. Once in a category, products were listed, divided by subcategory.

Mobile Navigation

We moved the hamburger icon to the left, following usage patterns from other websites. The category bar was removed from the home page since more users interacted with the categories section. Upon entering a category, the header expanded, providing easy access to subcategories.

Product detail page

The product detail page was a crucial screen for conveying information about the product.
We redesigned this screen to provide users with valuable information that could influence their decision-making, including nutritional value, ingredients, tags, and recommendations.
August 2021

Positive Impact

Users expressed an overall positive opinion of the website redesign, describing it as fast, simple, and easy to use.

Similar projects:

Globe Case Study

Take a look at this project
Powered by Webflow
BehancelINKEDINBack to HOME