PROJECT
OVERVIEW

Coursebox.ai

Coursebox.ai is an AI-powered platform designed to streamline the creation of online courses and manage learning experiences.

Coursebox also offers a Learning Management System (LMS) that includes features such as AI generated quizzes, automated grading and personalized learning paths.

Role


UX/UI designer for Coursebox.ai admin and student LMS portal from conception through to delivery.

Responsibilities


Conducting a competitive audit

Affinity mapping
Defining user flows

Information architecture
Storyboarding
Low and high fidelity prototyping
Designing user interface mockups
Conducting usability studies
Iterating on designs
Accounting for accessibility


THe

Mock up

PROJECT
OVERVIEW

Coursebox.ai

Coursebox.ai is an AI-powered platform designed to streamline the creation of online courses and manage learning experiences.

Coursebox also offers a Learning Management System (LMS) that includes features such as AI generated quizzes, automated grading and personalized learning paths.

Role


UX/UI designer for Coursebox.ai admin and student LMS portal from conception through to delivery.

Responsibilities


Conducting a competitive audit

Affinity mapping
Defining user flows

Information architecture
Storyboarding
Low and high fidelity prototyping
Designing user interface mockups
Conducting usability studies
Iterating on designs
Accounting for accessibility


The problem:

Clearly laying out the issue at hand.

Courseboxs reporting dashboard lacks clarity, functionality, and useful data at a glance, making it difficult for admins, LMSes, and learners to track progress or generate meaningful insights.


Limited filtering options, poor visualisation, and disjointed user flows create friction across key reporting tasks. This not only reduces confidence in the data but also leads to inefficiencies and frustration, ultimately preventing users from making informed, timely decisions.

Previous look

THe

Mock up

The problem:

Clearly laying out the issue at hand.

Courseboxs reporting dashboard lacks clarity, functionality, and useful data at a glance, making it difficult for admins, LMSes, and learners to track progress or generate meaningful insights.


Limited filtering options, poor visualisation, and disjointed user flows create friction across key reporting tasks. This not only reduces confidence in the data but also leads to inefficiencies and frustration, ultimately preventing users from making informed, timely decisions.

The Solution:

Mapping out a simpler journey.

Redesign Courseboxs reporting dashboard to deliver clearer insights, streamline reporting flows, and improve usability for admins, LMS partners, and learners. The goal was to transform a clunky, disjointed experience into a more intuitive, efficient, and insight-driven platform that supports timely decisions through better data visualisation and refined filtering tools.

1

Provide clear, useful insights

2

Simplify reporting flows

3

Reduce redundancies, declutter UI and recreate the dashboard to present valuable insights at a glance

The Solution:

Mapping out a simpler journey.

Redesign Courseboxs reporting dashboard to deliver clearer insights, streamline reporting flows, and improve usability for admins, LMS partners, and learners. The goal was to transform a clunky, disjointed experience into a more intuitive, efficient, and insight-driven platform that supports timely decisions through better data visualisation and refined filtering tools.

The Solution:

Mapping out a simpler journey.

Redesign Courseboxs reporting dashboard to deliver clearer insights, streamline reporting flows, and improve usability for admins, LMS partners, and learners. The goal was to transform a clunky, disjointed experience into a more intuitive, efficient, and insight-driven platform that supports timely decisions through better data visualisation and refined filtering tools.

1

Provide clear, useful insights

2

Simplify reporting flows

3

Reduce redundancies, declutter UI and recreate the dashboard to present valuable insights at a glance

Design process:

Approaching the issue with the double diamond.

Two main types of thinking were applied to the design challenge


  • Divergent thinking: exploring multiple possibilities

  • Convergent thinking: focusing on the best ideas

Discover
Insight into problem
Define
Area to focus on
Develop
Potential solutions
Deliver
Solutions that work
Problem
Research
Opportunities
Ideas
Solution

UNDERSTANDING
THE USER

User interviews:

Understanding each user's perspective

In order to better understand users' experiences within Coursebox.ai, we observed their interactions and feedback with the current website.

Here's what they had to say:

'…the news, tutorials and support sections are redundant…'

“Page is intuitive enough, just takes a lot steps to get to.”

'I find the right side panel to be irrelevant and would much rather see a calendar, deadlines, and deliverables'

'Unnecessary elements like "My Drafts" are present in the student interface, despite being relevant only for admins'

'Students currently have issues tracking their progress'

STARTING
THE DESIGN

HMWs:

Discovering
opportunities from our insights

Drawing from the research insights we gathered, we crafted five actionable questions framed as How Might We statements each designed to spark meaningful design solutions rooted in user needs.

1

How might we improve student management by enhancing efficiency, functionality and reduce redundancy?

2

How might we provide users with accessible high-level overviews and information at a glance with the ability to explore detailed data, all within the dashboard experience?

3

How might we refine reporting with better filters, sorting and analytics while making insights actionable on the dashboard?

4

How might we enhance the persistent visual design to improve user experience and engagement, whilst aligning with industry standards and competitor expectations?

5

How might we enable users to customise their dashboards for better course management, branding, and alignment with their needs?

UNDERSTANDING
THE USER

User interviews:

Understanding each user's perspective

In order to better understand users' experiences within Coursebox.ai, we observed their interactions and feedback with the current website.

Here's what they had to say:

'…the news, tutorials and support sections are redundant…'

