Overview

CPD (Continuous Professional Development) was something medical professionals would find less engaging, while it is a mandatory process of their career and plays an important role.

I was part of an exciting start up project to create a web app to change the way medical professionals undergo CPD processes.

In this project, there was a lot of design outputs required — mobile, desktop, light and dark mode — which was a challenge. In the design to build phase, I had amazing collaboration with a designer and developers, which helped us overcome the challenge.

Challenge/ problem

CPD (Continuous Professional Development) is a mandatory learning for professionals in certain areas, such as healthcare, law, accounting and so on. Existing CPD tools back then did not offer great user experience, which was causing the process to become more of a ‘tick-off’ exercise. Professionals struggle to stay engaged especially with their busy work and life.

The founder came to us with an ambition to change the way medical professionals undergo CPD, from her personal health journey she has been on. Though she already had a tool called Eduvidd, she needed a whole new platform built to address the needs.

So, our goal for this project was to recreate the CPD platform. Our high level goals were to:

• Make the CPD process more engaging.
• Create an accessible platform that users can use for anything CPD-related.
• Make the platform medical professional friendly.

My role

I led the design process of the product, while working closely with multiple developers and a product lead. I also collaborated with another designer on the interface design.
‍
What I worked on includes: user research, wireframing, prototyping, branding, custom design system and marketing design.

Kick-off

To narrow down our target users, we decided to focus on nurses for our first user cohort. We created experience maps to visualise what we knew then. We then conducted user interviewswith several nurses to explore how they currently undertake CPD.

Discovery & validation

It became clear that the CPD process is quite broad and some parts of it are mandatory or have to be compliant. All nurses have different processes - some use laptops and others watch some videos on their phones. Based on what we learned through the interviews, we updated the experience map to complete the high-level process flow of nurses.

Before we could start designing the app, it was important for us to upack what should be the core features of the product to begin with. We created an opportunity solution tree to lay out all the opportunities that we can focus on. A snipet of the tree is shown below.

Some of the features we decided to focus on include: searching for contents, consuming contents, completing assessment, completing reflection, recording CPD, viewing CPD history and managing learning plans.

MVB (Minimum Viable Brand)

Eduvidd originally had a brand, but we made a decision to launch a new brand to better cater for the health specific market.

I ran brand workshops to decide what the best approach is. Our thought was that we should create a brand that is versatile enough to fit in the branded house approach for its future vision - to roll out other sectors, such as legal/law (mylawPD), engineering (myengPD) and financial services (myfinPD).

I created moodboards for a couple of different directions and mini stylescapes. We wanted to make sure that the brand works nicely within the branded house approach, so I mocked up several future designs for other brands.

Below are part of the iterations that I went through during the branding phase.

Creating a logo for this brand was a fun part. The founder loved the idea of having an elephant as a logo mark, as elephants are a symbol of wisdom and power in some cultures. I sketched a lot of elephant logos, mocked them up and came up with the logo mark that is in the shape of an elephant and also has a 'P' of the brand name (myhealthPD) in it.

‍

After several iterations, we decided on a brand pack that includes a colour palette, typography, logo etc. The colours are something versatile enough to create dark mode UI that the founder wanted to offer to users. With the founder’s vision of making the brand more approachable and welcoming, we also had a mascot character created by an external artist.

A few pages of the brand guidelines that I created is shown below.

Initial app design

Luckily, we had a SME who worked closely with the founder and had an ability to ask about more technical topics, such as specialties, categories, and compliance to help us establish the structure of the app. Once we had a good understanding of those, I started with the low/mid fidelity wireframes.

We conducted usability tests with several nurses and other medical professionals. The test results were positive with feedback for minor changes.

Custom Design System

In the meantime, I started developing a custom design system with a front-end developer. Prior to the build, we, as a team, decided to use Tailwind CSS and develop a custom design system since we needed to create a lot of custom designs, with the largest work being the card design.

The below is a few parts of the design system in Figma.

High-fidelity design

When I started the design phase, I had a lot to design — low/mid fidelity, high fidelity, mobile, desktop, dark and light mode. This is when I had help from another designer, so we can make sure to keep the quality of our crafts while keeping up with the speed of build.

So, in pararell I collaborated with the other designer to create high fidelity versions of the app based on the brand and design system developed up to the point.

Creating a custom card design that is responsive, easily consumable and works for both dark and light mode was not an easy task, but there was a lot of iterations and collaborations with the designer and developer, which made it fun and rewarding.

Go-to-market Strategy

Prior to launch, I worked on the landing page of the product and EDM design as part of the go-to-market strategy to fully enable the founder and team.

The landing page was designed with various feature visuals to give the potential customers a sense of excitement.