Case-Study: Simplifying the Organization Page in an LMS Web App

It’s a sunny afternoon, and I’m sipping my coffee and writing this post with my cat snoozing next to my laptop. I’ve been thinking about my journey in learning design.

I’ve watched a bunch of how-to videos, bought some lessons, and practiced a lot every single day. Now, I see myself as someone who’s taught themselves how to do UX and web design.

As a designer, it’s important to show your design case study in your portfolio. So, here’s my case study on 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.

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.)

Define:

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

Design:

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

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.

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:

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!