Project Introduction

Redesigning an education platform dedicated to training employees through nano learning and gamification. A product improvement that thousands of employees benefit from each day.

Client — Learnio | Education (B2B) | 2022-2024 (Ongoing)

Team — Šeherzada Mujkić - UX/UI Design, Ademir Alimanović - Lead Product Designer

A tedious process? Too much work? - Well, this platform aims to create an efficient learning experience for busy employees, while keeping education creation simple. It consists of a mobile app for learners and web app for admins and learners.

Our redesign included a complete UI revamp, improvement of UX flows recognized by client needs and an in-depth gamification experience. Together with the Lead Product Designer and stakeholders, we planned out the approach towards the redesign.

Learner web dashboard: After the discovery session and platform analysis, we concluded that the Learner side would be enhanced by a revamp of the old UI, a detailed learner profile overview, insights into the learner's progress and an interactive gamification experience through badge reward systems and ranking.

Admin (Educator) web dashboard: Due to the constant rise of learners, we improved the Analytics overview of existing educations and learners. Additionally, we expanded functionalities within the create new education flow and created designs for badge management and employee surveys.

UX gamification: We first did an in-depth research about gamification reward systems, best practices for enhancing user engagement and competitive analysis. This was followed by iterations of defining the badge UI style, reward system logic and how it would be managed by the admin.

We tackled redesigns of entire pages on both Educator and Learner side, including refinement of smaller areas such as creating custom badges and animated illustrations for enhanced interactivity. Our aim was to enrich the platform with new features to ensure a more efficient learning experience.

The initial Learner side of the dashboard had a very basic UI in dark mode that didn't show much data. We introduced a clean, light mode UI that allowed users an overview of educations by status and their progress.

Education details used to be displayed in a dedicated new page; in order to decrease the friction, we introduced a side modal approach. We enhanced the information structure, making sure data is arranged by importance and close education expiration dates are more visible so users don't miss them.

The most personal side of the dashboard is the learner profile. We created a compact design with the use of widgets that display learner details, an overview of their collected badges, list of completed educations along with a weekly or monthly completion percentage overview.

One of the crucial flows for Educators is creating and publishing educations. Our aim was to make the flow friendly for new educators and to add more layering possibilities when creating educations.

We enhanced this experience by making sure all steps were divided clearly, main CTAs were easily accessible and additional documentation could be attached. Educators gained the option to divide their education into sections, allowing them to educate workers on multiple topics within one education.

Getting real user and client feedback is key for further product improvement, where they get to communicate their needs and real use cases they encounter. This led us to crafting a design for Surveys, which Educators could use to collect relevant data from employees.

The Educator can add questions, visuals and preview the survey prior to publishing. Upon receiving answers, he has a dedicated view to go over answers in different granularities. Learners have a dedicated view for filling out surveys on their part, where we focused on creating a solid visual hierarchy.

Gamification reward systems: I got a chance to expand my knowledge about the role of gamification in UX. I researched the psychology behind the best practices in well-known apps. It was also a fun opportunity to explore different styles of badges and illustrations which would fit into the new environment.

Survey UX: Surveys were a challenge in two aspects; one being the Survey preview - where we did multiple iterations on the best visual hierarchy, so that users are visually focused primarily on the questions. The second challenge was creating a well-structured survey answers overview on different granularity levels.

Dev team collaboration: We used this project as an opportunity to develop a more efficient implementation review system within Figma, where developers could easily keep track what changes need to be done.