top of page
SportsEngine Account Menu
Timeline
October 24 - December 24
Role
Lead UX Designer
Tools
Figma
Confluence / Jira
The origin of this project was quite unorthodox, I wasn’t tasked to create a new account menu from my product manager. However, the account menu redesign has been sitting as a to-do within our backlog for ages. The redesign arose organically from cross-triad collaboration between Product, Engineering, and UX.
I was originally tasked to redesign our software’s communication preferences, whilst doing my discovery one of the biggest gaps I identified was our user’s navigation to account settings. This led me down the rabbit hole of many discussions with product and technical about navigation. I wanted to ease our user’s cognitive load when using our products and anticipate where their mental models led them to search for key pages and features within our software.
So it began, I redesigned our software’s account menu in hopes of assisting our users in navigating our software and easing the learning curve of understanding how SportsEngine functions.
Problem
Users within SportsEngine (SE) need to navigate between several software platforms depending on their purpose of using SE. A few of the platforms we offer are SE HQ (for sports organization admins), MySE (the platform where parents and athletes can manage their sports life), and Team Center (where information that is related to youth sports teams is held).
The account menu allows users to navigate to pertinent information related to a user’s account. I wanted to create a menu that surfaces the top navigation items that users are logging into our software to access first. This is to allow our users to not need to spend excess time digging for necessary information related to their accounts.
Building the account menu
There were many challenges to creating a new account menu. The largest challenge being the SE Bar, which is a top navigation bar that exists on all software platforms within the SE ecosystem. The SE Bar is described by developers as a rats' nest of legacy code that would take a large amount of technical resources to undo. This made re-coding the SE Bar out of scope. I paired with lead developers to create a solution to remake the account menu without having to re-develop the SE Bar.
The solution we came to was creating an angular element that would load when users clicked on their persona avatar. This is the same existing pattern, alleviating the user’s mental load in relearning the platform when releasing a new feature.
Designing the menu
To begin designing the new account menu I wanted to understand what were the top pages and navigation items our users were visiting. I reached out to my Product manager and UX director to receive the analytic data to understand what were the pages and navigation items were most frequently trafficked.
Once I identified the most trafficked pages, it helped me build out the items that I wanted to include within our account menu. I took the top five items that were visited and included that within the menu. After I identified those items, I built out the structure or the menu which included a list item at the top that houses the account owner's name, a link to the MySE platform where they could access all information related to their account, and a signout button.
Next was building out the menu of the top five navigation items. The first item is the account household. I wanted to not only include a link to the account's household but also give a direct link to all profiles that exist within that household. To do so, I designed that menu item to also include persona avatars that directly linked to their profiles. Including those profile, avatars is to allow users to view and modify any profile information that would inhibit the eligibility of that profile to be put on a roster and play within that team.
Existing account menu
Redesigned account menu
After I designed the account menu for our users I needed to create the account menu for our employees. Employees have additional platform access. This entails CS support dashboards, feature toggle access, and much more. Not only would this redesign impact users but also employees, therefore, I needed to design a menu that allowed for the additional account access to be able to get to those links to allow them to operate and maintain our software.
​
To design this new menu I incorporated a new section for "employee links" to give those accounts that had our "platform admin" access a direct link to our support and maintenance pages.
Release
The account menu currently lives within our staging environment. We are looking to release the new account menu at the end of December 2024. To measure the success of this new menu we will be utilizing our CS team to log any complaints or feedback related to the menu, along with Qualtrics analytics features to monitor performance.
bottom of page