Game Walkthrough
UI Redesign
A structured, step-based experience
inspired by The Legend of Zelda: Breath of the Wild.
Role: Product Designer (individual project)
Timeline: 4–6 weeks (iterative redesign)
This project evolved from an earlier concept and was refined through multiple design iterations.
Context
I enjoy playing Zelda, but I often find myself relying on external walkthroughs when navigating shrine challenges. Through talking with other players, I realized this is a common behavior. Many players switch between videos and articles to figure out what to do next.
While these resources are helpful, the experience feels fragmented. It is not always clear where to start, how steps connect, or what action to take in the moment. This becomes even more noticeable for players who are less familiar with combat or controls, where knowing exactly what to do matters.
Problem
Fragmented walkthrough experience
Players rely on multiple sources such as videos, articles, and forums, which makes it difficult to follow a clear and continuous path.
No clear way to track progress
Existing resources do not support step-by-step tracking, making it easy to lose track of where you are.
Overly broad and unstructured content
Information is often spread across large pages or categories, which makes it hard to quickly find what is relevant.
Lack of actionable guidance
Many walkthroughs describe outcomes or routes, but do not clearly explain what actions to take, which creates friction during gameplay.
Design Goal
To address these challenges, I focused on three main directions.
Providing a clear step-by-step progression system
Reducing cognitive load during gameplay
Connecting exploration with actionable guidance
Creating a consistent and scalable UI system
Design Strategy
The goal of this redesign is to create a more structured and intuitive walkthrough experience by:
Structured progression
Break down complex shrine challenges into clear, manageable steps.
System-driven UI
Use consistent components and patterns to organize different types of content.
Integrated exploration and execution
Connect map-based discovery with detailed walkthrough content, so users can move seamlessly from finding a shrine to completing it.
System Design
Step-Based Progression System
To reduce ambiguity in multi-step challenges, I designed a step-based system that guides users through each shrine.
Each step has a clear state, including incomplete, completed, and reset. Users can track their progress at a glance and understand what to do next without needing to interpret large amounts of information.
This system turns walkthroughs from passive content into an interactive process.
Component System
To support different types of content while maintaining consistency, I developed a modular component system.
Card components to structure walkthrough content
Chips for filtering and navigation
Buttons with consistent states and hierarchy
This approach allows the interface to scale while keeping the experience predictable and easy to follow.
Supporting UI components such as buttons, chips, and navigation bars ensure consistent interactions across different screens.
Interaction and State System
Interaction is driven by state changes rather than isolated actions.
Step completion updates both visual state and progress
Feedback is provided through banners such as success, error, and reset
Filter selections dynamically adjust visible content
This creates a more responsive and guided experience, helping users stay oriented during tasks.
Each step has a clear state, including incomplete, active, and completed.
This helps users understand progress and reduces uncertainty during gameplay.
Progress indicators and feedback banners provide real-time responses to user actions, reinforcing completion and guiding next steps.
Map-Based Exploration
Instead of treating walkthroughs as isolated content, I introduced a map-based interaction model.
Users can explore shrines spatially and select a location to access detailed guidance. This connects discovery with execution and reduces the need to switch between multiple external resources.
The focus is on defining a scalable interaction pattern rather than replicating every shrine.
Key Flows
Map to Walkthrough
Users explore the map, select a shrine, and seamlessly transition into a structured walkthrough.
Step Progression
Users complete steps one by one, with clear feedback and progress tracking.
Search and Save
Users can quickly find specific shrines and save them for later reference.
Visual Design
The visual design focuses on clarity and consistency.
A restrained color system to reduce visual noise
Clear typography hierarchy to support readability
Consistent spacing and layout across components
The goal is to support usability first, while still maintaining a cohesive visual style.
Reflection
This project started from a personal experience but evolved into a system-focused design exercise.
Instead of focusing on adding more features, I focused on structuring the experience and reducing complexity. This led to a design that is easier to scale and more aligned with how users actually approach gameplay challenges.
