2022

Lyearn

Lyearn assignment modules UI components
MY ROLE

Lead Designer

Timeline

6 months

Team

2 Designers
4 Developers
1 Product Manager

Revamping Lyearn’s content assignment module to enhance employee skills, engagement, and overall performance

Context

Lyearn provided a platform to deliver essential sales training and enhance the skills of employees. Each client assigns a multitude of content (assignments) to their employees and engages them to level up in the organization. The assignment module boasted the highest user engagement yet, had the lowest number of users accessing it because of it's complex process.

Problem

The assignment module needed to track assigned content progress to facilitate actionable decisions for employees at the end of each quarter. Recognizing the opportunity for improvement, my role was to overhaul the direction and management of this assignment module from scratch.

The primary objectives were to maximize engagement and provide valuable insights while streamlining the user flow. The initial hurdle was substantial: aligning hundreds of constraints associated with each content type to ensure that every piece of content could be assigned in less than two steps.

Key Issues -

  • Moving from older code system to newer one
  • Aligning hundreds of constraints with new content format
  • Adding more users to platform to increase revenue

Goal of the redesign -

  • Maximize user engagement
  • Provide valuable insights for decision-making for the assigners
  • Simplify the content assignment process

Impact

After 3 months of iterations, my role was to design unobtrusive user flows and modules that not only removed the hassle of keeping track of content assigned, but also provided actionable items to make better decisions with respect to employee engagement and progress. Here's how it impacted the business-

50,000+

New users added with the help of scalable modules

2x

More content assigned from the previous version

2x

Revenue increase within one quarter

100+

Assignments can be tracked from one page

Final Solution

Being the lead designer for the first time for this project, I took the accountability to figure out the process to redesign it from scratch. However intimidating, I was given the flexibility to iterate on new layouts and completely rethink the modules that didn't follow the components and modules of the previous version. The final deliverables that we shipped at the end of the redesign were:

Redesigned User Flow

Assigning content in less than 2 steps

Uncluttered Settings

Simplified visual hierarchy for multiple content type settings

Scalable Modules

Reduced complexity allowed for more content types to be assigned

Increased Efficiency

Simplified visual hierarchy for multiple content type settings
Before vs After the redesign of assignment module
Before vs After the redesign of assignment module

Process

Since the project migrated a lot of existing features from the old system, we tried to follow an ad-hoc method to redesign it for the new architecture. The process over the time simplified into these 4 steps:

1. Scope

Break down the problem statement to create MVP

2. Iterate

Design 2-3 solutions that provided varied directions

3. Ship

Get MVP production ready and migrate users

4. Scale

Add more content types to previously shipped version
Overview of all the content type with configuration and state level settings
Overview of all the content type with configuration and state level settings
Overview of all the content type with configuration and state level settings
Overview of all the content type with configuration and state level settings

Design output

After gaining a comprehensive understanding of the entire user flow and information structure, our next phase involved refining the user interface. This aimed at not only optimizing the existing workflow but also enhancing the contextual inquiry process. Here's how the final assignment creation, settings, and feedback flow looked for the new platform.
Iterating directions on the UI elements of creation screen
UI variations for Assignment creation form
Multiple iterations to improve visual hierarchy of the settings
Shipped final UI version of assignment creation
Initial vs Final UI of list
Tracking assignments with actionable metrics in the list format
Few UI iterations to inform the creation feedback
Assignment detail page with information about learner and content's progress

Takeaways

Given the complexity of the assignment module, and it's reliance on the overall Lyearn products, there was an initial hesitancy to try new things. But during the process, I learned to experiment and push the boundaries of user interfaces that could evolve over time and improve the workflow. Resolving the complexity  also helped me visualize design system components that could be implemented consistently across the platform.

Challenges that I overcame -

  • Scoping: Cutting down constraints that helped transition from older system
  • Handoff: Constant communication with developers helped unavoidable tech blocks
  • UI Simplification: Reusing components from irrelevant features helped simplify creation process

process

01research

insights

Checkout next project
Email
linkedin
Dribbble
Twitter