e-Learning dashboard MVP
the client
A multi-brand worldwide appliances company that wanted to raise awareness about their products among employees.
the project
- Information architecture
- Gamification
- UX/UI
- User testing
my role
- Information architect
- UX researcher
- UX/UI Designer
problem statement
As a company grows, for an employee becomes more and more difficult to know all the latest products, technologies, and appliances the company offers.
To support knowledge throughout the company, our client developed an e-learning platform, combining different providers and and also being able to open it to trade partners. The program is made of multiple sub-programs, each of them focusing on different aspects of the knowledge. Features and technologies were the ones we worked on.
However, the platform needed some UX review to improve the ease of navigation, fix flow bugs, and improve the overall user experience.
Additionally, the modules used for the e-learning were fairly boring, so they needed something to spice things up.
Adding some interactiveness was their first thought. We were given four compulsory courses to work on as a trial.
solution in bits
With strict budget and time constraints we decided to split the project into two smaller chuncks in order to be live as soon as possible with a working MVP and leave gamification for later.
The MVP has been developed, while the second part is still in the approval process.
UX goals for the MVP
Redesign e-learning courses with modular system and a multi-step layout.
Integrate the system's points logic into the e-learning platform.
Redesign courses user flow to prevent lessons skipping.
Redesign a new dashboard to display user's status.
Integrate exams at the end of each course.
Create an efficient dashboard, dividing courses by status.
MVP deliverables
- Information architecture
- User flow
- Wireframes
- Hi-fi prototype
As already stated, the project was divided into two phases. During the first one, we delivered an MVP based on the research and data stakeholders provided.
We redesigned the dashboard, the navigation for courses, and its logic. The overall experience benefits from these updates.
The second phase was more about gamification.
MVP Process
Assessment
All the information came directly from the client's product manager, who informed us about users' needs, the pain points they wanted to be corrected and some future implementations they would like to have.
Our targets were both internal and external to the company, meaning we needed to design a system that was both autonomous and independent from the company's platform.
A good benchmark comparison helped us define a strategy and set a shared expectation.
Information architecture
We got a clear overview of all the problems in the navigation from CJs, so we redesigned the dashboard, adding a profile page, settings, and an informative page.
We also changed the logic in the courses' navigation to force users to read the contents and take the final quiz at the end of each chapter, plus a quiz at the end of the course.
User personas, scenarios, customer journey
This part was straightforward to outline.
Personas were fetched by the client: employees, salespersons, and management.
To sum up: anyone involved with the company.
We created a scenario for each of our personas and went through their journey to guarantee that all their need were met.
Wireframes and prototypes
We laid out two dashboard prototypes and one new navigation logic for courses.
We jumped directly into hi-fi prototypes from paper wireframes since the UI was already defined, and we just needed to comply.
solutions for MVP
Thanks to frequent iterations, we were able to provide the client with a solid foundation for future implementations.
We improved
platform usability
and
course findability.
Course navigation
has been designed to prevent users from skipping the theory and going directly to exams, gaining points but not knowledge. We achieved the result by dividind the course in chapters and allowing users to go back but not forward unless they pass the chapter test.
We redesigned the dashboard in
two versions. They have similar information architecture, but different navigations.
The first one proposes navigation based on tabs on the left side, while the second one is a classic top navigation.
Both versions have been featured with an improved
"where to start" pop-up, which provides an explanation of how to gain points and where to find more information about the platform, news, and updates.
We integrated a
notification function
with a maximum of 5 shown items, so as not to overwhelm users. Possible notifications include new courses, changes of status, and new rules added. It was possible to set a maximum of notifications to be visualized thanks to the client's constraint to create only a few courses per quarter.
We designed a
search engine
to improve findability. Courses from previous years will be visible in the collection, so it was a good idea to include a tool to make it easier for the user to find what they were looking for.
We laid out the dashboard dividing courses into
"My courses"
and
"Available courses"
as a collection of all of them. In "My courses" users can find all courses they started (as first) and completed (as second), for easy consultation.
Tags
have been created to set course statuses ("in progress, "new", and "completed") and whether or not they are mandatory ("assigned").
The logic behind using tags in a list of items is to help users filter and organize the information, making it more accessible and user-friendly.
In the section including all available courses, we redesigned
filters UI
by type ("course" or "quiz"), brand name (they may want to complete a specific brand first), and category of the appliance. Lastly, a sorting option is provided with the default set as newest first.
Each course is also provided with the
"time of completion"
information, allowing users to calculate whether they have the time needed to take that course or not. Users were asked to complete courses during work time.
The
profile section
includes a brief overview of user status such as the number of completed courses, points to the next status (each course gives 1.000 pts and each quiz 500 pts), and a profile report based on the parent program that contains a quiz about the more fitting brand for the user.
The
info center
collects all the information users may need to start taking courses and earning points, leveling up in statuses, and winning prizes (parent program).
The
settings page
allows users to decide whether or not to receive emails with notifications about, for example, assigned courses or new statuses.
We also added the possibility for users to switch countries and languages because as a multinational company, employees frequently travel to different countries. We didn't want users to be limited to German when they can only speak Italian or English, just because they're working for some time in Germany.
Try prototype version 1
Check prototype version 2
Best resolution for visualization: 1920 x 1080 px
outcome
The redesign of the website was a success in terms of providing a pleasant user experience. Users found the website easy to navigate and visually pleasing. They were able to find the information they were looking for and complete the desired actions. The website received positive feedback in terms of its overall design, layout and user-friendliness.
However, during user testing and feedback analysis, users suggested some future implementations to further enhance their experience. For example they would want to be more engaged to complete courses not because they have to, but because they want to.
The redesign of the website was a positive step forward in terms of user experience, but there is still room for improvement. Based on the feedback received, we plan to implement these suggestions in the update to further enhance the user experience.
learnings
This project provided a valuable learning experience for the team. We faced several challenges that pushed us to think creatively and come up with innovative solutions. The most challenging aspect of the project was redesigning the dashboard, which required a deep understanding of the user's needs and goals. However, the challenges we faced also helped us to grow and learn as a team, and we were able to deliver a website that exceeded the client's expectations and provided a positive user experience.
This project was developed under S'nce Group Sagl, who owns all the contents rights, and users are not permitted to use the materials (texts or images) in any circumstances and for any reason.