JOG.AI

Improving the Experience of Onboarding & Dashboard Interfaces

 

PROJECT BRIEF

 
 

 

JOG.AI is a startup offering an engaging conference call platform for audio and transcription services with a quick turnaround time. As the Founders launched the beta product just a week prior to meeting me, my role as freelance UX Designer revolved around quickly informing users about the unique features JOG.AI provides through onboarding screens and getting users to complete a call on their own through the home interface.


INITIAL FINDINGS & RESEARCH

 
"Our best measure of success is users performing their first unguided call. We need to provide a quick value to the user to get them to make that call."  -  JOG.AI Founder

In my initial meeting with the founders, my prompt to what UX problem I could solve was met with the quote above. With the product in the beta stage, they didn't know who their target users were and didn't have much data on how people were using it. 

 
 

The first step I completed was usability testing, observing people as they interacted with and explored the JOG.AI website. Several tests were conducted with a list of observations written, affinity mapped (above left), and eventually visualized into a graph that represented a users journey through the site (above right). The graph includes stages of the journey, experiences, observations, and impact on the user.

 

KEY FINDINGS

  1. People Don't Read
    • No direction on how to start a call once in the dashboard and no way to revisit instructions
  2. Hidden Features
    • One of the main features of the service (dropping note flags in the call) was only accessible by right-clicking
  3. Inconsistent Communication
    • Users received a text to request transcription, an email to confirm completion, but only could access on dashboard
 

COMPETITIVE RESEARCH

The next step after finding out about the positives and negatives of the current site was to explore other similar services to seek out how JOG.AI compares and how it can realize a competitive advantage. The founders provided their own research to aid in this process, and combining their info with mine allowed me to condense that data succinctly.

 
CompResearch.png
 

ONBOARDING & INCENTIVES

 

Building a user flow helped understand the deficiencies and unnecessary decision making of the original introductory flow, allowing me to create a newer streamlined and targeted version with the onboarding included (below).

 
Proposed Site Flow from Home to Onboarding Walk Through to Intro (Given Onboarding Voice Recording)

Proposed Site Flow from Home to Onboarding Walk Through to Intro (Given Onboarding Voice Recording)

 
 

INITIAL TESTING & DESIGN

In interacting with the existing site, the overwhelming response from tested users centered specifically around :

  • not knowing what the conference line was for
  • the purpose of the incentive buttons
  • confusion about things they can interact with. 

Utlilizing the visual look and aesthetic the company had already established to keep continuity, I designed, tested, and iterated several versions of the onboarding with future free call incentives incorporated to address those aspects. These versions were improved upon and adjusted throughout 3 usability tests and iterations, with the final result represented in the 5 screens below.

 

 
 

Following the login and free calls incentive screens, the onboarding consists of three parts, one each for the pre call, live call, and post call functions to help the user follow along with the important tips and aspects of each part of the service. 


DESIGN PIVOT : DASHBOARD ENGAGEMENT

 

After presenting the final results of the Onbording & Incentive based designs, the founders of JOG.AI decided they wanted to switch direction of the project to address a separate issue. Recent user feedback they received suggested that users were getting lost on the home dashboard without much to interact with.

NEW OBJECTIVE:  Rethink the home dashboard to include more actionable content. I specifically wanted to hone in on emphasizing the value of the transcription service as well as designing a self-explanatory dashboard.

 

PRIORITIZING

 

In a client meeting with the founders to reorganize, we collaboratively prioritized a list of site features that could be implemented into the main dashboard screen to drive users to make a call. Some of these included 1:1 calling, referral programs, managing calls, dropping flags, and scheduling a walk-through call. 

With these options to choose from and the instruction to include the Manage Calls module as a placeholder temporarily, I went back to the drawing board to theorize a few ways to layout the new dashboard. 

 

SKETCHES & WIREFRAMES

 

After presenting these, the founders encouraged me to continue thinking of ideas that would really guide the user towards completing an action, while keeping the simplicity and efficiency of the original screens. I decided to create three different versions of the same action-based screen (below) and tested them individually from one another to get an idea of the minimum amount of info the user needed to seamlessly understand the service.

Try Call (a)

Try Call (b)

Try Call (c)

The first screen was much too bare while the second actually made the goal more confusing as people thought the modules were part of the actual interface and not a temporary call to action for new users. However the last screen (Try Call c) started making some serious headway with the addition of the entry form and "Send" button, with one tester exclaiming:

"I'm amazed at how much that helps!"  - User Testing Subject #3

FINAL DESIGN & IMPLEMENTATION

 

After all the sketches, designs, tests, and iterations, I was finally able to come up with a solution that fit all the requirements without sacrificing a change in the minimalist-based visual aesthetic or adding more content that could sidetrack the user from the ultimate goal of the service.

Progressing from module to modal, it became intuitive that this specific action was intended for new users. If the user exited out of the modal, they could still start a call in the "Manage Call" box. Also by clicking "Tips and Features" at the top, users could still access tutorial screens and FAQs for troubleshooting.  

With the knowledge from the research and usability tests, this design successfully communicates and fulfills JOG.AI's original goal, getting users to complete their first unguided call. 

TryCallModal.png

Having concluded the goal and duration of the freelance project, JOG.AI was very happy with my effort and specifically praised the importance the research findings, usability tests, and design ideas which allowed them to reorganize and tailor elements within the site accordingly.

After a few weeks passed, I was emailed an update of new features for JOG.AI and was met with a surprise. I saw the site used a very similar version and layout to one of the designs I provided for the home page dashboard, as well as a loose version of the onboarding guides.

 
Web1.png
Web2.png
 

Its very exciting to see the effort and work presented in a real world product. Its an indication of my progress as a designer and a testament to how far I've come in understanding the importance of the UX process as a whole making a difference.

I consider this a great accomplishment in the crucible stages of my professional design career, and it seems to come full circle as it was also a great accomplishment for the early stages of the JOG.AI company and service.