360Learning

Historically, 360Learning has always been a web product, with all major features on desktop. There are two major roles:

• The learner plays courses and programs, chats, and more.
• The coach or admin creates courses, follows learners’ data and answers their questions.

The product was not mobile-first: new features came to the web first, then to mobile if bandwidth allowed. The existing app let people play courses on mobile, but without a dedicated mobile experience.

The product team wanted a dedicated product designer for the mobile and tablet apps. My main objective was to create a coherent and user-friendly app that helps learners follow their courses on mobile, and helps 360Learning win new mobile deals.

1. Define the why before the how: why are we doing this, why do our learners want it?
2. Discoveries with users, and business feedback collected
3. Wireframes and user flows
4. UI and design system
5. Prototypes, low fidelity (Figma) and high fidelity (Principle)
6. User tests, remote (Maze) or in person
7. Ticket creation on GitHub, and review
8. Data (Amplitude) to analyse and optimise the design

Joining a product that is already built is always difficult, even more so with 360Learning and its many features and use cases. I spent my first weeks using the entire product, then mapped every mobile screen. It showed what the app could do, what it couldn’t, and where the blocking points were.

Based on this mapping, the data, and discussions with the product manager, we defined the key elements to rework.

Problem

The app was not user-friendly. Several ways to navigate got users lost, and finding something was hard, as discoveries with learners and in-house teams confirmed. Navigation and hierarchy called for a redesign.

Solution

We reorganised the whole app around a clear tab bar with clear sections, and kept the interface minimal to put the content forward.

Key results

We tracked mobile active users for a few months: they were multiplied by 3 on both iOS and Android. This also reflects business won on mobile thanks to the new design, as more clients meant more active users.

The player covers every activity a learner plays in a course or program: text, video, or questions to answer. It is the most important part of the product.

Problem

The mobile player was the same as on desktop: not mobile-friendly, with unadapted components.

Solution

We designed a new player for mobile, with new ways of answering, new interactions and a new dark UI. The dark background increases focus and reduces distraction during a course, and clearly separates the player from the rest of the navigation.

Key results

We tracked the number of activities played on mobile per user: it was multiplied by 1.7.

To keep the product consistent across platforms, we created three design systems: one for desktop, one for the apps, and a shared one for colours, fonts and icons. I was in charge of the apps’ design system, built in Figma with variants and auto layout.

The app focused only on learners: admins and coaches couldn’t take any action from it. We added key actions to help them follow their learners intuitively.

To increase engagement while learning, we launched challenge mode: from the app, learners challenge one or several people on a course.