Compass LMS Redesign

Overview

Lighthouse Labs, a once-startup company, embarked on a transformative journey to modernize its in-house learning platform, Compass. Since its inception in 2013, Compass had remained largely unchanged, created by a team of software developers with no prior involvement of product designers.

The primary objective of this project was to breathe new life into the Compass platform, with a special focus on enhancing the user experience and user interface, beginning with a revamp of the Flex Program within student profiles. This case study outlines the remarkable journey of reviving an aging platform to meet the evolving needs of Lighthouse Labs' students.

Role

Solo Product Designer
Double Diamond Process, Wireframes, Usability Testing, Prototypes, Design System, Handoff

Duration

Jun 2022 - Apr 2023

Context

My Solo Mission

Lighthouse Labs is an online bootcamp that teaches web development and data science. The bootcamps have small class sizes and on-demand mentorship from a community of full-time developers.

I was the first and only Product Designer at the company, working under the umbrella of the Learning Experience Designers and reported directly to the Director, Learning Product.

In recent years, the company has experience an exponential growth. Primary users were demanding improvements overall. A platform designed by software developers was falling short on a user-centered approach. The platform was designed using old Bootstrap framework and lacked a quality user experience.

The Process

Laying the Foundations

The Product Design Process I implemented at Lighthouse Labs was based on the Double Diamond framework: Discover, Define, Ideate, and Implement. My goal was to the set the foundations for all of our upcoming projects.

Understanding the problem

Goals, pain points, and validations

To kickstart the project, an extensive research was conducted through interviews and usability studies involving key stakeholders and primary users, the students. Both, Generative and Evaluative Research methods were used.

The research aimed to achieve three crucial objectives:

1. Understand Stakeholder and Users Goals: Determine the goals and needs of both stakeholders and primary users to align the project with their expectations.

2. Identify User Pain Points: Uncover the real pain points within the user journey, providing insights into where improvements were most needed.

3. Validate Design Stages: Validate the different design stages to ensure that the solutions align with the identified user and stakeholder needs.

Understand Stakeholder and User Goals

After conducting interviews with stakeholders, a shared understanding of prioritized tasks was established, laying the foundation for the initial scope of work.

Identify User Pain Points

Additionally, after the round of interviews with primary users, I was able to identify 3 core needs using "How Might We" statements:

1. Starting Work: How might we know where to start to work.
‍
2. Identifying Priorities: How might we identify priorities.

3. Tracking Progress: How might we track progress.

These insights were meticulously reviewed, and through affinity mapping, common themes and patterns were identified to inform the subsequent design phases.

The Problem StaTement

Upon thorough research and analysis, the problem statement presented to the project manager for the first phase of work was:

Create Phase | PART 1

Medium-Fidelity Wireframes

In response to the insights gained from earlier interviews, we ventured into the realm of Medium Fidelity Wireframes to offer solutions for the identified pain points. Here's what we introduced:
‍
• A left sidebar for improved navigation, progress tracking, and communication.

• Card-based user interface for enhanced visualization, quick information absorption, and intuitive navigation.

• A compact dashboard for a program progress overview.

• Course-level progress bars for easy monitoring and a search field for content accessibility.

Subsequently, we engaged in Usability Testing with stakeholders and primary users, seeking their feedback on navigation, visual hierarchy, and layout, especially for the Courses and Activity pages.

Results

• All users found the card UI to be helpful for grasping the interface.

• Implementing a small dashboard was appreciated by all users, providing program progress awareness, along with course-level progress bars.

• The left sidebar was seen as an enhancement to the Compass navigation experience.

• However, 50% of users encountered difficulty finding the search bar, possibly due to Jakob's Law and the Law of Locality in UX.

Create Phase | PART 2

High-Fidelity Wireframes

Moving forward to the High-Fidelity Wireframes stage, I integrated the feedback received, introduced a Design Syste, developed a prototype, and conducted additional Usability Testing with a broader user base.

REsults

These are some of the results obtained on the After-Scenario Questionnaire:
‍
• 80% of users were highly satisfied with how easily they could learn about the program and track their progress.

• All users were highly satisfied with their ability to navigate through specific courses.

• Users expressed great satisfaction in finally having a search bar to find specific lessons, regardless of the lesson's date.

Some additional feedback:
‍
• Users expressed satisfaction with the introduction of Progress Bars for program and course levels.

• There was excitement about the implementation of the long-requested search bar feature.

• The user community appreciated the improvements in User Experience and Interface, feeling their voices were heard, and advocating for users became a priority.

This phase demonstrates the transition from initial design concepts to refined, user-tested solutions that address the identified pain points.

Handoff to devs

The start of a Design System

I took the initiative to introduce the idea of a Design System within our company to ensure consistency across our various products. It's a significant undertaking, but it's essential for better control and a single source of truth.

To make this idea a reality, I had several productive discussions with developers. Our goal was to establish a shared language and streamline the handoff process. Ultimately, my aim was to simplify the developer's workflow.

ReflectionS & Outcomes

Reflections

These are my personal takeaways from this project:

User testing is a never ending process. It should continue even after development. At the end of the day, we should exist to solve user’s problems.
Having a product roadmap is a must. This will help everyone to be on the same page, no matter the stage currently working on.
Involve all key stakeholders, especially the software development team. Doing it so will reduce friction, time, and efforts by understanding technical limitations, expectations, and get buy ins on early stages of work.

Outcomes

These are some milestones achieved during my work on this project:

Implemented a Product Design Process. I worked on documenting as much as possible every part of the process, so this could be a foundation for a growing team in the future.
Started working on a Design System. The company was lacking a source of truth (consistency) for Compass, guided by clear standards. The Marketing & Software Teams shared very motivating feedback about this work and were easy buy-ins!
Embrace chaos and confusion. It’s the nature of design, but living it is a unique experience every single time, and more so in a company where there has been no product design team before. So, every day I chose to embrace ambiguity, foster a curious mindset, and emphasize user research.

More Work.

HTML | CSS | JS

UX/UI DESIGN

Illustrations

Bookfinity's Variety Of Work

In the latest effort to digitize the book discovery process, Ingram Content Group was launching Bookfinity, an online site designed to generate personalized book recommendations and drive book sales using technology. This project involved a variety of work: from marketing resources to UX/UI needs.