UX and product design for learning platform

With most users accessing the platform via mobile the design needed a complete rethink, including user journeys, user behaviours and wireframing before creating a high fidelity prototype.

The problem

There were three key problems that needed addressing. These were identified by user feedback, user behaviour via Microsoft Clarity and business objectives.

  • User feedback disclosed that they didn’t know how to navigate to other videos and couldn’t find information related to the activity, such as downloads.
  • Microsoft clarity helped us identify where the user would drop off, areas designated for navigation not being used at all and very little scrolling below the fold where lots of vital information was missed.
  • The business objectives were to keep the user engaged and if not already to subscribe to a free account.

The Design Process

In the initial stages I worked on user journeys and simple wire framing to understand the scope of work required, keeping in mind the 3 key areas that could make or break this new redesign.

  • It is through videos that the user learns – so immediately that had to be front and centre to the design. How the user then knows the entirety of the activity I included tabs that would form the main navigation of the activity. Nothing can be missed. To really get this across so the user really cannot miss out on any part of the activity, I added a footer navigation bar allowing 5 nav items to be seen at all times. The video and tabs would remain in fixed positions so along with the footer nav this crucial element cannot be scrolled away. I.e the user never loses sight of these elements.
  • Desktop heatmaps showed that users simply were not engaging with anything below the fold on desktop and not a single scroll to the bottom of the page – so we had to rectify this. Accordions are a really neat and user friendly way to group things that can be expanded and minimised, so the video links were placed in an accordion below the video that would stay above the fold on both mobile and desktop.
  • I noticed for some reason the activity page did not share the same top navigation as its home page, so by simply adding this there is the option for the user to navigate away from the activity but stay on the site to find other useful content and learning activities. This is also included in a ‘you may also be interested in’ section with similar activities and content such as journals and articles. Presenting this section as a horizontal scroll allows for several opportunities to keep the user on the site.
  • Several opportunities are presented to the user to create an account in order to take advantage of existing benefits such as use communications and a few new benefits I put forward, such as a note taking tool, keeping a record of learning credits and creating a watch list.
  • Most traffic to the activity is via social media or direct mail. So to give the user a familiarity of what they have clicked/tapped on and where they have ended up, the social and email designers create a thumbnail that has the same look and feel as their social/email designs.