top of page
frame_mobile2.jpg

From 1-Star to 5-Stars:
Optimizing Mobile Learning

Mobile  |  Product  |  UX  |  Accessibility 

The Product

Barbri Learning Product Suite is the leading digital LMS for law students & legal learners at any stage of their student journey- from LSAT to Bar Exam & Beyond. 

The Problem

Lacking a mobile-friendly/responsive experience, BARBRI's original mobile application was unusable, non-compliant, and boasted a 1-star user rating.

The Project

(1)  Design an accessible and delightful mobile experience cohesive to other BARBRI products & LMS.

​

(2)  Create a mobile learning experience that achieves a user rating of 4-stars or above for students on-the-go.

​​​

(3)  Establish mobile design patterns for future projects that adhere to WCAG 2.0+ accessibility standards.  

Tools  |  Figma, Adobe Suite, Miro, JIRA

Duration  |  January 2022 -  January 2023+

Team  |  Squad Fun (1 Product Owner, 1 UX, 1 Senior Engineer, 4-5 Mobile Devs) 

My Role  |  UX Designer

Background

Understanding the Issues

Considering our LMS

Planning & Exploring Variations

Ensuring Accessibility

Feature Showcase

Native Considerations

Outcomes

The Process  |  TOC

Mobile_HS2.jpg
Mobile_Showcase2.jpg
Background

As a part of larger business shift to a fully tech-enabled model, creating a usable mobile application for BARBRI students emerged as a vital component for a newer generation of learning. Our original mobile application was widely criticized for its poor usability, resulting in a 1-star rating and highlighting the critical need for a complete UX overhaul.

​

In response, this seamless, web-based responsive application was envisioned to empower students to engage with their learning content anytime, anywhere, and on their own terms. Designed with the modern, digitally-native learner in mind, the revamped experience aims to support and motivate students who increasingly gravitate toward flexible, on-the-go digital learning modalities.

My responsibility was to lead the design of the new mobile user experience - focusing on increasing accessibility, DAU (Daily Active Users), and overall
user satisfaction/rating.

Mobile_allBD_BG.jpg

Understanding the Issues

The original mobile app suffered from several critical usability and accessibility issues. Performing UX audit revealed problems such as:

 

(1)  Non-compliant touch targets – Navigation elements featured buttons and tap areas that were too small, negatively impacting usability and falling short of accessibility standards.
 

(2)  Insufficient contrast and text scalability – Poor color contrast and undersized text compromised readability and failed to meet WCAG accessibility guidelines.
 
(3)  Overwhelming course layout – The course structure was cluttered and difficult to scan, offering minimal visual hierarchy or organizational support for students.

(4)  Lack of core accessibility and support features – The absence of accessibility settings, performance insights, and learning tools resulted in a disjointed, hard-to-navigate experience for many users.

Beyond accessibility, the app lacked cohesion with the desktop LMS, resulting in a fragmented learning experience. This disconnect made it difficult for students to move seamlessly between platforms, disrupting the continuity essential to long-term engagement and comprehension.
 

To meet the needs of legal learners across various stages—from LSAT prep to law school and the Bar Exam—the mobile experience needed to fully mirror the functionality of our desktop platform. That included supporting diverse course structures, question formats, and study tools—all within a responsive, intuitive interface optimized for on-the-go learning.

Mobile_Ch-lessSh.jpg

Planning & Exploring Variations

In the early stages of the project, I partnered closely with my Product Owner using MIRO as our central planning and collaboration tool. Together, we defined key product requirements, brainstormed new feature ideas, and scoped the technical feasibility in close consultation with our mobile development team. Our planning sessions were highly iterative and transparent, ensuring that both user needs and technical constraints were thoughtfully balanced.
 

To maintain alignment across the organization, we held regular work sessions with business stakeholders. These conversations helped clarify expectations, refine goals, and establish measurable KPIs to track the impact of the upcoming mobile release.

Mobile Miro Planning.png

The broader team’s enthusiasm for launching a fresh, user-friendly mobile experience gave us the freedom—and support—to be creative and bold in our thinking. I took this opportunity to explore multiple UI variations, experimenting with layout, interaction patterns, and content prioritization. However, throughout the exploration phase, out team remained intentional about maintaining design consistency with the existing desktop experience. The goal was to ensure a seamless cross-platform journey, reinforcing brand cohesion and reducing friction for users familiar with the desktop product.

