Jaster Athletics

Product Embodiment

The design of a new mobile app feature from the ground up for Jaster Athletic's JABA AI.

Overview

Role

Lead Designer

Timeline

May 2024 - Present

Deliverables

UI Mockups

Tools

Canva

Figma

The Problem

The JABA app is a mobile platform that assists college athletes with NIL brand deals. In order to promote productivity, management wanted to integrate a new calendar feature within the app. This feature aims to increase user productivity and transparency. By having the user input any upcoming event, it would also give JABA’s AI assistant access to due dates and other information that it can use to tailor task lists and daily goals to the user’s upcoming schedule.

My Role

I was selected by upper management to tackle this project by myself. It was a huge task to take on, but I loved being given complete creative control over my workflow and design process. After I had completed my research and design phases, I was then given the position of product manager over the calendar feature. I oversaw its Figma prototyping, development, and implementation into the app.

Project Goals

Create an intuitive system based on user expectations.
Design iteration from competitor criteria and user needs.
Design for two user bases with their own products (JABA athletes and JABA admins).
Ensure quality assurance and testing after design.
Oversee the feature to maintain the goals of the original system throughout its prototyping and development.

Abstract

This project let me follow my own desired path to a final mockup design. I relied on competitor analysis to establish base points for the feature. Those points informed the feature’s acceptance criteria, along with input from a management leader. Form there, I was able to put together a user flow diagram to visualize the feature’s structure. I used systems thinking and my analysis to inform a final mockup design. For this deliverable, I was focused on delivering a functional design with a clear system behind it. I then project managed the company’s UI designer, development team, and QA team as the feature moved through these stages of workflow. My calendar design system can now be seen in both the mobile and desktop JABA products.

Let's get into the details

Competitor Analysis

Overall, I looked at 16 different mobile calendars to fully understand the different systems, approaches, and aspects that other companies have had success with. I got the whole product team involved here, having my coworkers send in all of the mobile calendars that they personally use. Casting this broad net allowed me to note down interesting features to try out later in the ideation phases.

That said, it was Apple and Google calendars that were the most influential to me. Considering the size and success of these companies, I know their features have gone through intense UX study and have withstood massive trial and error by their massive user base. That makes them leading references for a feature like this that needs to be reliable.

For the JABA app, the calendar feature is not what sets the product apart or draws new users in. Rather, this is a feature that should function exactly how users expect it to, because any confusion could lead to users missing important meetings or due dates. Analysing widely-used products like Apple and Google calendars show me what it is that users expect from a calendar feature.

Acceptance Criteria

My supervisor gave me specific criteria that he wanted to see in the feature. With his expertise and understanding of the user base, I highly prioritized this input. I found additional elements in the competitors I was referencing to enhance and add to the elements that he wanted to see in the final product.

From my analysis, I collected a list of more elements that are important to have in the feature. These came from the competitors I looked at, as I noticed overarching themes and structures that make these products work for their users. The final list (shown below) is intensive, and shows how complicated a simple calendar feature can get.

Supervisor input

A way to connect a campaign to a calendar event
Way to go to a connected campaign from the calendar flow
Event types/categories: event, task, payment, meeting
Color-code event types
Color-coded dots that show event types on each day (week and month view only)
Special day view screen when there is nothing scheduled on the selected day (boolean value)

Competitors

Ability to add a new event
Create event flow
- Required input:
  - Title
  - Type
  - Time / due date
  - Repetitions (“Does not repeat” as the default option)
- Optional input:
  - Description
  - Campaign link
Day view calendar
Week view window at the top of the day view calendar
Month view calendar
Full event details page
Settings
- Add/remove event categories
- Add/remove event reminders

Systems Thinking

In making the acceptance criteria list, I had to consider the system behind the elements that would be on the page. It forced me to think through each aspect of the feature. For example, my supervisor wanted to create the event categories “event, task, payment, and meeting.” Some questions I had to ask myself were:

Is event type a required input? If so, what is going to be the default event type?
Can a user add their own categories? How?
Can a user modify the default categories?
How does the event creation flow change based on the event type? Will they need different inputs (task needs a deadline, meeting needs a span of time)?
Do different event types need different push notification settings?
How do calendar tasks integrate with the task feature?
Should these categories be the same for both the athlete and admin versions? (considering two different user bases/needs)

All of these pertain to the unseen system that controls the user experience. I’m not wondering “how should I display the type of event for the user?” or “which colors should I use to denote each event type?” These are design-based questions that need to be held off for later.

User Flow Diagram

I started thinking about the flow of the calendar feature, and wanted to see what that experience would look like for the user. I created a user flow diagram to map out the specific screens the flow would need, the back end processes affecting the flow, the user decisions affecting the flow, and the connections to external flows. This was a vital step to get my thoughts out on “paper,” and start to flesh out a user experience.

JABA calendar feature user flow diagram and legend.

Final Deliverable

At this point, I was ready to put it all together. The user flow diagram told me exactly what screens I needed to design, and the acceptance criteria told me what information needed to be displayed in the flow.

The final deliverable for this project is UI mockups that I can hand off to the company's UI designer for final prototyping. I created my version of the screens in Canva, not worrying about the specific dimensions of screen size, margins, padding, etc. Instead, I focused on delivering a functioning design with a clear system behind it. I delivered an experience that will be intuitive for smartphone users familiar with other calendar features.

Close up of a few key screens from the final deliverable.

Final deliverable, mockups of all main screens.

Implementing
Further

After the delivery of my final mockups, I was placed as the manager of the calendar feature. The feature was prototyped by the company's UI designer, which I helped guide by giving 5 round of feedback. I wanted to make sure that the system was preserved, in the final prototyped, but let the UI designer take creative liberties with the visuals. I then oversaw the development and implementation of the feature, helping with quality assurance and bug reporting.

My calendar system went on to be implemented in JABA’s desktop product as well. I was given the same role in this process, designing new screens and user flows based on the existing system, focused on cross-compatibility. I then oversaw the prototyping, development, and implementation of the feature in the same fashion that I did for the mobile version. Today, my system lives on in both products.