Online Academy for Doctors: icon set design and UI Design

Design for the 4Doctors web – a company specialised in professional and masters online training for doctors certified by the Francisco de Vitoria’s University.

Project overview

Role: Art director, Icon designer, UX/UI designer, illustrator.

Skills: Sketch, Illustrator, Photoshop, Invision.

Client: 4Doctors

Industry: E-learning / wellness

Link: 4doctors.science

The problem:

The web they had was not very responsive on numerous points. The information wasn’t easy to find and the conversion wasn’t very high.

Because of that fewer professionals were attracted to 4Doctors solutions because of the difficulty to use the web and to see the benefits of their trainings.

The challenge:

Create a well-structured, clear digital space with well-kept navigability.

To simplify user flow, categorise all information and create a user interface clean and appealing.

A space to attract more medical professionals and show the repertoire of online courses and masters that they could get to become better professionals.

The process

Market research, branding strategy, brainstorming, visual design, interaction design.

Market research:

Here I did an analysis of direct competitors, together with the CMO. Doing a benchmarking to define those characteristics that could be modelled and detect those that we could improve to stands up.

Roadmap:

The roadmap started by focusing on the 3 main services: Masters, Specialized Courses and Premium Membership – the company’s source of income and of course, the starting point at this time.

Sitemap:

Starting from the visual menu, I worked with the CMO to define each of the pages necessary for the website, prioritizing and highlighting the 3 described above.

Wireframes (high):

For the information to be found easily, and to reflect the values ​​of the company and connect with the user, the design had to be clean, clear and without elements that could distract from the main purpose: to generate sales.

The most important thing to promote were the 3 main services: Masters, specialized courses and Premium Membership.

In addition, we had to boost the professionalism of the site and the training education to generate greater authority.

Icon design:

All icons are personalised and have been designed specifically for 4Doctors, using a new gradient that combines the two main colours of the brand.

For dark backgrounds, this gradient disappear to gain visibility and turns into the green turquoise of the brand.

Interaction design:

The design of the different screens were detailed to the developer, page by page, element by element.

There were defined and determined the following:  the micro-interactions of the CTAs; how the elements would come in when the page load; the different colours to show that interaction when hover and in general, al the interactions needed to make the web not just easy to search and intuitive but also consistent to its branding.  

The solution

It was defined a direct and concise value proposition so that any doctor would know what this platform was about.

All the information was organized and categorized to show it clearly so that health professionals could find all the information in the shortest possible time.

As a result, there is a whole new consistent website, easy to use with new UI design elements and a clear structure that clarify the message.

You can navigate inside the screen, clicking in some areas/ buttons to see the prototype

do you need a freelance for your client's projects?

If you need creative design services for your clients, like this customised icon set, let’s video-meet for a 20-minute and see how we can work together to make your clients stand out from the competition.