Optimizing the coaching experience.
A web app designed to help Coaches manage their bookings and clients.
.png)
The final design
The client
NWOW is a subsidiary company of former employer Inovirtue. NWOW offers businesses personalized coaching development strategies for employee growth.
The main digital product is a web app that provides Coaches and their Clients the ability to book and conduct online video sessions.
Challenge
To design a way for Coaches to prepare for and manage their coaching sessions and clients.
Team
UX Designer x 2
Head of UX
Timeline
July - October 2022
alongside other projects
Responsibilities
I was responsible for the UX and UI design on this project. Solely accountable for the discovery, ideation and the design phases, which consisted of conducting user research, creating user flows and a sitemap, designing the navigation, content, and prototyping and the final user interface designs.
Whilst working with my UX designer colleague to plan, organise and conduct moderated user testing sessions.
User Research
The main goal was to understand the Coaching process from beginning to end. Having conducted initial web research, I prepared a script and conducted an hour-long remote user research session with an experienced coach.
Key insights
1
Taking notes
Coaches often take notes during and after sessions. In order to refer to them before the next session and to keep a record of the clients progress.
2
Client information
In order to prepare for a first session, Coaches require basic information about the client, such as name, age, occupation, personal and professional challenges, and coaching goals.
3
Time management issues
Coaches often work as freelancers for different companies, so struggle to manage appointments and clients.
Ideation
The next step was to set out solutions that would help the user manage their clients and appointments. These are the main feature solutions:
Overview page
Which contains upcoming sessions, alerts and add task reminders.
Clients page
A list view all of clients, enabling the user to filter, sort and search for clients.
Client detail page
Displaying the client's basic details, goals and progress.
Note taking feature
To enable the user to take, save and view notes during and after a session
Sitemap
Mapping out the navigation and structure of the pages.
The UI design
The design phase consisted of designing the user flows, responsive web design layouts, and features. As well as designing the navigation, main pages, and subpages.
This is the initial design of the homepage prior to user testing:
.png)
The UI design prior to testing
As the branding was not yet established the typography and colours were kept neutral, therefore Roboto font and the primary text colours are black and secondary dark grey.
To highlight a few of the design principles, hierachy was applied to the next session section, placed at the top of the page, as it is the most important event for the coach.
.png)
The next session information is placed in a container with a drop shadow to differentiate this section from the less important items. The design is simple by utilizing white space, so not to overwhelm the user.
The main call to action button has a tomato red accent colour for emphasis.
Components
This is a sample of custom components used in the designs. The components are saved in a custom components library that my colleagues and I design and manage, which are used on multiple products.
Atoms
Molecules
Organism
User Testing & Findings
We created a test plan and script and mobile and desktop prototypes. Using testing platform Userlytics to conduct the moderated sessions with four coaching experts.
Findings
Applying the Jacob Nielsen severity rating scale to assess the findings we found that the users were able to navigate without any issues.
Some minor usability issues were identified. Issues such as users requiring further explanation on certain features and having difficulties reading certain areas of text.
Design improvements
Design improvements
Next sessions
Users experienced difficulties identifying when the next session would occur
.png)
Users struggled to understand the notes section. In hindsight, for user testing, it would have been better to add example text rather than lorum ipsem.
Improvements
​To emphasis the date and time, the font weight and colour was adjusted, in line with WCAG accessibility guidelines, and given a grey container.
A descriptive title and icon added to the notes section.
Client stats
Users required further explanation of what the statistics meant.
Improvements
Title was changed to Client stats, to be more descriptive
A hover state was added, with an explanatory tooltip, to each of the statistics.
.png)
The font weight and colour adjusted in line with WCAG accessibility guidelines.
Final design
I thoroughly enjoyed each step of the design process, in particular conducting the user research. Insights from the session had a significant impact on the design. For instance, learning about the importance of taking notes during and after a session and that a note-taking feature would significantly enhance the user's experience. In hindsight, it would have helped to have conducted more sessions with Coaching experts, however, due to budget and time restraints, this was not possible.
The designs are currently in the backlog awaiting to be handed over to the developers.
