An e-learning platform offering healthcare professionals access to curated content.

prev next
Web mockups
Pattern library

The challenge

Whislt working at DIG we were approached by Pulse learning to conduct a UX review and redesign of their out-dated e-learning platform, an analysis on what technology to rebuild the new responsive site in and ensure there was a higher sign-up rate to premium content.

User research & wireframing

By the time I joined the project a lot of the UX had already been defined, however as with any project I'm involved in I always like to question and challenge the design and offer fresh perspective. I was able to identify a few areas that I believed could be improved from a technical view point.

Pulse UX


With the wireframes in place I began to consider the UI. We already had an existing brand but wanted to look at how we could refresh and breathe some fresh life into it. The logo would remain the same but key aspects such as the colour palette and typography could be adapted.

Pulse Moodboard


With an existing colour palette to work from and wanting to adopt a clinical look and feel often associated with healthcare I began to collate some moodboards looking at clean, breathable interfaces.


The primary colours in place were blue and yellow but we wanted to bring in some striking accent colours (purple and green) that we could use to make the site look fresh and modern.

Pulse colour exploration


Initially we chose to go with the typeface lato but knowing that the focus of the site was the dashboard we switched to Proxima Nova for it's legibility at small font sizes. It's range of weights also allowed us greater flexibility.

Pulse typography exploration


The consensus from the start was to avoid using icons as we wanted the typography to provide meaning using various font weights. Any iconography we did use would become more of a feature and be more illustrative.

Pulse iconography exploration


With the visual references in place I began to design the key pages starting with the dashboard.

Pulse laptop dashboard
Pulse profile settings

We split the page sections into panels to group key content and allow them to be lifted and reused on other pages. This also allowed us to create a modular based design that would work effectively from a responsive point of view.

Pulse module

Modals were adopted to keep users on the dashboard and offer quick overviews of the CPD modules.

Pulse module progress

Colour was used sparingly to draw attention to key information.

Building components

Once the key pages had been designed and approved by the client we began to further break the designs into components that could be documented and used to design the rest of the pages.

Pulse atomic component

As there are several different content cards used across the site we wanted to design them in a way that made them flexible and reusable.

Adopting an atomic methodology we broke the cards into molecules and atoms which could then be used to create different layouts across the site.

As the only molecule that is mandatory when instancing the card component is the Card details (as it contains the title and description) all other molecules and atoms are optional.

Below are three examples of different cards used across the site. Allthough they have very different functions the aspects of the design are the same.

Pulse atomic component
Pulse atomic component
Pulse atomic component

Pattern Libraries

In order to keep consistency and avoid unnecessary repetition I set up a pattern library in sketch so myself and any designers moving forward could have a repository to pull in UI elements and components. This included font styles, form elements, buttons and content cards. .

Pulse pattern library


A requirement of Cogora was to create a source where employees could grab all brand and associated assets. With the goal to create an inhouse design and development team in the near future it was essential to also create a guide where we could communicate all are our design decisions and offer a description of the technologies and functionality included in the website. Frontify offered the perfect solution as it allowed us to define the brand, outline the UI kit and provide code snippets and links to prototypes.

Pulse Frontify

Get in Contact

Let's work together

If you like what I do and think I could be a good fit for a project or simply want to get in touch please drop me a line here.

Say hello