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