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.
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.
- 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.
- 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
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
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)
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)
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.
I grouped and listed down the standard UI elements that will make up the card buttons:
- 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.
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.
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.
We used the plain white theme for the standards as the colours will be the same under a subject level.
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
I added the documentation notes as instructions for the developers on the Figma file and submitted them for product owner sign-off.
Once it got signed off, I have assigned the product designer to create the Figma components and variants to use them anytime when needed.
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.