Dartle

Sports Academy Management System

Timeline: 5 Weeks
Tools: Figma and Zoom
Team: 4 Junior UX Designers, 1 Senior UX Designer, 1 Product Owner
Role: User flow analysis, Design Principles and Nielsen Norman Heuristics Audit, Information Architecture Audit, Usability Testing, UI Design

How Did we Get Here?

Below is our tentative project scope with our client. Due to our limited time with Dartle, after our engagement - I used the research and design artifacts we created as a team implemented them in a solo UI deisgn project.

Peer Design Review Identifies Coach User Redundancies, Prompting Priority Focus

After presenting our findings to Dartle, they noted difficulty in getting customers to adopt sport lesson planning features. We've tasked Dartle's in-house UX Designer with adjusting UI design based on our analysis, while we conduct an Informational Architecture and Design Heuristics Audit.

Ideation

Proposed design solution with less interaction cost

My peers and I brainstormed a redesign solution for the calendar features in the sports lesson plan flow, incorporating insights from the IA audit and Design Heuristics Evaluation.

Here, we revamped several crucial aspects of the lesson plan flows, consolidating session naming, start and end date selection, and plan assignment to a class into a single screen.

We shared this proposed design aiming to offer Dartle a fresh perspective on enhancing their UX.At this stage, Dartle's design system was ready for usability testing.

Validation

Key Insights from Dual Rounds of Usability Testing

Round #1 of Usability Testing

Issue #1: UI does not match user’s mental model 

Examples

Difference between lesson plan, module, session, and activity.
Users had diverse understandings of lesson components.

After adding a module, most users incorrectly assumed they were on the same page, instead landing on another (adding session).

Users expected an add button for adding activities

When tasked with adding an activity in a session, the only button available after clicking “Add activity” was “customize”, leaving all users confused as they were expecting to see an “Add” or “+” button. 

Adding recurrence actually edits entire session details

When users click “Add recurrence” on the session, a window pops up with the recurrence details to edit but also additional session details that are not necessarily tied to this

specific function. It also has a header that states “Session creation” versus something like “Edit recurrence”.

Screenshots