01 ——— MySkillCamp

Redesigning The Experience Of An Elearning Platform

Introduction

MySkillCamp is a B2B learning platform that helps companies manage and train their employees. I was contacted by MySkillCamp to work on the redesigning of their platform.

Year

2018

Work

Freelance

Link Website
picture introduction
picture introduction
picture introduction
01 Introduction

Working on the landing page gave me good knowledge to understand the target and the audience that was using the product. The challenge was to design a product used by managers and learners at the same time. The product is divided into two major parts:

introduction course
introduction camp
02 Principal tasks

Our first focus was on the studio; the principal issue was for the learner to have a clear understanding of the structure of their course. Some elements were taking a lot of space, and the learner didn’t have a clear vision of what they were supposed to do.

My first step was to determine where the main pain points of the product were and what was achievable in the timeline we had. I started my work by doing a complete inventory of what were the elements and features of the studio. From basic action for a learner to the type of content inside a course (quiz, videos, etc.).

icon research
Redesigning the experience

The goal was to reduce the friction users experienced and improve the product with new features. Learners had issues in following and understanding the course, managers were having trouble managing their leaners.

icon wireframe
Adding features

While we were redesigning the product, we had to add new features to the platform. Shipping features to the old platform and designing some new functionalities for the upcoming interface.

icon prototype
Building documentation

Creating a solid foundation for new colleagues to understand how the product works, helping us on decision-making, and creating processes were all the things we needed in this documentation, aside from the assets library.

03 Redesigning the product
Timeline

Since they already had a product redesign a year before, I took some time on the best approach to rebuild this product. I started by inventorying features, interface elements and interaction. I built a sitemap and created UX documents such as user stories to ease the communication between marketer, management and developers.

process
Product Sitemap

Working on a product sitemap allowed me to understand the goal of every page, which actions were linked and the most common way to perform an action.

product map
Building User Stories

Building user stories helps a lot during the whole process of creating new features, it also helps to communicate with other members of the team and the client.

user stories
Wireframes

There were two main interfaces for the product, camp and studio. Camp is where is your course as a learner and your colleagues are. The studio is where you follow a course. One of the difficulties of designing the studio was to fit in a lot of interaction and content without disturbing the learner. We tried to have a main frame where all the course content is and a sidebar that allows you to navigate through the course.

interface wireframe
Wireframing
interface wireframe studio
Wireframing work for the studio
Design

CCleaning and uniformising all the user interface elements was one of the goals, reducing the number and variations of elements. We needed to have a consistent identity with the landing page.

ui course
Your course
ui admin
Admin & management page
studio
Studio
ui questions
Different type of questions
Mobile app

We extended the platform to a mobile application. Learners needed to have access to their course while being on-site, or so they could pursue their learning while travelling for work. On the mobile app, you were only able to follow a course.

mobile app
Mobile app sample screen
04 Adding features

In addition to dealing with shipping features on the old platform for a couple of months, one of the challenges was to create a process of creating new features, from understanding the client’s needs to creating the documentation so everybody would be aware of the questioning behind the decisions.

feature process
A few of the features that we shipped

Alongside with redesigning the product and building documentation, I helped to create several new features such as:

  • Rate a course

    Allowing learners to rate a course with a questionnaire at the end of it

  • Mentoring

    Connecting people inside the platform to exchange knowledge

  • Dashboard

    Creating a page summarising the activity and news for the learner

  • Onboarding

    Helping a new learner or manager to understand the platform

  • Events

    Adding an event element to a course to create an on-site event

  • 05 Documentation & Design System

    After some time working on the product, I decided as part of the mission to build the documentation and design system. It would help me to communicate, ease the process of producing features and uniformise all the assets in the product. We mostly needed a place where we could put all the knowledge and thinking when we were working on new features.

    design system explanation
    Sample of elements in the design system
    design system sample
    Using Notion.so as a cross-knowledge library (functional and technical)
    Design System / Atomic Design

    Creating an asset library with Sketch was a challenge. Thinking about how to organise your work for the next designer was a tough task when you are the sole designer on the team, so I tried to match how the development team was working.

    interface color
    Color
    interface icon
    Icon
    interface design assets
    Design assets
    interface menu
    Contextual menu
    Thanks for watching! Back home