Hoopers: Website Redesign

Guilherme Torres
Jul 1 · 4 min read

Creating a new design for a basketball community platform

After intense weeks of hard work at the Ironhack UX/UI Design Bootcamp, it was time to prepare for the final project.

The students were introduced to real clients facing real problems.

Among all the business, Hoopers got my attention. They are a basketball community that works as an athlete-centered media platform. They also map and transform basketball courts, as well as creating specialized products for the community.

Image for post
Image for postImage for post

There are two mains reasons that made me choose Hoopers: the fact that they needed a complete redesign, and also the fact that — from now on — they want to prioritize the content in the homepage. I thought that my background as a content producer could help me in this process.

So, let’s see what exactly Hoopers needed and how I managed to help then.


The Problem

Image for post
Image for postImage for post

However, Hoopers is facing a problem.

Their current website don’t represent what Hoopers really is: a basketball content platform for portuguese lovers and players of this sport.

So, in order to change this, Hoopers need these problems to be solved:

Image for post
Image for postImage for post

How Might We

Image for post
Image for postImage for post

User Persona

Image for post
Image for postImage for post

Going through the Mid-Fidelity

Image for post
Image for postImage for post

During the Mid-Fidelity process, my goal was to decide how the content would be displayed and which kind of content would be prioritized.

Also I’ve decided to add different kinds of content (articles, images, podcast, videos and products) on the homepage in order to increase the lifetime of the user inside the website, one of Hoopers pain points.

Thinking about this problem, I also added internal links inside the articles. I also added sharing buttons and a comment section with the Facebook plug-in.

To increase the engagement with products I created a featured section of Hoopers items to be displayed in the homepage and inside the articles.

For the Hoopers ecommerce, I completely changed the header, to create the sensation that you are now inside a different and exclusive service. I also added a filter bar, since that in the online shop the user have different needs.


High-Fidelity

Image for post
Image for postImage for post

For the colors I used black, dark grey, orange and white.

For the typography I used Bebas Neue for titles and buttons, Morebi Rounded for the menu, and Montserrat for text.

Image for post
Image for postImage for post

Happy Path

Desktop Version

Mobile Version

I truly believe that with this redesign Hoopers is able to communicate clearly what the company have to offer to the user.


A Few Screenshots

Image for post
Image for postImage for post
Image for post
Image for postImage for post
Image for post
Image for postImage for post
Image for post
Image for postImage for post
Image for post
Image for postImage for post
Image for post
Image for postImage for post

Thank You!

Thank you, once again, for reading :)

The Startup

Medium's largest active publication, followed by +670K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Learn more

Create a free Medium account to get Top Stories in your inbox.

Guilherme Torres

Written by

UX/UI Designer and Journalist

The Startup

Medium's largest active publication, followed by +670K people. Follow to join our community.

Guilherme Torres

Written by

UX/UI Designer and Journalist

The Startup

Medium's largest active publication, followed by +670K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store