Mission
Case Study
Objective
Design the Mission feature—a unified module for check-ins, mission tasks, and reward claims—to drive user engagement through clear task progression, intuitive interactions, and meaningful incentives.
Background
The Mission feature was designed using gamification principles to encourage repeat engagement through check-ins, mission tasks, and rewards.
To ensure clarity and efficiency, the interface remains clean and easy to scan, reducing cognitive load for users.
The design strictly follows the existing design language system, allowing the feature to feel familiar and cohesive within the product ecosystem.
Branding is reinforced through consistent use of color, typography, and iconography, while subtle animations and feedback moments introduce an element of fun without compromising usability.
Objective
Due to the short timeline, low wireframe & AI is skipped for this module.Therefore, exploring a wide range of concepts were ideated and tested in mid fidelity to explore how gamification elements—such as progress indicators, mission grouping, and rewards—could be presented most effectively. Using the existing design language system ensured consistency across all explorations, while enabling fast iteration without breaking brand guidelines. This approach allowed me to validate ideas visually and converge on a clean, branded, and enjoyable final experience.
Requirement
Changes
Shifts in backend configuration influenced how missions and rewards could be defined and surfaced. The design evolved to accommodate these constraints by simplifying states, improving clarity of progression, and aligning UI patterns with system capabilities—resulting in a more robust and scalable Mission module.
Objective
The final design reflects close alignment with backend logic, translating complex configuration rules into simple, understandable frontend states. This ensured technical feasibility while preserving a structured, gamified experience that clearly guides users through missions and rewards.
Objective
The final concept focuses on a structured and professional presentation of gamification mechanics, removing unnecessary complexity and visual noise. Clear hierarchy, defined states, and actionable cues guide users efficiently through missions, resulting in a straightforward experience that supports both user motivation and system scalability.
Key Learning
This project strengthened my ability to collaborate closely with backend teams and translate system logic into clear, user-friendly frontend designs. I learned the importance of aligning UI states with backend configurations to ensure accuracy and feasibility.
Additionally, I gained a deeper appreciation for how animations and micro-interactions enhance usability and bring a sense of fun and delight to a gaming experience without compromising clarity or professionalism.
What can be improved
Future growth includes refining my expertise in gamification and animation to enhance user engagement. I also aim to improve collaboration with developers to better account for technical constraints, reducing instances where design decisions must compromise backend logic or functionality.
This will help create experiences that are both fun and technically robust.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •
Mission
Case Study
Objective
Design the Mission feature—a unified module for check-ins, mission tasks, and reward claims—to drive user engagement through clear task progression, intuitive interactions, and meaningful incentives.
Background
The Mission feature was designed using gamification principles to encourage repeat engagement through check-ins, mission tasks, and rewards.
To ensure clarity and efficiency, the interface remains clean and easy to scan, reducing cognitive load for users.
The design strictly follows the existing design language system, allowing the feature to feel familiar and cohesive within the product ecosystem.
Branding is reinforced through consistent use of color, typography, and iconography, while subtle animations and feedback moments introduce an element of fun without compromising usability.
Objective
Due to the short timeline, low wireframe & AI is skipped for this module.Therefore, exploring a wide range of concepts were ideated and tested in mid fidelity to explore how gamification elements—such as progress indicators, mission grouping, and rewards—could be presented most effectively. Using the existing design language system ensured consistency across all explorations, while enabling fast iteration without breaking brand guidelines. This approach allowed me to validate ideas visually and converge on a clean, branded, and enjoyable final experience.
Requirement
Changes
Shifts in backend configuration influenced how missions and rewards could be defined and surfaced. The design evolved to accommodate these constraints by simplifying states, improving clarity of progression, and aligning UI patterns with system capabilities—resulting in a more robust and scalable Mission module.
Objective
The final design reflects close alignment with backend logic, translating complex configuration rules into simple, understandable frontend states. This ensured technical feasibility while preserving a structured, gamified experience that clearly guides users through missions and rewards.
Objective
The final concept focuses on a structured and professional presentation of gamification mechanics, removing unnecessary complexity and visual noise. Clear hierarchy, defined states, and actionable cues guide users efficiently through missions, resulting in a straightforward experience that supports both user motivation and system scalability.
Key Learning
This project strengthened my ability to collaborate closely with backend teams and translate system logic into clear, user-friendly frontend designs. I learned the importance of aligning UI states with backend configurations to ensure accuracy and feasibility.
Additionally, I gained a deeper appreciation for how animations and micro-interactions enhance usability and bring a sense of fun and delight to a gaming experience without compromising clarity or professionalism.
What can be improved
Future growth includes refining my expertise in gamification and animation to enhance user engagement. I also aim to improve collaboration with developers to better account for technical constraints, reducing instances where design decisions must compromise backend logic or functionality.
This will help create experiences that are both fun and technically robust.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •
MissionCase Study
Objective
Design the Mission feature—a unified module for check-ins, mission tasks, and reward claims—to drive user engagement through clear task progression, intuitive interactions, and meaningful incentives.
Rationale
The Mission feature was designed using gamification principles to encourage repeat engagement through check-ins, mission tasks, and rewards.
To ensure clarity and efficiency, the interface remains clean and easy to scan, reducing cognitive load for users.
The design strictly follows the existing design language system, allowing the feature to feel familiar and cohesive within the product ecosystem.
Branding is reinforced through consistent use of color, typography, and iconography, while subtle animations and feedback moments introduce an element of fun without compromising usability.
Ideation
Due to the short timeline, low wireframe & AI is skipped for this module.Therefore, exploring a wide range of concepts were ideated and tested in mid fidelity to explore how gamification elements—such as progress indicators, mission grouping, and rewards—could be presented most effectively. Using the existing design language system ensured consistency across all explorations, while enabling fast iteration without breaking brand guidelines. This approach allowed me to validate ideas visually and converge on a clean, branded, and enjoyable final experience.
Requirement
Changes
Shifts in backend configuration influenced how missions and rewards could be defined and surfaced. The design evolved to accommodate these constraints by simplifying states, improving clarity of progression, and aligning UI patterns with system capabilities—resulting in a more robust and scalable Mission module.
Design Ideation
The final design reflects close alignment with backend logic, translating complex configuration rules into simple, understandable frontend states. This ensured technical feasibility while preserving a structured, gamified experience that clearly guides users through missions and rewards.
Final Design
The final concept focuses on a structured and professional presentation of gamification mechanics, removing unnecessary complexity and visual noise. Clear hierarchy, defined states, and actionable cues guide users efficiently through missions, resulting in a straightforward experience that supports both user motivation and system scalability.
Key Learning
This project strengthened my ability to collaborate closely with backend teams and translate system logic into clear, user-friendly frontend designs. I learned the importance of aligning UI states with backend configurations to ensure accuracy and feasibility.
Additionally, I gained a deeper appreciation for how animations and micro-interactions enhance usability and bring a sense of fun and delight to a gaming experience without compromising clarity or professionalism.
What can be improved
Future growth includes refining my expertise in gamification and animation to enhance user engagement. I also aim to improve collaboration with developers to better account for technical constraints, reducing instances where design decisions must compromise backend logic or functionality.
This will help create experiences that are both fun and technically robust.
let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect • design • work • let’s connect •