Leagle BaseCamp: Digital Solutions for an e-Learning and Consulting Business
Redesigning a CMS and LMS system with the goal of increasing program retention for students undergoing the law school application process. A UX Case Study.
Scope of Project
Leagle Basecamp is an e-learning and consulting service aimed to guide under-represented students through the law school application process.
The Problem
Leagle Basecamp, an e-learning platform, is able to generate sufficient demand for their service. However, users quickly taper off and rarely finish the program.
Our Solution
Our team designed a user-centered, trustworthy website and course page. Our redesign allows applicants to stay engaged throughout the course, with the ultimate goal of simplifying the process of getting into law school.
Timeline: 3 weeks
Team Members: 3 other UX designers
My Role: UX research, information architecture, user flows, data visualization, learning management system (LMS) design and structure, content strategy, instructional design heuristics, client presentation, client deliverables.
Tools: Podia (LMS), Squarespace (CMS), wireframing, sketching, Canva, Marvel, pen and paper, whiteboard.
Abbreviations: Content Management System (LMS), Learning Management System (LMS).
Current Sites
Overview of our Design Thinking Process
User Research
In our first week we conducted user research in the form of an LMS survey (24 respondents) and (6) 1:1 interviews with the target audience about their experience getting into law school. Other tasks included: visualizing the user flow, completing a competitive and a comparative analysis.
My Role: Develop open-ended questions for discussion guide, conduct 1:1 interviews with target audience, assess user flow and content of current e-learning platform for possible gaps in service, compare with industry conventions.
Survey: The goal for the survey was to gain insight into what online learners expect and need.
One on One Interviews: It was imperative to gain insight from individuals who had either gone through the law school application process themselves or were involved in making decisions about applicants.
User Flows: We analyzed the current system for possible gaps in service, to understand the customer journey, and identify possible reasons for drop-off. In the current system, the client is using Wordpress for content management (CMS) and ConveYour for the e-learning platform (LMS).
Key Takeaways from User Flows:
- Currently there is no direct link from the CMS to the LMS, so potential users are unable to preview course material.
- User is presented with all 38 modules at once.
- Within those lessons there are 12 call sessions, homework assignments and checklists littered throughout the course.
Key Takeaways from Usability Testing of the Current Websites: we tested the current system with 3 lawyers who have experience with online learning. A few statements they made include:
- “Seems like a lot of modules to go through.”
- Lack of content on both websites (specifically information about the LSAT).
- Confusion about how to track progress.
- Not all modules have a time estimate.
- “It doesn’t look modern.”
Online Learning Best Practices: our team conducted intensive research regarding (e)-learning best practices in order to provide potential users a quality experience, match user expectations and comply with industry conventions. A few of the resources we found valuable include:
- “10 Principles of Effective Online Teaching: Best Practices in Distance Education” by Dr. Lawrence C. Ragan, Director of Instructional Design and Development for Penn State’s World Campus.
- “Best Practices for Teaching Online” via Brown University
Key Takeaways from online E-Learning Best Practices: There are 4 components of an effective online learning course:
- A course intro.
- High quality content.
- Intuitive course design (conventional structure, navigation).
- Instructional design (engaging presentations, videos, short chunks of material).
Research Synthesis & Definition
The second week of this project was focused on synthesizing the data gathered from the previous week. Affinity mapping is a design strategy we used to organize the research data into categories. Each user statement was placed on a post it note and then organized into themes.
Quantifying our affinity mapping results allowed us to visualize the key pain points that our designs would solve for.
Instructional design was by far the largest pain point online users complained about, including how the content is presented, problems interacting with the instructor, available resources and quality of content within the course.
“I like small, bite sized exercises that help me focus on one concept at a time.”-quote from survey
The results of mapping the statements made by previous law school applicants indicated 4 primary pain points, the largest being completing the actual components of the application, specifically the LSAT. This was followed by financial concerns, making decisions on which school to go to, and a lack of resources.
User Persona: These steps helped us to develop a user persona, or a representative user we can design for. She is a fictional character who embodies behavior and goal patterns we identified in users during our research. Meet Ashley!
Our customer journey map visualizes Ashley’s experience when she discovers the Leagle BaseCamp website:
Initially she’s very excited to have found a resource, but then experiences some emotional ups and downs, including:
- Confusion on how to sign up and what kind of services Leagle BaseCamp provides.
- She fills out the contact form and is happy to get a quick response.
- Once she logs in she finds the course layout to be confusing and unpredictable.
- Ashley feels overwhelmed by being presented with so much content at once.
- Unfortunately, she leaves the website and does not return.
Cue the next phase: designing a better experience for Ashley!
Design Testing & Iterations
My focus for this project was redesigning the learning management system (LMS), or e-learning platform, with 1 other UX designer. Currently, when users log-in to complete the modules, this is what they see:
Our goal was to visually chunk the content into smaller parts, reducing the risk of cognitive overload.
Chunking the data also addresses one of the preferences described in the LMS survey, which was that users liked small, bite sized experiences to help them focus.
So we took to the whiteboard to brainstorm how we could organize the course into clear phases and sub-sections. What informed us during this process were the steps that law applicants said they took when applying to law school and pre-law timelines we found on other websites during our comparative analysis.
Below is the breakdown of our brainstorming session. On the left is the current course agenda, as stated in the introductory module. On the right are our recommended phases, based on user research.
We added 3 phases to address the 3 largest applicant barriers (identified in blue above):
- The LSAT phase
- Personal Statement
- Recommendations and Resumes
Chunking the lessons in this manner further encourages the user to engage in the course because they can see right away that Leagle BaseCamp provides a solution to their main concerns.
We validated this course structure with a recent law school graduate who stated “I like the phases and I think they are properly set based on the steps in the process”-N.R., lawyer
Next, we want to encourage Leagle BaseCamp to establish a predictable course pattern within each phase, as per our “best practices” research.
We broke each phase into 3 sections, making sure to include the “call to action” items established by Vik, the creator.
- The first section would be the introductory lesson, which would include learning objectives and expectations.
- Section 2 is comprised of 1–3 sections of course content.
- Section 3 concludes the module with the power checklist and 1:1 counseling call.
Although my focus was on redesigning the e-learning platform, I aided in the structure of the Wordpress website redesign. Based on our findings from a card sorting exercise, we organized the navigation bar into:
- An About page→ sub categories of what the course covers, how to start and a timeline
- Who I am → Vik’s personal information, including testimonials
- Resources → which include FAQ page and reading materials
- And then a contact page
Our Design
In our third week we collaborated on a paper prototype. The goal was to create a comprehensive, realistic representation of the design and test it with users.
We used the paper sketches to create an interactive prototype using Marvel. Using our digital prototype, we conducted 5 in-person user tests to validate our designs. The purpose: to test functionality through clickable flows and gain insights into the effectiveness of our designs’ information architecture and navigation.
During the usability tests users given the task scenario of being a law student who found this resource. Users were asked to:
- Explore the website.
- Think out loud.
- Complete tasks (starting a phase of course).
Insights from paper prototype testing:
- Users validated the breakdown of content into phases.
- Users found that the left-hand-side navigation was intuitive and easy to follow.
- Users want a community aspect → Recommended that the client consider discussion boards, peer review, etc.
We then created a mid-fidelity prototype on Squarespace as the CMS and on Podia for the LMS. Our recommendations to the client of switching from Wordpress and ConveYour to Squarespace and Podia were based on how user-friendly the platform was and other features based on the client’s needs. Another round of 5 usability tests were conducted. The goal was to analyze the flow from CMS to LMS. The layout of the user interface was also modified based on software design constraints.
After testing we found that users wanted:
- Clarification of services and benefits.
- Details about meeting with Vik (timing, schedule, format).
- To see cost upfront.
Iterations we made included:
- Clear, concise explanation of program and course content.
- Clear communication timeline (“calls with Vik”).
- “Call to Action” button (“Go to Course”) that takes users directly to the LMS website
Final Design
Client Deliverables
After a 1-hour client presentation we were able to hand-off both the Squarespace and Podia websites with instructions to ensure successful carryover and ownership. Our client, Vik, expressed sincere gratitude for the work that was done, stating:
“I was seriously thinking of just shutting this down. Now I have like a brand new company and I’m pretty excited.”-Vik Kapoor, founder of Leagle BaseCamp.
We also provided the client with a comprehensive 16-page “User Experience Guide,” which detailed our research, synthesis, UX methodologies and design recommendations.
Interested in seeing more of my work? Check out my portfolio here.