Mobile_variation.jpg

Enhancing Accessibility

Accessibility was a core consideration throughout the design and development of the BARBRI mobile application. Building on the foundation of the desktop experience, the mobile app leveraged components and design patterns from BARBRI’s design system—originally crafted with WCAG 2.0+ compliance standards in mind—and thoughtfully adapted them for a responsive, mobile-first environment.

Mobile_NewA11y.jpg

To ensure a more inclusive and user-friendly experience, several accessibility-focused enhancements were implemented:

 

(1)  Larger touch targets – Interactive elements were redesigned with a minimum size of 48px, improving usability for all users, including those with motor impairments.
 

(2)  Mobile-optimized features – Tools like Auto-Playing Assignments and Performance Analytics were designed to be easily accessible and intuitive on smaller screens, minimizing cognitive load.
 
(3)  Streamlined course layout – Assignments were organized in a clear, structured format, enabling quicker navigation and reducing the effort required to find relevant content.

(4)  Accessible colors and typographyColor palettes and font selections were evaluated for contrast compliance, with text sizes set for maximum legibility across a range of device sizes.

Mobile Feature Showcase

To elevate the BARBRI mobile experience, we strategically integrated both new and proven mobile features aimed at improving usability, accessibility, and overall user satisfaction. Each feature was designed to support students' daily routines and learning preferences while enhancing the overall value of the mobile platform.

Auto-Play Assignments

This feature allows students to automatically queue and launch their daily assignments, streamlining their study sessions and saving time—especially valuable for learners balancing busy schedules.

Mobile_Features_AutoPlay2.jpg
Flagging, Answer Masking & Highlighting Tools

We digitized familiar study aids to support a range of learning styles. Students can flag challenging questions, mask answers to encourage recall, and highlight key content—all from within the app.

Mobile_Features_LearningTools.jpg
Accessibility Settings

Customization features like adjustable color modes and font sizing offer users greater control over how they consume content, promoting usability and inclusivity for diverse learning needs.

Mobile_Features_a11y.jpg
Mobile-Optimized Analytics

With enhanced performance metrics built for smaller screens, students can easily track progress, review subject mastery, and make data-informed decisions—anytime, anywhere.

Mobile_Features_reports2.jpg
Native Considerations

While our goal was to maintain visual and functional cohesion between the desktop LMS and the new mobile experience, we remained equally attentive to platform-specific guidelines to ensure a truly native feel on both iOS and Android. Core functionality remained consistent, but we thoughtfully accounted for differences in navigation patterns, gesture interactions, and system UI behaviors.

Mobile_NativeScreens.jpg

To support this, we tailored visual and interactive elements in accordance with each platform’s standardsHuman Interface Guidelines for iOS and Material Design for Android. This approach allowed us to strike a careful balance between cross-platform consistency and native usability, ensuring the mobile app felt intuitive and familiar to users regardless of their device.

Bringing the BARBRI mobile learning experience to life was a highly collaborative and rewarding effort. By aligning closely with product, development, and business stakeholders, we delivered a mobile application that not only complements the desktop LMS but also meets the evolving needs of our users—everywhere.

Mobile_paralax.jpg

Notable Impacts & Outcomes

  • Exceeded initial launch goal: Achieved a user rating above 4.0 within the first year (2022), meeting key business objectives.
     

  • Sustained high user satisfaction: Currently rated 4.5/5 on app stores with over 1,800 user reviews (as of May 2025).
     

  • Boosted engagement: Increased Daily Active Users (DAU) by 40% within the first year of release.
     

  • Influenced broader product strategy: Mobile design patterns introduced in this project are now used across 7+ BARBRI learning products, shaping the student journey holistically.
     

  • ​Laid groundwork for future innovation: Established a scalable foundation for ongoing mobile optimization and accessibility, including features like accessible digital scantrons for test-takers with limited mobility and a digital bookshelf for on-the-go access to case law.

Next Case Study: Connecting Communities 

kr.png

Kathryn Requard | Product Design Leader

  • Telegram
  • LinkedIn
  • Dribbble
  • Instagram
bottom of page