23 -Internship
DIDI FOOD
Design type:
Mobile Design
Role:
Product designer
Duration:
3 Months
Year:
2023
Go to Deck
23 -Internship
DIDI FOOD
Design type:
Mobile Design
Role:
Product designer
Duration:
3 Months
Year:
2023
Go to Deck
Summary
2023 Internship
Large Stateholders
2C
What is DIDI FOOD?
DIDI Food is a leading food delivery platform under DiDi Chuxing, exclusively serving the Latin American market, including Mexico and Brazil. With a rapidly growing user base, it has become one of the top food delivery apps in the region.
DIDI Food is a leading food delivery platform under DiDi Chuxing, exclusively serving the Latin American market, including Mexico and Brazil. With a rapidly growing user base, it has become one of the top food delivery apps in the region.
In the fall of 2023, as a Product Design Intern, I contributed to several 2C and 2D projects at DIDI Food.
My contributions included:
Optimizing the dish specification menu by implementing a motion design solution to collapse overly long menus.
Enhancing the shopping cart experience by increasing the exposure of combo meals on the product detail and shopping cart pages, resulting in a projected 2.8% GMV increase.
Defining the icon and illustration visual framework for the entire product and developing execution plans.
Coordinating with developers across multiple projects to ensure smooth releases in the next version by creating detailed walkthrough documents.
In the fall of 2023, as a Product Design Intern, I contributed to several 2C and 2D projects at DIDI Food.
My contributions included:
Optimizing the dish specification menu by implementing a motion design solution to collapse overly long menus.
Enhancing the shopping cart experience by increasing the exposure of combo meals on the product detail and shopping cart pages, resulting in a projected 2.8% GMV increase.
Defining the icon and illustration visual framework for the entire product and developing execution plans.
Coordinating with developers across multiple projects to ensure smooth releases in the next version by creating detailed walkthrough documents.
Project 1-Improving User Flow in Lengthy Dish Customization Pages
Overview
The dish customization pages on DIDI Food were frustrating for users. The menus were too long, requiring a lot of scrolling, and the lack of visual cues made it difficult to quickly choose options. This led to a poor experience, making it harder for users to customize their meals easily, resulting in fewer completed purchases. As part of DIDI Food’s focus on improving the food business in 2023, fixing these issues became essential to making the platform easier and more enjoyable to use.
My Role
Product Designer — UIUX,Interaction Design, Visual Design
Design Goal
1- Increase the efficiency of adding items to the cart and improve user satisfaction with the combo selection process.
2- Boost the click-through rate for combo meals, encouraging more users to add them to their orders.
3-Create a better user experience than our competitors, making DIDI Food more enjoyable and easy to use.
Solution Showcase
Feature:Tag Design Consistency + Animation Design
Rethinking Tag States for Better User Guidance
We found that consistent tag design, along with clear animations, greatly improved visibility and user guidance, making it easier for users to identify required selections and complete the process efficiently.
Previous solution :
In long menus, users often couldn’t identify the required items they missed, leading to wasted time as they checked whether all the necessary selections were made.
Feature: Auto-Triggering Menu and Auto-Positioning
Eliminating the Need for Users to Manually Detect Errors
The new design automates error detection, highlighting missing options and providing proactive feedback, saving time and reducing errors.
Previous solution :
Manually triggering the menu caused users to spend extra time navigating through a long list of menu options, leading to confusion and higher bounce rates.
Project 1-Improving User Flow in Lengthy Dish Customization Pages
Overview
The dish customization pages on DIDI Food were frustrating for users. The menus were too long, requiring a lot of scrolling, and the lack of visual cues made it difficult to quickly choose options. This led to a poor experience, making it harder for users to customize their meals easily, resulting in fewer completed purchases. As part of DIDI Food’s focus on improving the food business in 2023, fixing these issues became essential to making the platform easier and more enjoyable to use.
My Role
Product Designer — UIUX,Interaction Design, Visual Design
Design Goal
1- Increase the efficiency of adding items to the cart and improve user satisfaction with the combo selection process.
2- Boost the click-through rate for combo meals, encouraging more users to add them to their orders.
3-Create a better user experience than our competitors, making DIDI Food more enjoyable and easy to use.
Solution Showcase
Feature:Tag Design Consistency + Animation Design
Rethinking Tag States for Better User Guidance
We found that consistent tag design, along with clear animations, greatly improved visibility and user guidance, making it easier for users to identify required selections and complete the process efficiently.
Previous solution :
In long menus, users often couldn’t identify the required items they missed, leading to wasted time as they checked whether all the necessary selections were made.
Feature: Auto-Triggering Menu and Auto-Positioning
Eliminating the Need for Users to Manually Detect Errors
The new design automates error detection, highlighting missing options and providing proactive feedback, saving time and reducing errors.
Previous solution :
Manually triggering the menu caused users to spend extra time navigating through a long list of menu options, leading to confusion and higher bounce rates.
Research
Research
Reviewing existing user experience research
Reviewing existing user experience research
I partnered with user experience researchers and data scientists to look into past research reports to opportunity size and prioritize different suboptimal ordering experiences to tackle. I learned that:
I partnered with user experience researchers and data scientists to look into past research reports to opportunity size and prioritize different suboptimal ordering experiences to tackle. I learned that:
1/ Access Friction
1/ Access -
Friction
Menus with too many options and no auto-collapse make it harder for users to navigate and complete their selections.
Menus with too many options and no auto-collapse make it harder for users to navigate and complete their selections.
2/ Completion Uncertainty
Lack of clear indicators for finished selections leaves users unsure and leads to unnecessary re-checks.
Lack of clear indicators for finished selections leaves users unsure and leads to unnecessary re-checks.
3/ Missed Requirements
Insufficient prompts for required items cause users to skip essential choices, impacting order accuracy.
Insufficient prompts for required items cause users to skip essential choices, impacting order accuracy.
4/ Engagement Gaps
Absence of visual cues like “Popular” tags reduces item appeal and fails to guide user choices effectively.
Absence of visual cues like “Popular” tags reduces item appeal and fails to guide user choices effectively.
Identifying issues in the current page.
Identifying issues in the current page.
Reviewing Existing Design
Reviewing Existing Design
How is the ordering experience with competing products?
How is the ordering experience with competing products?
Competitive Analysis
Competitive Analysis
To gain a deeper understanding of the current dish customization experience, I conducted a competitive analysis of the two most popular apps in Latin America. While both applications have similar information structures, they also show distinct differences in key areas of the customization experience. I began by analyzing these similarities and differences to uncover unique insights.
To gain a deeper understanding of the current dish customization experience, I conducted a competitive analysis of the two most popular apps in Latin America. While both applications have similar information structures, they also show distinct differences in key areas of the customization experience. I began by analyzing these similarities and differences to uncover unique insights.
Design Exploration
Design Exploration
01-The Visual Optimization of Mandatory Option Tags
01-The Visual Optimization of Mandatory Option Tags
As we revisited these pain points, we realized the challenge wasn’t just about users missing errors—it was about tags failing to provide clear guidance throughout the selection process. Instead of merely signaling mistakes, tags should actively support users from initiation to confirmation.
To structure our approach, we developed evaluation criteria and a diagram to map how discoverability and recognizability evolve across tag states—not just for errors, but also to communicate intent, progress, and confirmation. This allowed us to refine how tags proactively guide users, ensuring selections feel effortless rather than uncertain.
As we revisited these pain points, we realized the challenge wasn’t just about users missing errors—it was about tags failing to provide clear guidance throughout the selection process. Instead of merely signaling mistakes, tags should actively support users from initiation to confirmation.
To structure our approach, we developed evaluation criteria and a diagram to map how discoverability and recognizability evolve across tag states—not just for errors, but also to communicate intent, progress, and confirmation. This allowed us to refine how tags proactively guide users, ensuring selections feel effortless rather than uncertain.
[Discoverability] Strength Assessment Criteria:
01. Level of prominence (contrast strength between the element and the page)
02. Visual clutter (the number of similar elements on the same page)
[Recognizability] Strength Assessment Criteria:
01. Contrast strength between text and background
[Discoverability] Strength Assessment Criteria:
01. Level of prominence (contrast strength between the element and the page)
02. Visual clutter (the number of similar elements on the same page)
[Recognizability] Strength Assessment Criteria:
01. Contrast strength between text and background
How is the ordering experience with competing products?
To gain a deeper understanding of the current dish customization experience, I conducted a competitive analysis of the two most popular apps in Latin America. While both applications have similar information structures, they also show distinct differences in key areas of the customization experience. I began by analyzing these similarities and differences to uncover unique insights.
❌
Selected (Discovered 6 = Recognized 6)
-Excessive color variation creates visual clutter, making it harder to focus on key information.
-Reduced hierarchy and emphasis weaken the effectiveness of visual cues.
✅
Selected (Discovered 4 < Recognized 6)
Meets the Expected Criteria
-This Version enhances clarity, prevents confusion, and provides a clear visual hierarchy, all of which improve usability and user experience.
How is the ordering experience with competing products?
To gain a deeper understanding of the current dish customization experience, I conducted a competitive analysis of the two most popular apps in Latin America. While both applications have similar information structures, they also show distinct differences in key areas of the customization experience. I began by analyzing these similarities and differences to uncover unique insights.
Before & After
与competitors的对比
02 - Eliminating the Need for Users to Manually Detect Errors – Auto-Position & Expand
02 - Eliminating the Need for Users to Manually Detect Errors – Auto-Position & Expand
In early versions, users had to manually scroll through the page to find missing required selections, making it easy to overlook error prompts. To address this, we adjusted the interaction flow:
Auto-scroll to the first unselected option, ensuring the error prompt immediately enters the user’s field of view.
Auto-expand collapsed menus to prevent important information from being hidden, improving visibility.
The goal of this change was to reduce users' exploration effort by making the system proactively surface errors, rather than requiring users to search for them.
In early versions, users had to manually scroll through the page to find missing required selections, making it easy to overlook error prompts. To address this, we adjusted the interaction flow:
Auto-scroll to the first unselected option, ensuring the error prompt immediately enters the user’s field of view.
Auto-expand collapsed menus to prevent important information from being hidden, improving visibility.
The goal of this change was to reduce users' exploration effort by making the system proactively surface errors, rather than requiring users to search for them.
Auto-Position & Expand
Auto-Position & Expand
01. Dynamic Spacing Adjustment After Collapsing
01. Dynamic Spacing Adjustment After Collapsing
02. Auto-Positioning of the Recently Selected Option
02. Auto-Positioning of the Recently Selected Option
Reevaluate the User Experience and Iterate
Reevaluate the User Experience and Iterate
From Visual Optimization to Deeper Interaction Issues
From Visual Optimization to Deeper Interaction Issues
Initially, we focused on enhancing the visual clarity of required tags to improve discoverability and recognizability. However, user testing revealed that missing selections remained a recurring issue, indicating a deeper interaction flaw beyond visuals.
In a weekly design review, the PM flagged abnormal click data, showing users needed far more attempts than expected. QA findings reinforced that the system wasn’t effectively guiding users toward completion.
This shifted our focus from static visual cues to a more proactive, system-driven approach, ensuring smoother user navigation and reducing cognitive load.
Initially, we focused on enhancing the visual clarity of required tags to improve discoverability and recognizability. However, user testing revealed that missing selections remained a recurring issue, indicating a deeper interaction flaw beyond visuals.
In a weekly design review, the PM flagged abnormal click data, showing users needed far more attempts than expected. QA findings reinforced that the system wasn’t effectively guiding users toward completion.
This shifted our focus from static visual cues to a more proactive, system-driven approach, ensuring smoother user navigation and reducing cognitive load.
This diagram was created after team discussions to visually illustrate this pain point. It highlights the key issue—the step-by-step error exposure trap—and how it forces users into unnecessary loops.
Next, we need to rethink this logic to ensure users can identify all missing fields in a single interaction, making the process smoother and more intuitive.
Redefining the Design: Finding Breakthroughs in the User Flow
Redefining the Design: Finding Breakthroughs in the User Flow
To further reduce hesitation and improve interaction fluency, we evolved the design to incorporate motion-based guidance:
Animating the required tag – When a field is missed, it shakes slightly, creating a natural focal point.
Combining motion with auto-positioning – Users are now immediately directed to the issue, and the shaking effect reinforces urgency, making it easier to act.
03- Warning for Unselected Required Fields
03- Warning for Unselected Required Fields
两种选项与热门标签说明
两种选项与热门标签说明
整个菜单规格页面, 规格由单选和多选两个部分组成, 我们希望通过改善动效交互体验来减少用户漏选和信息过载的问题,从而提升用户选择菜品规格的流畅度.
整个菜单规格页面, 规格由单选和多选两个部分组成, 我们希望通过改善动效交互体验来减少用户漏选和信息过载的问题,从而提升用户选择菜品规格的流畅度.
两种选项与热门标签说明
两种选项与热门标签说明
整个菜单规格页面, 规格由单选和多选两个部分组成, 我们希望通过改善动效交互体验来减少用户漏选和信息过载的问题,从而提升用户选择菜品规格的流畅度.
整个菜单规格页面, 规格由单选和多选两个部分组成, 我们希望通过改善动效交互体验来减少用户漏选和信息过载的问题,从而提升用户选择菜品规格的流畅度.
Takeaways
I faced the challenge of leading a project from 0 to 1 without prior work experience, collaborating with numerous stakeholders, and delivering design outputs and development for both PC and mobile platforms. This was a difficult process, but over the 8-month project cycle, I developed my own workflow, delving deeply into every stage from user research to implementation.
As a junior student, this was an invaluable opportunity. Working in a complex stakeholder environment, I have grown into a designer capable of effectively collaborating with multiple cross-functional and product teams to achieve common goals. Every interaction and progress presentation during this internship significantly enhanced my professionalism and efficiency.
One of my most enjoyable experiences was our weekly team critique meetings, where we brainstormed together, faced challenges collectively, and made progress as a team.
Takeaways
I faced the challenge of leading a project from 0 to 1 without prior work experience, collaborating with numerous stakeholders, and delivering design outputs and development for both PC and mobile platforms. This was a difficult process, but over the 8-month project cycle, I developed my own workflow, delving deeply into every stage from user research to implementation.
As a junior student, this was an invaluable opportunity. Working in a complex stakeholder environment, I have grown into a designer capable of effectively collaborating with multiple cross-functional and product teams to achieve common goals. Every interaction and progress presentation during this internship significantly enhanced my professionalism and efficiency.
One of my most enjoyable experiences was our weekly team critique meetings, where we brainstormed together, faced challenges collectively, and made progress as a team.