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.
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.
Hoopers was created because of four main reasons:
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:
How Might We
After identifying all the pain points, its was time to define our How Might We.
I created a survey to find out more about the behaviour of Hoopers user’s. The survey was shared with the actual Hoopers database. This made the survey extremely useful and very rich in insights. We found out, for example, that the basketball fan uses Instagram to get daily info. This information was crucial to decide for a live Instagram feed at the new Hoopers website.
Going through the Mid-Fidelity
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.
To warm up for the high-fidelity process I created a moodboard inspired on the values of the basketball community (language, style, etc).
For the colors I used black, dark grey, orange and white.
For the desktop version, what you are about to see is the user scrolling through the homepage, going inside an article, moving to the ecommerce and purchasing a product.
For the mobile (responsive) version, you can see the user scrolling through the homepage, checking the courts, and suggesting a new court to be added.
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
The Ironhack Bootcamp was an amazing experience. It’s hard to describe how intense it was. I’m really proud of everything I’ve accomplished and I can see how much I learned through the process. I was really lucky to have amazing teachers and friends!
Thank you, once again, for reading :)