Hoop Group is one of the leading youth basketball event organizers and programs in the country.
They are an integral part of thousands of players' journeys to college and beyond.
Overview
As the UI & UX designer, my role was to take the sitemap and setup wireframes. After, I created high fidelity designs with those wireframes. 
Hoop Group was looking for a new website with a similar look and feel to the original. They also wanted to simplify and organize their pages, making it easier for people to register.
Challenge
My task was to showcase boys & girls tournaments more prominently, where as the existing site focused on the Headquarters programming. While also making sure the site was easy to navigate and simplified the steps to get to registering for an event. 
Solution
Leveraging my skills, I initiated the creation of a clean design, responsive pages, and standardized event formats for tournaments, creating a consistent visual style. I developed wireframes for landing pages, events, alumni, tournaments, and rankings, ensuring a cohesive design throughout.
Process
We have a specific process for our web redesign projects, so the following steps are standard across every website we touch as a team. I am involved heavily on the beginning of the project to setup the framework and design for the rest of the project.
Discovery & Mood boarding
The first two steps consist of market research, and mood boarding ideas for how we can layout the site, and if needed start developing the look and feel. 
Stakeholder Interviews
During stakeholder interviews we talk to anyone who is making decisions for the new website. Usually they are experts in the brand and the overall goal for the new website. In this meeting we show them the sitemap, and moodboard to make sure everyone is on the same page moving forward. This is also where any questions about design, layout, and navigation can be asked. 

Low Fidelity Wireframes
I then put together wireframe options. I focused on simplicity, opting to improve card elements if possible from the current design system. I wanted to match the brand standards of the existing Hoop Group site identity so users had an intuitive and seamless experience. 
I also reorganized the navigation to better serve the user, and making it easier to navigate to the tournaments and registration. 
During wireframes we also do user testing with the wireframes. We run the users through a few tasks to see how easy the site is to navigate and adjust if needed. We also ask general questions about the site to see if it would match the audience of parents and youth athletes. 
Visual Design
After stakeholder reviews and user testing, I created high-fidelity designs and worked on branding elements based on the final version of the wireframe.
I began with visual branding for all the screens. I used consistent font, type, size, and color. I also incorporated balance, proximity, alignment, hierarchy, repetition, and contrast.
I got feedback on my designs and ideated, then used Figma's auto layout and created a component library for all components.
"It's much clearer and easier for people to navigate. I like the simplicity of the pages too."
Development
At this step, I hand off the finished high fidelity wireframes to the dev and assist when needed to create assets, and answer layout questions. Once the dev is complete we review the design a final time with the stakeholders and make changes if needed. 
Results
With our teams efforts, Hoop Group got a brand new website that is easy to navigate and focuses on their tournaments, rather than just the headquarters events. It also takes just 3 clicks to the register for each event. This revamped experience resulted in higher engagement levels and more registrations. 
My Impact
This case study shows my ability to lead the UX portion of the project by showcasing content-focused transformations, while creating high fidelity designs during the UI phase. I was able to showcase my skills in content design, user experience, and collaboration with the other members of my team throughout the process. 
The integration of design elements, streamlined content, and user-centered strategies came together to create a platform that fosters community engagement. This reflects my ability to create impactful content-focused ideas, while optimizing user experiences and aligning with Hoop Groups goals. 
Back to Top