Sports Team Management Platform
UX Research ∙ UX Design ∙ Usability Testing
Type: Design Clinic Client Project
Time: Jan 2020 - Apr 2020
Team: Ariel Huang, Laura Li, Stephanie Simpson, Shenhao Xie
Role: UI/UX Designer
Participated in research & testing
Synthesize interview findings
Led design for high fidelity prototype
Process:
Heuristics evaluation, competitor analysis, interviews, prototyping, usability testing
Overview:
The client is an all-in-one platform for sports teams that includes training, communication, and organization. As a startup company which hasn't had the resources to properly prioritize usability, it now has a product with high interaction cost and heavy UX debt.
The application had multiple access points — a web applications for coaches, and both iOS and Android apps for athletes and parents. Redesign efforts had been underway with the recent onboarding of a UX Director. The scope of this 4-month project focused on optimizing the two most challenged features—calendar and leaderboard—in the web application.
1. Research
We started off with a heuristics evaluation to understand the product. Then we conducted a competitor analysis to learn about competitors on the market. We conducted 5 interviews with current and potential users to understand the users.
1.1 Understand the Product
We used heuristic evaluation to identify and prioritize the usability issues in the two features.
High Priority:
Error prevention: There was no error prevention in the calendar. Users could easily delete an event or discard changes without a reminder or a way to recover.
Flexibility and efficiency of use: Some buttons visually appear to be CTAs but are not. For example, in calendar, a ‘copy’ button triggered a pop-up window with instructions on how to copy events, but it did not perform any actions.
Visibility of system status. At times, the system fails to provide expectable, informative feedback to user’s actions, and clear cues for user actions are missing. For example, when creating a new calendar event, a title is required but there is no indication until the user tries to save.
Medium Priority:
Match between system and real world: The ‘Points Leader’ concept in leaderboard was too specific to the system and vaguely defined, therefore, it is not easy for users to recognize their functionality and meaning. In addition, some UI elements fail to follow conventions, such as unnecessary “delete” buttons and misplaced “back” buttons.
Recognition rather than recall: In the “Create New Event” modal, the “More Details” button took users to a new page, requiring users to remember information they filled in on the previous page or to toggle repeatedly.
1.2 Understanding the Competitors
We conducted a competitive analysis to learn about competitors on the market and how they approached similar problems.
Key Findings:
Direct competitors had extensive functionalities in performance tracking and ranking.
Coaches could customize their scoreboards, use analytics for team performance. These functionalities gave coaches higher flexibility and extra information when tracking the team performance.
1.3 Understanding the Users
We virtually interviewed 2 current users and 3 non-users—to understand pain points of our client product, as well as how coaches had utilized tools. Themes explored included coaching experience, how team practices were organized, how team performance was tracked, and coaches dealt with rankings and competition.
Key findings:
Coaches were used to using major calendar products, such as Google Calendar. It was ideal to keep calendars for all types of events in one place.
It is important to communicate schedule changes with athletes and parents. This was especially so for sports that were dependent on weather. It had mostly been done by coaches sending a group text/message.
Coaches had differing opinions on internal competition. Some supported it as a motivation for athletes to train and improve, while others were concerned that it would hurt team spirit.
Coaches rely heavily on training records for making coaching decisions. They either used physical records or spreadsheets to track data. Overall performance and trend as a team had higher priority than who was no. 1 in the team.
Current users had a steep learning curve with leaderboard. They found it difficult to interpret and differentiate “Points Leader” and “Performance Leader”
With the interview findings and user stories already provided, we summarized two main user goals:
Organize all types of team events and communicate schedule changes
Make coaching decisions based on a high-level overview of the team’s performance
2. Design
Key ideas that emerged from our research phase included:
Use major calendar products as a reference: Following existing best practices ensured that our designs were familiar to users and less likely to have usability issues.
Use “Repeat” feature to replace the “Copy” button: The “"Copy” button wasn’t reasonable as it only gives you instructions on how to copy an event instead actually copys the event. We added a “Repeat” option in the creat event process to solve this problem.
Improve clarity of the leaderboard concept: Rename ‘Points leader’ and ‘Performance leader’, and specify how performance of each activity is measured.
Give coaches more control of leaderboard: We didn’t want the product to control how coaches foster their team culture. One way to achieve this was allowing coaches to set who can view the rankings.
Add more statistics to leaderboard: Coaches needed much more than what was available in the original leaderboard to make coaching decisions. Our competitive analysis also indicated that analytics was a core competitive advantage of similar products. Comparing individual athletes’ performance to the team average or other leagues/clubs were mentioned as valuable ways to understand the team’s overall performance.
2.1 Wireframes
After several brainstorming sessions to generate and discuss our ideas, we created the wireframes and incorporated feedback from other teams.
Feedback:
Add cues to the ‘Create Events’ modal: Users can create a basic event in the floating window and drag it to the side/click ‘More Options’ to show more details as a side window. This way, they could set up an event while referring to the calendar of events. Adding a visual cue such as an expand icon would indicate the outcome of this interaction and set up the expectation more clearly.
Use toggle button for calendar views: Since there are only three views (week, month, list), it is unnecessary to use a dropdown and require an additional click. A toggle button would be more straightforward.
Label both start and end date/time input fields: Good practice of consistency and accessibility!
2.2 High Fidelity
I took the lead on creating the high fidelity prototypes. We reused some components from redesign of other features to maintain style consistency within the product.
With feedbacks from the other design clinic teams, I made some changes to the wireframes.
Remove the “More Options” button in the “Create Event” Modal.
Originally we have a “Create Event” modal view showing some basic options and a complete side view which would appear if the user clicked on the “More Options” button. We decided to remove the modal view to simplify the process as the side view has all the event details.
As we continued to refine our vision for leaderboard, we came up with 3 different interaction patterns for how coaches access the detail ranking for a particular activity in the leaderboard.
Version 1:
Detailed ranking for a particular activity is on a separate page. There is a back-and-forth interaction between the two pages.
Version 2:
The activity menu shows the top 3 athletes with a drop down menu. There’s a “View Team Performance” button which navigates to a separate detail page, same as Version 1.
Version 3:
The activity menu shows the entire detail page as drop down menu.
3. Testing
We conducted remote, moderated usability tests on the Figma prototype with 2 current users and 2 non-users to get a mixed level of mastery on the original tool. We gave 5 tasks to assess the learning curve has improved.
Key findings for calendar:
Mental concept for ‘schedule’ did not match its designed functionality. For coaches, ‘schedule’ referred to a set of recurring events, rather than a category of events on the calendar.
Month view was preferred. This is because it shows the most recurring events.
Key findings for leaderboard:
Pattern 3 was preferred for showing performance data for all athletes. Coaches wanted to include all team members on the same page without an extra click. However, we think double scrolling could be a problem when the list gets long.
Tracking individual athletes’ performance over time surfaced as a need. This was not within the scope of the leaderboard feature or our project, but it was indeed worth exploring in the future.
X. Reflections
This project was a first experience for me to learn to interact with stakeholders to make important decisions regarding the development of a product. Originally, we were only asked to do the “design” work. It was only after we communicated the importance of research that the client agreed to include the research in the scope of this project.
One thing we should’ve done is creating personas. A set of personas could definitely help us communicate our design ideas and decisions better to stakeholders. Another thing I wish we had done is conduct more testing on our sketches and wireframes before we move to high fidelity prototypes, which could help us identify problems in the flow of our design earlier.
Moreover, the remote user testing experience taught me a lesson that we should ALWAYS HAVE A PLAN B. Technical problems are unpredictable. We could design the testing session better to prepare for these unpredictable situations.