My Role
Graphic Designer, UI/UX Designer, Prototyping
Tools Used
Illustrator, Photoshop, Figma,
Timeframe
March 2019 - July 2020
Research to Guide Our Users
By interviewing current users and potential newcomers I was able to understand the key features people were most interested in looking for when trying to find a Sports Management Software.
Key Features to Note
Safety: Parents and coaches are most concerned about safety standards and verification processes for people involved in Youth Sports.
Financials: Being able to facilitate payments for various league items is important to Admins and tracking where money is going is another priority.
Scheduling: Getting proper communication about availability is crucial to athletes and parents. SportsEngine HQ provides simple tools to make responding as simple as a tap of a button.
User Personas
The User Personas for this site are a very wide ranging group. The tricky part about the personas I have presented is that in some scenarios our user could be using the App as all three. This issue creates a lot of overlap when it comes to showcasing features and aspects of the website and HQ App.
James Gordon
Administrator
Goals & Motivations
- Wants to setup a team with info that people can update themselves online.
- Needs an app that can collect & track money for league payments and other items.
- Likes having all the team info and tools in one shared app so they don't have to do it all alone.
Pain Points
- Dislikes having to text reminders to individuals.
- Needs a way to verify background checks for coaches and refs.
Martha Wayne
Parent or Coach
Goals & Motivations
- Likes having an App to communicate with parents quickly.
- Wants to make sure everyone has updated schedules.
- Wants to get gear for the team and coordinate the money for it.
Pain Points
- Wants to make sure that there are background checks for people working with young athletes.
- Would prefer to communicate through an App rather than give everyone their phone number.
- Annoyed when people don't say they are going to miss practice or that it is cancled due to weather or other factors.
Damian Wayne
Athlete
Goals & Motivations
- Wants to setup a team with info that people can update themselves online.
- Needs an app that can collect & track money from teammates for league payments and other items for the team.
- Likes having all the team info and tools in one shared app so they don't have to do it all alone.
Pain Points
- Dislikes communicating in different apps.
- Needs reminders for deadlines and events
“I need an all in one solution to manage my youth sports needs. SportsEngine HQ provides all the tools necessary to take the hassle out of planning around a busy schedule. ”
Brand Design
With this site design came a new style that was built around showcasing the elements of SportsEngine HQ. My approach focused on visualizing the tools and products for the users of the site. With so many options—there needed to be a quick snapshot of the interface or subject of the page. This process lead me to create several templates for the brand.
Photo Collage & Hero Images
The content for the HQ product can be dense and in order to simplify the information I created a system of assets that when combined create a composition for users to easily comprehend. These collages typically consist of simple shapes and line work that are reminiscent of the lines used in various sports. Within these shapes and lines I added in UI elements in order to show the information for the tool or feature we want to show to the users. Then if applicable, I added users or characters that help show the real world application of the product in order to help users better relate to how they will interact with SportsEngine HQ.
Iconography
The icons for the site use a two tone style that incorporates the HQ brand colors. I created a variety of items that can be used in various context. This library allowed us to use the icons in the navigation and then call back to it within the content of the site. By doing this we created a strong connective relation between the content of the page and the navigation elements.
Illustration
One approach to the illustrations for the brand would incorporate the same formula for the imagery that will be frequently used. I created compositions that use the icons and line work to accent a central image that matches the color and styling of the icons. This creates a cohesive structure that ties back into the other elements of the page.
Sketching & Prototyping
When it comes to sketches I like to provide as detailed of a vision as possible so that my idea of the product is crystal clear. The sketch here highlights some of the top pages that were requested by the client. The images a re simplified for now and finalized with real content later into the prototyping phase.
Navigation Structure
With our testers and user personas I was able to distill the sections of the site into items of key interest. For this case study I will focus on the Capabilities section. It shows the tools that our personas value most and so it is important that it is clear how to find them.
First the items are broken into five categories based on their similarities and given headers to make them easier to scan. I developed an icon pack for the website and implemented them within the navigation to further boost the scalability of the content. The goal for this design was to reduce the amount of time spent searching through the long list of capabilities.
SportsEngine HQ Final Home Page
2025 Website Update
Recently the SportsEngine website has been updated and the SportsEngine HQ product has been integrated into the main website. This option was suggested by our team in our initial design phase in 2019, but the main site was not open to edits at that time.
This new layout bundles the products that SportsEngine has acquired or created into a top navigation that shows the ‘tag’ for each sub branded product. This allows users to explore the products while never leaving the SE website and makes it easier to retain users in their journey.
A Lasting Impact
One thing that remains in this new site are the design choices that I had implemented in the HQ site. The Iconography that I had created is still being used or is a template for others to be created. And the Hero images for each page are carried over from my design and are also being used as a template for future pages.
Working at SportsEngine was a highlight in my career, and I am so proud that my work continues to influence the design of the brand.
