Case-Study: Simplifying the Company/Employee Dashboard in an LMS Web App

As a self-taught designer, it’s important to show your design case study in your portfolio. So, here’s my case study on how I streamlined a company’s management of their employees in an LMS web app. Take a look!

Overview:

To simplify the organization page to make it more scannable and intuitive and less time-consuming for employers to manage their employees’ learning.

The initiative was inspired by feedback from several employers who expressed frustration with the current system’s inefficiency.

LMS Company in Mobile Mockup

My Goals:

  • Centralize Monitoring: Create a single dashboard where employers can track employee progress across all courses and locations.
  • Improve Page Scanability: Ensure the organization page is scannable, minimizing the time employers spend navigating the system.
  • Easy Management: Allow employers to quickly assign courses, view progress reports, and communicate with employees from one dedicated page.

Target Audience:

Employers managing teams across multiple locations, typically within the age range of 30 to 50, who prioritize efficiency and clear oversight of their employees’ learning progress.

Tools Used:

For the redesign, I used Figma for design and prototyping, and Asana for collaboration and documentation.

Approach:

1. Empathy: Learning about employers, user research and screenshots of problems with the current system.

2. Define: User persona, Identified key features that needed improvement based on employer feedback.

3. Ideate: Brainstorming, sorting, information architecture and user flow.

4. Design: Sketching, wireframes, creating final designs and prototyping.

5. Test: Testing and iterating based on feedback.

Empathize:

I started by collecting a bunch of screenshots showing the issues that employers are dealing with on the current organization page. 

This was done to really get a grip on what’s tripping them up and what’s causing headaches when they’re trying to keep track of their employees’ learning.

Doing this was crucial because it let me step into the employers’ shoes and pinpoint what we needed to change or improve to make their experience smoother and less of a hassle. 

(For confidentiality, some names and faces were blurred.)

Employer’s current issues with the web app

Define:

Based on my findings, I’ve created two user personas following the empathy map.

User Persona 1

Design:

I then, started with basic sketches with pen and paper. I focused on a clean, simple, but straightforward layout that prioritizes important information.

sketch-drawing-of-the-web-app-page
Sketches of my initial design

Final Design:

The final design and prototyping were done in Figma, offering a real-time collaboration with the team. 

After I designed the desktop, I went to design the mobile and check using the Figma mirror on my Android phone.

mock web app ui 2
Final Design of Web App

Test:

Finally, the feedback from usability testing led to several iterative improvements. The redesigned organization page has been met with positive feedback from employers, who now enjoy a more simplified, efficient process for managing their employees’ learning.

See some of their feedbacks below:

Ananas Aaron J. Feedback

I appreciate your time in reading this case study. Your insights and feedback are invaluable to me. Feel free to connect with me on LinkedIn as well. Have a good day!

Let’s create experiences that get results.

Contact me today.