Situation overview
A sports company reached out to me to refresh their online store and give feedback on what was working well and what wasn’t. While the redesign didn’t lead to a financial deal, it taught me valuable lessons on improving web interactions. This project is part of my portfolio, showcasing my design process, approach, and ability to meet user needs.
These images show the main navigation and menu of the sports store’s desktop layout. Both have issues with responsiveness, clutter, and readability. My main goal was to fix these problems while keeping the brand’s core identity intact.
Problems to solve
The most concerning problems in terms of user interface in this case scenario are readability and the over cluttered hero section. Thus, I decided to start sketching and wireframing from there.
I’ve looked at different options and noticed that a bigger button and a new font would work better.
When you enter the online store, your focus goes straight to the main part of the site, and then you move around to find what you’re looking for. Understanding the user journey from one section to the next helps make fixing issues much easier.
This initial prototype has introduced a larger button, alongside a more legible and straightforward navigation bar, sorting the readability problems and making the users find out what they want without getting frustrated as soon as they reach the shop.
The second prototype is focused on not cutting abruptly the impact of the main image of the site adding two transparent subsections when you click on the navigation bar to look for your items. A big, bright button linking to the new collection has also been added, so users can easily check out the latest items with just one click.
Before & After
I’ve focused on showing the changes using high-fidelity wireframes that lead to the final design, making it easy to spot the improvements compared to the original website layout.
My motto is, "It has to look like it’s always been there." Small changes can really make a big impact. This new button with the company slogan stands out way more than the old one.
In the older edition (blue shorts), the "new" at the upper right was block-shaped, thus not particularly noticeable. Enhancing its visual charm and grab-ready attribute was what spurred this modification. The curvy edges of the images reflect a trend in this kind of stores that imparts an inviting appeal to the item. Lastly, while the fresh typeface retains the brand's personality , it amplifies readability with bold script for what the customer wants to see at first glance: the article's title, its sizing, and its cost.
Take a look at both images and see how these small changes can really boost the visual appeal and catch the eye of potential customers. The old version is at the top, and the improved one is below.
Colours of the Brand
# FFD200
Main Yellow light
# FDFDFD
Main White
# F5EC09
Yellow light
# D9D9D9
Primary Gray
# FF8A00
Orange Light
# 14142B
Primary Black
# 000000
Gradient Black
# 7F57F1
Main Purple
New Fonts
Roboto & Raleway
These fonts and colors are crisp and calming to the eye. In the end, the longer you can browse without visual fatigue, the better.
When it’s hard to find what you’re looking for, it kills the excitement. The old site had too much clutter and was confusing to navigate, which made people more likely to leave.
The updated navigation bar focuses on being user-friendly. The men’s and women’s icons are on the left, with a search button for customers who know exactly what they want. In the center, the brand's logo takes center stage. On the right, you’ll find all the essentials like order tracking, a user profile with your name, a shopping cart, and a currency button. These features make shopping easier by cutting out unnecessary steps.
Result
Every decision made along the way has helped shape the final high-quality prototypes and fresh imagery for the brand.
This is the principal segment boasting newer, legible icons, an iridescent white button for immediate access to the latest arrivals.
The menu has been simplified to be cleaner and less cluttered. The new font is easier to read and gives the site a more straightforward vibe, making it easier for customers to find their way around.
Even though the mobile version of the store is already great and I was specifically contacted for the website, I decided to try out some of the ideas on an iPhone mockup and update the brand’s look with a new button design.