Turning a UI course into a functional interface

Turning a UI course into a functional interface

Designing a mobile app for the uiBoost course, focused on content playback and student–teacher interaction, with an emphasis on visual consistency and usability.

Designing a mobile app for the uiBoost course, focused on content playback and student–teacher interaction, with an emphasis on visual consistency and usability.

Client

uiBoost

Industry

Education

My role

UI Design

Role

UI

Year

2024

Challenge

01

  1. Adapt the course experience to a mobile environment


  2. Ensure intuitive navigation even for long-format content


  3. Maintain a cohesive visual identity aligned with the course

Approach

02

Briefing

01

Analyzed the briefing and the initial flow shared on Miro.

Key points

02

Mapped key interactions and essential screens.

Solution

03

  1. Onboarding screen presenting the course’s value proposition


  2. Modules with progress tracking, video lessons, and comments


  3. Search feature with history and results, plus a student profile with customization options

Full set of UI Boost app screens showing the complete user flow: onboarding, email login, access code input, course progress dashboard, search functionality, video playback, and user profile. The dark-themed interface highlights vibrant UI elements in purple, red, and orange, maintaining visual consistency throughout the mobile experience.

Takeaways

04

Prototype

01

Functional prototype with over 15 interactive screens.

Prototype

01

Functional prototype with over 15 interactive screens.

Highlight

Highlight

02

Formally recognized by the class for the quality of the interface.

Highlight

02

Formally recognized by the class for the quality of the interface.

Illustrations

03

Hands-on experience learning and creating isometric illustrations in Figma.

Illustrations

03

Hands-on experience learning and creating isometric illustrations in Figma.

Learnings

05

I learned how to balance visual identity and usability in a mobile educational product. This practice helped me solidify layout, hierarchy, and design system decisions to create a consistent experience in a space I hadn’t explored much before.