Thanks for checking out my portfolio!

I’m still polishing up the tablet and mobile experience. In the meantime, please check out my portfolio on desktop.

Thanks for checking out my portfolio!

I’m still polishing up the tablet and mobile experience. In the meantime, please check out my portfolio on desktop.

3D Maze

Teaching computational thinking and programming concepts through gamified mazes

Deliverables

Achieved 74% positive feedback from students post-deployment

Successfully scaled to support 3,000+ students in a live university course

Year

2023

Software

Figma

Team

Frontend developer

Backed developer

Expertise

Interaction design

Information architecture

Visual design

UX writing

Table of contents

Platform background and expansion

Course structure and student demographics

Core usability fixes

Features for learning engagement

Platform background and expansion

Platform background and expansion

Scaling the platform from 50 to 3000 undergraduates

3D Maze had been part of a specialised course since 2015. In 2023, the university chose to use it in a general education course to address low engagement and poor student feedback.

Scaling the platform from 50 to 3000 undergraduates

3D Maze had been part of a specialised course since 2015. In 2023, the university chose to use it in a general education course to address low engagement and poor student feedback.

Scaling the platform from 50 to 3000 undergraduates

3D Maze had been part of a specialised course since 2015. In 2023, the university chose to use it in a general education course to address low engagement and poor student feedback.

Scaling the platform from 50 to 3000 undergraduates

3D Maze had been part of a specialised course since 2015. In 2023, the university chose to use it in a general education course to address low engagement and poor student feedback.

Scaling the platform from 50 to 3000 undergraduates

3D Maze had been part of a specialised course since 2015. In 2023, the university chose to use it in a general education course to address low engagement and poor student feedback.

Course structure and student demographics

Course structure and student demographics

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

General disinterest in students towards the course

The platform had to minimise friction as students would not tolerate unclear steps, hidden features, or extra effort to learn.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

General disinterest in students towards the course

The platform had to minimise friction as students would not tolerate unclear steps, hidden features, or extra effort to learn.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Shortened timeline for platform use

The platform had to be immediately usable since students only had a few hours with it.

Core usability fixes

Core usability fixes

Original design

New design

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Original design

New design

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Original design

New design

Redesigned toolbar for clarity

The original toolbar displayed all available controls at once, which could confuse and overwhelm to new students. The new toolbar reduces visual load by grouping less-used tools into collapsible menus.

Original design

New design

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Original design

New design

Streamlined Save UI

The original Save UI was outdated and visually inconsistent with the rest of the platform. It was redesigned to be clearer, more modern, and easier to complete in a single glance.

Original design

New design

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Original design

New design

Refined Help UI with quick-access tips

The Help UI was originally designed like a scripted tutorial, which was time-consuming and unskippable. The updated version delivers tips upfront, letting students learn on demand.

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Original design

New design

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Original design

New design

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Original design

New design

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Original design

New design

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Original design

New design

Fullscreen maze view for focus

The original layout restricted the maze preview to a smaller window. The fullscreen view improves usability by giving students a clearer view of the maze as they solve it.

Features for learning engagement

Features for learning engagement

Original design

New design

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Original design

New design

Maze size panel for creative variation

Ello was made with the aim to enter the Chinese market and provide an effective, accessible, and cheap way to become fluent in English.

Original design

New design

Results UI with performance breakdown

The original design provided no insight into how well students performed. The new one presents metrics that encourage friendly competition and goal-setting.

Results UI with performance breakdown

The original design provided no insight into how well students performed. The new one presents metrics that encourage friendly competition and goal-setting.

Results UI with performance breakdown

The original design provided no insight into how well students performed. The new one presents metrics that encourage friendly competition and goal-setting.

Results UI with performance breakdown

The original design provided no insight into how well students performed. The new one presents metrics that encourage friendly competition and goal-setting.

Original design

New design

Results UI with performance breakdown

The original design provided no insight into how well students performed. The new one presents metrics that encourage friendly competition and goal-setting.

Original design

New design

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.

Original design

Final design

In-game score panel

In-game performance was previously limited. A score panel with more metrics was added to address this issue and guide decision-making.