← Back

Resume Contact

EasyPractice: Modular design

Role

Visual & UX Design

Client

EasyPractice

Link

easypractice.net

EasyPractice needed a redesign of their website. They wanted unique landing pages for all of their +30 professions. I designed a range of modules inspired by Atomic Design, so they could customize the specific landing pages as needed.

Intro

I was approached by EasyPractice, a booking platform for therapists and clinicians. They have been growing fast — 6.000 clients in over 12 countries — and wanted a redesign of their website.

The old site was a one pager, without much information about the possibilities or how different kind of therapists and clinicians would benefit differently from the application.

These were the problems to solve:

  1. Make it easier to understand what features the application has and what they do

  2. Show how the application can benefit you, no matter if you are a psychologist, acupuncturist, coach or some other professions in the industry

Defining what’s needed

These problems could be solved with the same method: A specific page for each feature and for each profession.

This would provide great value for EasyPractice, since it would be a lot easier to market towards a specific profession and send them to the relevant landing page. It would also increase their visibility in search engines.

The solution sounds good, so how do we do it? It comes with a new challenge I had to tackle: How do we make over xxx more than xxx 35 pages, without having them being too similar?

This lead me to…

Modular design for unique pages

After testing a couple of different ideas, with content from a few pages I quickly realized that the content was too different to fit into one template. I had to come up with a system that would support all types of content, without being too heavy on the design or development part.

This lead me to a modular design approach inspired by Brad Frosts’ Atomic design. I mapped out all the different kind of content any page could contain and broke them down into smaller pieces.

If we talk atomic design language I build organisms (modules), that the client themselves could use to put together different templates and achieve pages with different content and layout.

To test out the different components and how they could work together, I started with some lo-fi wireframes.

Lo-fi wireframes of the organisms

After the initial wireframes, I could see that the organisms worked well together, as long as the person setting up the page was thinking about how they would structure the page.

I then moved on to the visual design. I went for minimal design, so the important thing would be in focus: The content.

The visual design for the different organisms. It was designed to fit into the existing identity for the company regarding colors. fonts and icons.

When the modules were all in place, I moved on to the rest of the pages. These pages were more “standard” and I will therefore not go into the process, but here are some visuals.

Different pages of EasyPractice

I was the sole designer on this project. The development was handled by HTML24.