Yeeun Jezz Hong Portfolio

← Back

Overview

Design Solution

Brand Identity Redesign

Design System

What I learned

In use at BMW | Q Methods App

Making Training More Engaging to Learn and Scale

Redesigning a multilingual training app to make quality learning more consistent, engaging, and user-friendly

Role

UX/UI Designer & Visual Identity Designer 100%

(Collaborate with 3 engineers & Project Lead)

Time Frame

4 months

Apr - Jul 2025

Tools

Figma, MS Power Apps & Photoshop

Client

BMW Quality Management Dept.(Germany, UK, Austria)

🤖 AI Integration

Proposed content categorisation concepts, leveraged AI to generate alternatives, and refined the final information architecture.

Currently published for desktop version /

Mobile version coming soon

Overview

Redesigning Quality Methods Easier to Learn

Project Background

The Q Methods App is a multilingual internal training application (80+ pages) designed to support BMW employees in learning quality management methods.

The Challenge

Despite its rich content, the existing app lacked visual consistency and presented information in a dense, unstructured way which making it difficult for users to absorb and navigate the material effectively.

The Approach

Working closely with the project lead (engineer), the app was rebranded and restructured to create a more cohesive and user-friendly experience.

Design Direction

The renewed design balances playfulness and professionalism, delivering an engaging learning experience without appearing childish—an explicit requirement from the project lead.

Design Solution

Improve Learning through Visual Hierarchy

Balanced Visual Hierarchy

Reduced the logo size to balance the overall layout
Enlarged the "Start" button to enhance visibility and encourage user interaction

Clear Seperation for Better Focus

Improved user focus by clearly separating the profile section from the training list
Added unique icons to each training to help users quickly identify and differentiate content

Structured Navigation with Progress Feedback

Introduced chapter overview pages for better context and smoother navigation
Added a progress bar to each chapter page to visually communicate learning progress

Visually Guided Contents Page

Added color-changing icons next to each training title to indicate the current selection
Used the brand’s green background to reinforce identity
Applied accent colours to distinguish each training and improve visual consistency

Clear and Interactive Quiz Layout

Included progression text (e.g. "Question 2/5") to inform users of their current position in the quiz
Applied different colours to each multiple-choice option to enhance visual separation and reduce cognitive load

Q Forum Highlights

Brand Identity Redesign

Simplifying the Logo

From Inconsistent Visuals to a Unified Identity

The existing app lacked a clear visual identity, making the experience feel fragmented across screens.

By introducing a structured colour system inspired by BMW's corporate branding and refining the logo, I created a more cohesive and recognisable identity for the Q Methods App.

Logo Design

I retained the original shape and incorporated the letter ‘Q’ to represent the project’s identity, creating a simple and modern logo for the Q Methods App.