Learning and Coaching PWA for Mental Health in the Workplace

Here's how I helped build an award-winning coaching PWA for Mental Health in the workplace.

watch me talk
about it in 3mins


Mental Health matters in the workspace too, workplace conflict can happen everywhere and anytime, and it’s bad for business. A lot of people want coaching to be able to to combat situations where they need professional and confidential help at work.

Research has shown that;

68% of people have mental health problems at work, yet only 10% seek help
Poor mental health costs employers between £33 billion to £42 billion a year
(Source: Mind 2018)
HMW provide people with advice and insight they need to create a workspace that thrives with collaboration.

The initial goal was to redesign EmoQuo's chatbot companion into a digital coaching Progressive Web App that empowers  managers and employees by providing insights and best advices to get support in the moment for various workspace scenarios.

(A) Learning plan : a learning module that takes the user on a journey through a series of learnings linked to our existing coaching conversation.

- The user needs to be able to see how long the plan will take, how many steps (learnings) they will need to do, and how long it will take.

- They need to see their progression, what they’ve completed, and what’s left to complete.

- They need to be able to open learning, review it, and then complete the 5 steps within the learning. When they complete it they need to be able to move to the next step and continue the process.

(B) Timeline : an overall visualization timeline of all learning plans. The user needs to be able to navigate to learning plans for this timeline.

- The timeline shows the title and a brief description of the learning plan but not the detail.

- The user can only open the next learning plan available after they have completed the previous one.

- There are milestones after a certain number of learning plans have been completed. These milestones could be ‘badges’ the user collects as they progress. They need to get increasingly harder to achieve.

Understanding the current state of the workspace

We interviewed 10 people who worked in the UK, in different positions with various range of company size and responsibilities. We found that;

Competitive Analysis

We looked into the market to examine whether there were any Learning Management Systems or eLearning platforms that were focused on Mental Health especially in the workspace.

From research analysis we found that:
-  Contrary to the initial assumptions there were actually a number of options for people who were interested in improving mental health in the workspace

-  Although those options focused on physiological influence and not on personal coaching for how to specific situations in the office/with a teammate

-  People did not have access to free and affordable coaching platforms

-  Most of them focused on Web experiences

Therefore we hoped to create a learning platform that the people problem of providing access to free personal coaching to help employees and managers mitigate / prevent work situations that affected their mental health in real time on both web and mobile devices.

Interviews and Journey Mapping

To better understand how EmoQuo's users currently learn with their coaching bot, I advocated for conducting user interviews first before diving into solutions. I also invited other stake holders to participate in journey mapping sessions with us, so that as a group, we can empathize with our users perspective and understand step-by-step how a user interacts with the EmoQuo service.


With our research findings and personas in mind, I invited our Tim, Sam and the other stakeholders to brainstorm solutions together on an online remote Thinking Caps session. I moderated this session and encouraged them to come up with; issues they identified with the experience / areas of improvement, things they liked with the platform, and futuristic ideas.

Encouraging competition to incentivize our users

While using the platform I noticed that people were more excited about the gamification ideas and the badges, as it was a way to encourage friendly competition especially when they signed up in teams. So we decided to highlight that a bit more and add a timeline to showcase learners badges and achievements both on the course page and on the leaderboard. Learners will generally acquire this badge after completing a course/program.

High-Fidelity Design

For the first iteration, my primary goal was to validate whether this learning method felt natural to employees and to ensure the content was interactive and experiential to helping them mitigate unpleasant work scenarios, when communicating with colleagues or managers and vise versa. I also hoped to eventually test the usability of the design, so that I can improve upon it.

Design Iterations & Results

To quantitatively measure the success of the design, I broke down the larger design goals into detailed, measurable ones, and imbedded a questionnaire after the testing call with each user to help me answer those questions.

Learnings & Better Collaboration

Making Dev-Handoff Easier and Natural

Concluding this project, I took the extra step to consolidate all the design components on this project and used them to build a design system that helped the developer team work better and easier for the long run. I then facilitated handoff via Zeplin.

On quality assurance we simply took screenshots of the staging uploads and compared them side by side with the design file in Figma. This was natural and easy to point out minor details like spacing and color codes and bad copy or any other minor updates that needed to be made to the platform.

My takeaways from this project

One of the most important learnings I took from this was the importance of testing ideas, as a way to not only validate decisions but also to get constant feedback (testing with colleagues) and to also confirm that stakeholders are buying into the product you’re designing.