PLANNING MADE EASY
ADROIT MOBILE APP
THE CONCEPT
Problem statement
Online training applications have a primary focus on clients and not the trainers, with trainers’ portals primarily being web-focused they are often less user-friendly. There is a need for a mobile application that can facilitate creating and managing online classes for trainers.
Goal
The Adroit application will be a trainer-focused App that will give trainers the functionality to create and manage online classes through their phones rather than having to make use of a desktop-based platform.
My Role
I am the sole UI/UX designer on the project with supervision from Hanro Spangenberg and Tessa Van der Merwe
User Case
Trainers who want to post their classes on an online platform that allows attendees to book a space in the class.
Assumptions
This is the journey from perspective of the trainer
This app links to another app for attendees and that portion of the system is not displayed here
UI CONCEPT
Name and Logo
The word Adroit is an English word that is defined as “Clever or Skilful”. This concept of cleverness or skill aligns with the basic concept of the application which is to learn and become skillful in a specialization.
The Logo incorporates a list-like design on the I and the T. This is a to-do list style and is in line with the planning concept of the application.
Colours
The colour pallet of the application is warm colours. The primary colour used in the application is lightened red. I chose to go with red as it creates feelings of excitement and passion. I wanted the users to associate their classes with these feelings.
#CE4257
#FF7F51
#FF9B54
#2B2B2B
UX CONCEPT
Site Map
FINAL DESIGN
Registration Pages
For the registration page, the user was required to input a large amount of information. In order to make this more manageable, I created a stepper that breaks the process up. This has the additional benefit that the user is aware of where they are in the process and do not become discouraged while completing the form. This stepper also allowed me to bring a fun and creative aspect to the UI of the application.
Home & Schedule Page
The schedule page is the application's landing/home page. After a user completes their registration they are brought to the schedule page. The user is then prompted to schedule their first class.
Once the user has posted their first class they will be brought back to the schedule page however the first time they are brought to this page there will be a tutorial that gives instructions as to what the page is.
Once the tutorial is complete the page will then display their upcoming classes
I made use of cards on this page so as to clearly differentiate the classes. In each card, I displayed enough information so that the user knows which class is which but not so much that they became overwhelmed with information.
When I conducted my user testing it became clear that many users did not see the cards as clickable, in order to address this I included a small view icon. I conducted AB testing after adding the icon and found that the users then understood that it was clickable.
Scheduling Classes Pages
The process of posting a class is a long user journey that is very UX-intense. For this journey, the user needs to supply information about their class as well as what information they require from the attendees of the class.
There is a tutorial screen for this page, which explains to the user what the process is as well as gives a suggestion as to what they can include in the description.
The final page on the journey is a class summary which allows the user to view the information before posting it. If there is anything that they would like to change they can do so on this page by clicking on the edit icon.
Reschedule Pages
In order to make the app as user-friendly as possible and to assist the trainers in reducing their admin, there is a reschedule class feature. The user is able to select the class they would like to and then quickly repost the class, simply altering the time and the date of the event. Should the user want to make any changes to the class they are able to edit by selecting the edit icon.
Class Summary
Once a user has clicked on the post a class button they are shown a loading screen that displays to them that their class is being posted. This loading screen was added after I conducted my user testing as I noticed users were not certain that their classes had actually been posted and needed reassurance, which this page offers.
After the class has been posted, the class summary page is shown. This is a breakdown of the class details and shows the user important information such as the date and time of the class. From this page, the user is able to share the class on social media.
An additional feature on this screen is the number of attendees and available slots for a class. This allows the user to easily see how their classes are performing. When the card displaying the attendance is clicked on a list of the attendees is displayed. With this feature, the user is able to see if they have new people in their class or if there are returning guests.
Once the user has complete this journey, there is a prompt to take them to the schedule page. This was implemented so that the user knew where to go next and did not feel lost upon completing the journey.
Calendar
The calendar is an additional feature on the app that facilitates the management of classes. On this page, the user is able to get an overview of their upcoming classes. The format of the page is based on a user's learned behavior as it has a very similar format to a Google or Apple calendar. It gives the user basic information without overwhelming them. If a user would like further information about their class they are able to click on the event and view the class details.
From the calendar page, the user is also able to directly schedule a class. The user will simply click on the date and from there they will be taken to the schedule page, which will have the selected date prepopulated. This feature reduces the effort required from the user to schedule a class as they will not be required to view an external calendar.
RESEARCH
For my user research directly interviewed trainers who have or would like to make use of online class booking portals. I wanted to understand first if there would be users who would want to use an application such as Adroit, and second what the requirements would be for the user.
I set up conversations with potential users and went through several questions, I wanted the questions to be as open ended as possible to ensure that the questions did not influence the results.
1. What training do you provide?
2. Would you offer a class online?
3. How many attendees would you have in your class?
4. What would you need to host an online class?
5. Do you have a specific target audience for your class?
6. What times do your classes typically take place?
7. What information would you need from an attendee before the class?
8. Would you want to break your classes up in any way (Jnr, Int, Exp)?
9. Is there anything that would stop you from hosting an online class?
10. Is there anything you consider to be important information?
Insights
The current systems in place are web-focused and have placed very little focus on the trainer’s side of the system. The trainers portal is often done as a second thought and has little focus on the user experience.
​
The trainers wanted to be able to schedule classes as easily as possible
Basic class and attendee management is required
​
Users want to be able to share the classes on social media
Questions