About AI Coaching (PWA) APP

AI Coaching Chatbot is a web-based digital coaching solution, designed to help sales professionals further develop themselves.

Overview

Through personalised action plans including regular live coaching sessions with a top sales coach and practical training with the digital coach-bot, the Digital Coaching solution from AI Coaching is based on following key features:

Chatbot

Activities

Appointments

Chatbot

The chat-bot can be considered to be the main feature in the APP or where the main interactions by the users are performed. A few of its interesting elements are the free chit-chat as well as activity sequences with challenges and reflections.

Activities

The acitivities section begins with the Modules that are attributed to a user, and inside each module the user will have a series of interventions to perform.
These interventions are all based on a challenge and a reflection for the users to complete.

Appointments

The appointments feature provides many tools for the users, from being able to book their 1on1 live coaching sessions with their personal coach, seeing an overview of their upcoming and next meetings; and also the ability to reschedule a meeting if necessary.

Use-Case Study

The Task: Upload deliverable files

The requirement prompted was for there to be a way for the users to upload deliverable files in the on-going chat-bot conversation, during their moment of challenge/reflection of an intervention.

Initial Assumptions & Ideation

I started out by documenting the process, noting down the requirements and commenting questions that came to mind regarding the functionality of the element, which were clarified in a meeting with the rest of the technical team (a full-stack developer and a Data & Machine Learning Specialist), therefore refining the requirements for the UX and UI specific related tasks.

Is this mandatory?
- If yes: makes sense for the type input field to be disabled;
- If no: In this case, shouldn’t the user still be able to access the type input field and what happens in case the user doesn’t upload a file and continues the conversation with the bot?
Will the users be able to access these deliverables post-upload “somewhere” in the app?
- Yes: IM-420 As a coachee, I want to see my deliverables on the sequences overview
- Users cannot remove or change uploaded deliverables
- Users can upload new files in the sequences overview

Research

I then moved on to perform some research on similar functionalities through apps like Whatsapp and Facebook Messenger; and I also searched for some interface inspiration on Dribbble, to get visual ideas on how to best integrate this functionality with the current systems style.

User-flow

After understanding the intended behaviour of this new fetaure, I created a top-level user-flow map to better establish a list of the functional elements we would need.

Low Fidelity Wireframes

First Case-Scenario Study

Next, I moved on to creating some low-fidelity wireframes, focusing on highlighting the new feature-element within the chat-bot conversation, whilst also directing the users attention soley to this action.
In a first case-scenario, I approached a more similar behaviour to Whatsapp file uploading feature, where the user has a “call to action” which opens a pop-up with different file types to choose from to upload.

First Case-Scenario Study

Not quite satisified with this first scenario (seemingly having too many “clicks” throughout the uploading process), I proceeded with ideating (IDEATION 1) a new scenario, where instead of a main “call to action” which would open the different file types the user can upload; the different file types (in this case: images, camera photos and document files) would be directly displayed in the upload feature-element, avoiding so many clicks along the process.
Later on, after sharing these wireframes with the rest of the technical team, we all agreed that image files and document files could be merged together (IDEATION 2) since we will be using the users default systems software to select the files, and in this case, it would be the same for both image files and documents, creating a simpler and less clutered version of Ideation 1.

Visual Elements

After the whole team had agreed on going forward with IDEATION 2 of the second-case scenario, I proceeded with creating the visual elements. For the feature-element itself, I reused most most of the style from a previous feature we developed, therefore the typography, buttons, colours and some of the icons already existed in the current AI Coaching design system style guideline, allowing us to maintain visual consistency. However, for the file-elements, it was necessary to create some additional icons.

General Files

Images

Camera Photos

PDFs

High-Fidelity Mockups

To finalise, I proceeded on to designing the high-fidelity mockups, adding the new feature in the chat-bot screens. I also went ahead and designed a few scenarios that had previously been discussed in some of the meetings between myself and the rest of the technical team like: an error in the file upload; the success of a file upload; the loading on a file upload, and the file thumbnails after being uploaded into the chat.

Side note: User-testing and prototyping were not applicable at this stage because this was a necessary feature for the users to provide their file deliverables from the requested exercises. Nonetheless, I can see the potential need for user-testing regarding the visual elements/style; to better understand if the ideation is clear enough for the users.

Personal Notes

Overall, I am happy with the final results as I believe we achieved a simple and easy-to-use functionality. However, there is still some work to be done in order to conclude this feature, like for example the error warning messages in case “the file size is too big” or if there is a “technical issue with the system (generic error)”, which I look forward to resolving in the next stage.

Contact me hei@cristinatulcidas.com

Find me on Linkedin

Read my Articles on Medium