Quotient — Streamlining training management with a custom app.

Dashboard design mockup with floating UI elements
Role
UX Design
UI Design
Web Design
Challenge

Quotient offers an scan training subscription to teams of all leagues. The company aimed to transition from web portal to a custom web application that would streamline the training request and approval process for members, as well as provide a centralized platform for internal team to manage and delegate work training.

A log in page to the Quotient's website
A mobile view of the Quotient's website

I worked for 3 months with the company founder in a discovery session to understand better and outline the problems we needed to solve together. We discovered a series of challenges we needed to face to improve the overall customer experience and satisfaction while keeping the internal team synchronized and productive with all the playlists.

  • User interface design: websites, web applications, mobile apps
  • User Flow & Information architecture
  • Create a more comprehensive brief for each scenario, which we believe will lead to better workouts and faster scan times.
A team page for Quotient's website

A user-centered approach

In order to validate the identified product problems and challenges, I conducted user research to ensure that the targeted pain points effectively addressed user problems and improved business outcomes. Our overall process had 5 stages:

  1. Product and market research
  2. User personas
  3. User flows
  4. Wireframes
  5. Design & prototype

The user journey helped us to map out better the decisions and processes the users needed to take in order to accomplish their objectives within the application. We used that information to define new user flows covering everything from logging in and registering to requesting and completing trainings.

User Journey Onboarding ProcessLog-in Sign-up Quotient websiteA training creation and completion

Mapping out the whole application

A complex application such as this requires a clear and organized information structure. Through my research, I determined the need for distinct user groups with varying levels of control and access to effectively operate the application. To facilitate this, I created site maps for each user group to visualize the necessary screens to achieve their goals in a user-friendly way.

SaaS company admin dashboard sitemap
SaaS company admin dashboard sitemap
SaaS company client dashboard sitemap
SaaS company client dashboard sitemap

Using a design system to define the visual experience

I aimed to ensure the application was visually cohesive across all of its multiple components. I used Figma to create a set of reusable components to keep typography, color, spacing, icons, and imagery coherent and appealing. This strategy helped me maintain a consistent design throughout the 100+ screens we created during the design phase.

Design system of a SaaS digital product
Design system of a SaaS digital product
SaaS company hero design
Tech company laptop design mockup
Tech company multiple dashboard screens mockup
Mobile app design of the team page of Quotient
Mobile app design of the teams section
Mobile design of a training category selection from an app
Mobile view of the training details of an app design

Next project

A review of the Wellness website design

Wellness House

Next arrow