Skip to content

Sgltn.UX

LMS Product Design

Client: Emtrain | Via: Emtrain

EXECUTION

Product Design • UX • Visual Design • Research • SaaS

ROLE

Sr. Product Designer

Engagement

Full-time Design IC

Project Objectives

UX, Interaction, Interface & Product Design

Emtrain is an enterprise application developed to aid in helping companies uncover HR and workplace issues in their company culture. There were three primary features we designed the application around: Q+A (Ask an Expert), Resources – to drive content discovery, and My Favorites – a feature designed to drive personalization and sharing of content.

Objectives

  1. How might we make it easy for users to trust the experts so that they were more likely to have frequent and deepening interactions with the platform?
  2. How might we provide the tools to make this an invaluable solution for companies to gather insight into their workplace culture?
  3. How might we improve the “language” of the instructions and questions in the platform so that users are more likely to continually engage with the platform and complete the modules (i.e. prevent drop-offs).
  4. How might we make courses feel shorter and present the progress a user has achieved in completing modules and/or engaging with the platform without the stress of percentages and the tyranny of metrics?
  5. How might we improve the videos in the modules or the way the videos are presented so that student users will have more frequent and continued interactions with the platform?

I lead design on this project as an IC Design Manager, working closely with the Chief Product Officer, VP of Engineering, a Project Manager and 6 engineers.

Product Strategy

Competitive Research

At the beginning of our project we conducted competitor research to determine how Emtrain’s offerings compared to its competitors. Our competitors included Traliant, LearnUpon and Navex.

We also studied other e-learning platforms to gather insight into up-to-date best practices and other areas the product could be improved. We found that the strength and differentiator for our product was in the Q&A section. We decided to focus on making this feature an anchor of the new product.

Guiding Questions

  • How do Emtrain’s e-learning product offerings stack up against similar products?
  • What are Emtrain’s e-Learning weaknesses?
  • What are Emtrain’s e-Learning strengths?

Takeaways

  • Emtrain has high quality, up-to-date video content – some of the best in the idustry
  • No other competitor offers interactive advice / Q&A for even non-subscribers
  • Emtrain’s Pre-Beta UI needs work
  • Emtrain’s Pre-Beta UX is confusing and cluttered
  • Emtrain’s Pre-Beta Course Authoring tools are complex and disconnected from the courses — separate login in some cases

Product Overview

Working with the product owner, marketing  and the leadership team, we developed a set of core USPs to guide the feature set and roadmap.

MVP Requirements

  • Advice / Q&A – to capitalize on our product differentiator
  • Resources – to provide value-added, evergreen content
  • Analytics – as a value to employers (path to revenue)
  • Favorites – personalization
  • Shareability – to stimulate organic growth of the userbase and reach
Design Strategy

Whiteboards & Wireframes

With such a major change  to the architecture of the product, we wanted to clearly map out the landscape of the product and how the new sections would be realized. Our MVP requirements had given us a framework for what we needed to build, the whiteboards and wireframes would help us fill in the details of how we would build it.

The whiteboarding sessions allowed me to brainstorm various UX solutions and decide on a concept to move forward to the wireframing stage. 

Whiteboards

We whiteboarded the key screens and user flows for the core personas with our Product Owner, Project Manager and Engineering team lead. We wanted to uncover any blindspots we might be missing in functionality or architecture.

Wireframes

From the whiteboard notes, I was able to start exploring more tangible ideas on the screen through high-fidelity wireframes.

Since the product strategy focused on mobile first, I went with more high-fidelity to better visualize the play between interactions and components. Most low-fidelity wireframes communicate function well, but communicate form poorly. This is especially the case for mobile applications that have standard interface components with a consistent look and feel. A high-fidelity wireframe of a mobile application will communicate the user interface form and function better because the wireframe better resembles the standard interface components.

My work for the design and interaction began with developing wireframes for the key flow screens and interactions for the interactive training course experiences.

Wireframes for the interactive training course module

Site map doc mapping the full product environment.

Visual Design

Tackling the Visual Design

There were many differet challenges to address while designing this app. 

After forming our research findings, I came up with design directions that tackled the problem space, and addressed the ultimate goal of improving the experience for both administrators and consumers.

Guidelines

  • Focus on mobile first. Our leadership team felt this would be a key use case for most learners. Mobile would provide convenience for the learner but could be cumbersome for the admin.
  • Provide a cohesive experience, especially for learners, so that completion of courses is effortless.
  • Feedback features and analytics are a key value for employers. Guiding users through to quizzes and surveys needs to be seamless.

 

Design Attributes

  • Clean and open
  • Friendly and approachable
  • Card based to accommodate responsiveness
  • I wanted the UI to be friendly, clean and professional without feeling cheap,templated or cartoony
  • The design needed to appeal to stakeholders as well as all levels and segments of users.

 

Onboarding

We started with an onboarding journey that provided separate flows for managers (admins) and learners. The flow allowed both groups to select topics that were relavant to issues they might care about. This allowed us to create curated content in their feed when they first dive into the product and gives them content focused on topics that matter to them right away.

Self-identifying and content seeding selections.

Self-identifying and content seeding selections.

Manager selection; Password reset flow

Extending the design across the product.

I built out the entire design system, for each module in Sketch. The source file is extensive and comprehensive. I built upon each iteration directly within the file to maintain reference to changes throughout the process.

I designed each module within the app with a mobile-first approach.  

Mobile responsive view screens.

Answers Tab

Advice Q+A Section Mobile Design

 

Answers Empty State

 

Answers Pending Answers

 

Answers Details

 

My Feed Tab

My Feed Tab Mobile Design

 

My Feed Tab Desktop

 

My Feed Tab Empty State Desktop

 

Resources Tab

Resources Tab Mobile Design

Resources Tab Content Populated Design Desktop

Lessons Details Design Desktop

Resources Details Design Desktop

 

Learner Retention Flows

Mobile Course Quiz UI

Mobile Course Quiz Results UI

Likert Scale Quiz UI Desktop

Likert Scale Quiz Results UI Desktop

Boolean Quiz UI Desktop

Boolean Quiz UI Desktop

Beta Launch

The Results

User Testing

Before releasing the beta to a wider audience, we gathered a mixed team of internal and external users to help test the product at various points throughout production. I helped facilitate what we referred to as “Bug Squashing Parties”

  • We decided to bring in live users to test the app once we had a cohesive, functional user flow
  • Both internal and external users represented our target group: Highly technical vs non-technical; Different levels of the employment hierarchy (employee to manager); New & Current users;
  • Test sessions were moderated and feedback collected online and in written notes

The Outcome

This full design and development process for this project took about 8 months. We distributed the beta among a few of our larger enterprise clients’ workforce. We were able to collect even more feedback on the beta product and refine features, functionality and user flows; we were able to get a better idea of how our intended marketing direction matched actual user experience. We circulated the beta for a few months and soon thereafter began work on a v1.

↗
View All Projects