“Page is intuitive enough, just takes a lot steps to get to.”

'I find the right side panel to be irrelevant and would much rather see a calendar, deadlines, and deliverables'

'Unnecessary elements like "My Drafts" are present in the student interface, despite being relevant only for admins'

'Students currently have issues tracking their progress'

STARTING
THE DESIGN

HMWs:

Discovering
opportunities from our insights

Drawing from the research insights we gathered, we crafted five actionable questions framed as How Might We statements each designed to spark meaningful design solutions rooted in user needs.

1

How might we improve student management by enhancing efficiency, functionality and reduce redundancy?

2

How might we provide users with accessible high-level overviews and information at a glance with the ability to explore detailed data, all within the dashboard experience?

3

How might we refine reporting with better filters, sorting and analytics while making insights actionable on the dashboard?

4

How might we enhance the persistent visual design to improve user experience and engagement, whilst aligning with industry standards and competitor expectations?

5

How might we enable users to customise their dashboards for better course management, branding, and alignment with their needs?

User Empathy:

Personas &
User Journeys

After gaining a clear understanding of the users, we created personas representations of our ideal customers shaped by research insights and user archetypes. These personas guided our decisions, ensuring that the platforms features and overall experience were thoughtfully aligned with their needs, goals, and expectations.

MVPs:

Looking for
opportunities within insights

Following the ideation session, ideas were prioritised based on value and effort. Early focus was placed on quick wins like streamlining navigation, refining the menu structure, and introducing student progression tracking. Higher effort features such as data visualisation and student activity management were also explored through informed assumptions, aiming to deliver clearer insights for admins within known technical limitations.

Information Architecture:

Reviewing the structure of Coursebox

The existing information architecture was analysed and revealed a navigation system with redundant pathways and unclear structure making it difficult for users to find what they needed. Although the scope was focused on the dashboard and reporting features, the decision was made to redesign the navigation bar to better support the overall user experience. The improved site map introduced a more streamlined and intuitive structure for both admins and learners, laying a stronger foundation for the redesign to follow.

LEARNER PORTAL BEFORE
LEARNER PORTAL AFTER
ADMIN PORTAL BEFORE
ADMIN PORTAL AFTER
LEARNER PORTAL BEFORE
LEARNER PORTAL AFTER
ADMIN PORTAL BEFORE
ADMIN PORTAL AFTER
Visual Refresh:

Creating impact through a minimal design

Following the ideation session, a visual refresh was identified as a high impact, low effort opportunity to elevate the user experience. By refreshing key visual elements such as subject cards, dashboards, illustration style, and UI consistency the platform immediately felt more cohesive, modern, and engaging without requiring deep structural changes.

Modern
Innovative
Minimal aesthetic

Wireframing:

Bringing some structure to the new narrative

Wireframes were developed to explore layout, structure, and user flow across key areas of the platform. With a focus on simplifying navigation, improving dashboard clarity, and creating ease in the user journey. These wireframes provided a clear foundation for testing ideas quickly and informed the direction of the visual design that followed.

Low Fidelity

High Fidelity
Learner Dashboard
Super Admin Dashboard
Course Creator Dashboard
Visual Refresh:

Creating impact through a minimal design

Following the ideation session, a visual refresh was identified as a high impact, low effort opportunity to elevate the user experience. By refreshing key visual elements such as subject cards, dashboards, illustration style, and UI consistency the platform immediately felt more cohesive, modern, and engaging without requiring deep structural changes.

Modern
Innovative
Minimal aesthetic

Wireframing:

Bringing some structure to the new narrative

Wireframes were developed to explore layout, structure, and user flow across key areas of the platform. With a focus on simplifying navigation, improving dashboard clarity, and creating ease in the user journey. These wireframes provided a clear foundation for testing ideas quickly and informed the direction of the visual design that followed.

Low Fidelity

High Fidelity

High Fidelity
Learner Dashboard
Learner Dashboard
Super Admin Dashboard
Super Admin Dashboard
Course Creator Dashboard
Course Creator Dashboard
Handover

Looking for
opportunities within insights

Following the completion of the final designs, documentation was prepared and structured in Figma to support a smooth developer handover. Focus was placed on building a clear component library, outlining key interaction patterns, and ensuring visual decisions were easy to interpret and implement. Additional annotations were included to guide future iterations, allowing Coursebox to scale beyond the current scope with consistency.

Key Learnings


  • Working alongside the engineer really shifted how I approached design. It helped me understand whats technically realistic and pushed me to think more critically about how our ideas would actually be built saving time and making our work more purposeful.


  • Creating the business model canvas gave us a clear way to keep scope in check. It was a simple but powerful tool that helped us stay focused, manage Coursebox's expectations, and deliver quality work on time.


  • Being proud of the work didnt come naturally at first. Im someone who tends to overthink or be overly critical of what I make but seeing what we achieved as a team in such a short time really helped shift that mindset. It gave me more confidence to back my work as I presented .


  • User feedback was the best validation. Hearing that the design felt like exactly what they wanted made all the work and design decisions feel worth it and reminded me why I enjoy doing this in the first place.

  • Stakeholder management and scoping. Learning how to align with stakeholders early on made a big difference. Clear scoping and honest conversations around priorities helped keep the work grounded, purposeful, and moving in the right direction.

Thank you

UX/UI Designer
Timothy Truong

Tools
Figma
Miro
Illustrator
Photoshop