UI Visual System for an Education Platform
This page includes a gallery of a few components and guidelines I created for an online educational company, used in the Lesson Editor .
Color adjustment from branding to platform
Course Cards for a Reporting Dashboard
Task. Re-design course cards for an educational company’s reporting dashboard.
My Role. I was the lead visual designer for this component. I reviewed ideas and critiques with my team (3 engineers, 2 designers including me) and incorporated feedback.
Brand Identity. Professional and modern program to upskill working adults. Colors include dark blue, light blue, and orange accent.
Audience. Administrators, Instructors, and Internal Personnel.
Purpose. Show top-level data for a course and act as a button to drill down into further details. Required elements include the course name, weekly schedule, and enrollment number. Any other information is nice-to-have.
Original Card, Critiques,
and Explorations
The original card design has a few flaws in hierarchy and color selection.
Though the light blue color is one of the brand colors, it is meant to be an accent. The color on its own looks a bit dated, and it also does not pass accessibility tests with white.
The course title should be the highest in the visual hierarchy. The medium-weight black text stands out more than the title, even though it is tertiary information.
Though a go-to-course button is easily readable, tests with administrators suggested that they try to click on the course title and prefer a larger target.
All cards had the same style, which made it difficult to scan for the correct course.
To improve the hierarchy, I worked to add variety to the cards, adjusted the title contrast, and made the entire card the clickable target.
Breakdown of the Final Card
In most cases, the administrators would treat this card as a button to navigate to specific data, making the course title the most important element in the hierarchy. I achieved this hierarchy through:
The contrast between the dark color and white
Text size and font-weight
A drop shadow to the text, which acts as a subtle outline to maintain readability on all card colors
The height of the title area, which provides breathing room and enough space for course titles that may span 3 lines
