Menu

CDEWorld

A redesign to improve the user-experience and update and streamline the user-interface.

Web Design Web Development UX/UI

Background

CDEWorld, one of the fastest growing online continuing dental education sites and a global leader in dental e-knowledge transfer. Their mission: to be the site of choice for oral healthcare professionals worldwide to source and complete their continuing professional development needs.

The Brief

They were looking to improve performance of their website, investigate improvement that could be made for the user experience and getting the site to better convey their company values.

Approach

An audit and refractor/recode of their website's code would help to improve the performance of the site and take advantage of responsive design the site is currently lacking consistently. A better integration of their values would be deeply intwined with solutions to make a more user-friendly approach.

Research

Needed to find out what changes needed to be made — did the layout of the site need to change, where there any section additions or removals needed, etc. I used heatmaps to track customer movement on the website, their engagement the pages, interface interactions, and their movement down the page. I used the heatmaps for 4 month to get a good median of data.

Biggest take aways: The site was getting more mobile device (tablet and phone) traffic than expected and it wasn't build to be responsive. Some aspects of the interface was confusing some people, i.e. people were clicking on unclickable objects. Most of the list pages didn't end, infinite scrolling, you could see the drop in people scrolling. The screen resolutions that were recorded coming to the site were larger than what was expected, the design was for a max smaller resolution.

Various layouts and wireframes, looking for a good balance for the homepage.

Wireframes & Prototypes

Building with the data retrieved in the research phase I set to work making numerous layouts. I got inspiration and ideas from content heavy websites, similar to newspaper or news site. I needed a look capable of holding a lot of text but not exactly similar to New York Times or Washington Post, which is just a wall of text.

Prototypes:
Version 1 Version 2 Version 3 Version 4 Version 5 Version 6 Version 7 Version 8 Version 9 Version 10

Finding the concentration points
I originally started on what I thought was the most important page, the homepage. After the heatmaps I realized that people weren't really spending as much time there and the real experience was on secondary pages of articles, webinars and events. From research these pages are the main objective of visitors to the site, I wanted to make sure the experience was smooth and enjoyable so areas of improvment were making the text legible, simplifing the visuals of the page, building it responsively and creating faster page loads.

Top: Original layout and design. Bottom: Updated layout and design.

Decisions behind the layout
Since the purpose of the secondary pages is read and scan over the information then take the quiz for certification. With this in mind I made a protoype that emphasized whatever the main content was, an article, ebook, event, or webinar. On each page a sidebar was included containing basic information, price, credits, etc and educational material such as learning objectives.

| Have questions?