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.
CDEWorld needed an improved digital foundation to facilitate the increase in mobile and tablet traffic. With this improvement they also wanted to identify user experience improvements, develop a site that better conveyed their company values, and have an audit of their development practices and assets.
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
I needed to find out where the problems in the site were. I needed many questions answered — what pages were performing well or poorly, finding out what changes needed to be made, did the layout of the site need an overhaul, did any sections need to be added or removed, were users getting stuck on certain areas, etc.
To answer some of these questions I used Ptengine and utilized their heat maps for 4 months to get a good median of data. Using heat maps to track customer movement on the website; their engagement with the pages and interface interactions; and their movement down the page.
Biggest take aways: The site was getting more mobile traffic than expected. There were aspects of the site that were confusing to people, people were clicking on unclickable objects. Any page with a list was using an infinite scroll and having a sharp drop in people scrolling. The screen resolutions that were recorded on the site were larger than the design was originally created.
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.
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.