UX / UI

UI design pattern: Designing the UI card buttons for the LearnCoach platforms

Background

The LearnCoach is an e-Learning platform with a dozen products to support students, teachers, and schools need. As we are scaling the existing products and testing out the new products, it comes to our attention that we need the UI card buttons that will support the platforms.

Business goals

The business wants to build UI card buttons that can be used consistently throughout the platforms. A starting point is to update the existing pages of student learning.

  • UI elements can be added or removed at any time.
  • Extra UI elements can be added to the navigation hierarchy if needed
  • The navigation structure can be used for different use cases.

Problems

  • Due to scalability and responsive issues, the design team can’t use the existing UI buttons, and they need to design a custom button depending on the use cases.
  • The design team does not know how to build modular and scalable UI card buttons.

Solutions

  • To design the UI card buttons that are modular, scalable, reusable, and responsive.
  • To explain the modular and scalable page navigation concept to the design team.

Roles & responsibilities

  • Led the product design deliverables.
  • Facilitated the brainstorming session
  • Conceptualised the idea of the UI card buttons and how it works through whiteboard sketches and wireframes

Research

The goal is to gather information. These include the business goals, problems, technology requirements, and lay down the existing pages that affect the updates.

Screenshot of the student learning pages

Mapping the existing pages

What I learned:

1. The page navigation doesn’t allow scalability due to the current layout structure.

2. On the technology side, it should be responsive and reusable.

3. I found the similarities of the UI elements that make up the page navigation.

4. The NCEA student flow to access the content: Subjects > Standards > Learning materials (videos, practise quizzes and run through the past paper exam)

NCEA student study flow

4. The university student flow to access the content: University name > Degree > Paper > Learning materials (videos, practise quizzes and run through the past paper exam)

University student study flow

The brainstorming session

We first mapped out the tier levels for the NCEA students and university students to better understand the page flow and our problems.

Whiteboard sketches NCEA and university student tier levels

Whiteboard sketches student flows

Whiteboard sketches How the UI card button works on the platforms

I grouped and listed down the standard UI elements that will make up the card buttons:

  • Title
  • Label
  • Icon
  • A progress bar and progress label

To explain the concept to the team, I drew sketches on the whiteboard and made wireframes.

  • It is modular, where new UI elements can be introduced, removed from the existing one and replaced with different UI elements.
  • It is scalable because we can use it in existing and new platforms where a UI card button is needed.
  • It is responsive, which works well on mobile and desktop screens because of the UI elements’ placement and structure, where it doesn’t disrupt the flow to any screen breakpoints.
  • The HTML structure and CSS styling are reusable, with minimal changes required.

Whiteboard concept sketch ui buttons

Concept UI button wireframes

The mockup designs

We started planning the mockup designs to create a default styling for each variation, identify the variations to use for the subjects and standards, and applied the usability and accessibility principles.

We decided to use the plain white theme for the default styling because the coloured theme can be associated with a subject and other products.

Here are the standard UI card buttons that we will use throughout the platforms.

Standard ui card buttons

 

Based on previous user interviews, the icon and colour help identify the subjects easier. The team proposes retaining the associated colour and swivel shapes as a visual design for each subject.

UI card button my subjects

 

We used the plain white theme for the standards as the colours will be the same under a subject level.

UI card button standards

I then assigned the product designer to create the mockup designs—a couple of usability and accessibility considerations while designing the UI card buttons.

  • The font sizes and colour contrast are readable
  • Chunking the subjects by NCEA levels 1, 2 and 3 makes it easier for the user to process, understand and memorise.
  • A hierarchy of heading tags
  • Jargon-free messages as we are using the actual terminologies that students are familiar within the school
  • Supports keyboard control and on focus/hover button states
  • Click and touch targets are large enough to select them accurately

The documentation

I added the documentation notes as instructions for the developers on the Figma file and submitted them for product owner sign-off.

UI card button Figma documentation for developers

Once it got signed off, I have assigned the product designer to create the Figma components and variants to use them anytime when needed.

UI card button Figma variants and components

Outcome

The UI card navigations were deployed in the production, and we started using them on other platforms. Bonus point, the design team learned to apply the modular and scalable thinking approach to our projects, which is fascinating progress.

Sample screenshots of the platforms where we used the UI card buttons.

Usage of UI card button in my class

Usage of UI card button in my assessment task

Connect With Me

I’m currently looking for a new and exciting role and/ or if you would like to collaborate, catch me at

thedigitalambassador@gmail.com / +64 021 157 2214

Under the sea fish wing