Lemma is a cloud-based content creation, learning, and assessment platform for the teaching of Mathematics. They have developed a flexible software solution that allows content to be rapidly created and implemented into the classroom. Each module is a living and breathing element of their analytics engine; user engagement is constantly tracked and assessed in order to diagnose student competence. Over time, the analytics engine provides personalized content that aligns with the user's knowledge state in order to meet students where they are and bring them where they need to be in real time. For educators, the platform serves as a useful tool to assign homework, communicate with students, leverage analytics in order to make better pedagogical decisions, and generally expand the classroom into the digital space.


Online learning app interface redesign

Problem Space

Currently, in the application, students can see assignments given to them and can click on each individual assignment as they'd like to complete it, however, as they're reading through the textbook, there's no way to view what has been assigned, without going specifically to the assignments board, and there is no quick way to jump back and forth between the textbook and assignment sections. Design a way to engage with mathematical content, in the form of written lessons, videos, worksheets, tests, problem-sets, etc. so as to recreate the experience of using a real textbook.


Danielia Santiago, 17 | The Prospective College Student

New York, NY


  • Currently practicing for the SATs coming up in two months. She's nervous about her testing scores, particularly in math.

  • She's a hardworking student and likes to feel prepared heading into her studies, so she likes to peek ahead a couple of chapters to get an idea of where the concepts are going in her classes.

  • Danielia is a tech-savvy student who likes to take her work with her on the go digitally instead of carrying her books with her everywhere.

  • Wants to attend a 4-year university after graduating high school

  • Danielia is looking to get a scholarship in order to pay for most, if not all of her college experience.

Pain Points
  • Danielia can't track her progress on homework "assignments" as she's reading through the textbook.

  • The navigation of the app is confusing to Danielia, leaving her frustrated and deterring her from using of the app as much as she'd like to.

Competitive Analysis 

For comparison, I looked at three online educational platforms to understand the interface design and navigational structure of a site containing similar content and facing similar problems.


Udacity has a fixed side navigation with a sub-navigation slide out menu for each landing page that keeps content in clearly defined segments.


Udemy uses a standard main nav bar at the top of the site and cards to organize content and lessons within the pages.

Khan Academy

Khan Academy makes good use of visuals to communicate statistical analysis of student progress and comprehension.

The Solution: Initial Wireframes

I decided the fixed side navigation similar to Udacity would be the best for clarity in communicating content and organizing information. Each page also has a scrollable sub-menu that will be fixed next to the side navigation to access more specific content.


It was also important to incorporate color and visual graphics to help communicate statistical data and progress clearly and easily, in addition to creating a fun visual experience for the user.


While this initial design was well received by stakeholders in terms of improvement to design functionality and visual design to the current experience, it still didn't feel visually modern enough.

The Solution:
Iteration and Visual Design

Taking the stakeholder's needs into consideration, it was important to find a solution that still protected the integrity of the layout redesign, while providing a modern and more fresh aesthetic to the visual elements.


Color became a big factor in how the look was modernized, using a contrast of light and dark ground to separate the navigational elements from the page content and using gradients of colors to feel more current and relevant to high school students.

Next Steps

Before completing the build-out of the entire site, this is a good stage to perform a round of testing to get feedback from high school users about the current redesign.


From there, the Account Info and complete textbooks need to be designed and built before further testing on a viable product.

Click image to view prototype