Behind the design: Vinamilk website & app
Every project begins with a 'why'. For Vinamilk, the goal was to align its digital presence with a major brand refresh, creating a modern platform to connect with a new generation of consumers while navigating tight deadlines and a lean team.
Lead Designer
Leading UI/UX strategy and execution, from concept to final pixel
Web & App Scope
Creating a cohesive brand experience across platforms
2023-2025
Guiding the product's design evolution from 2023 to 2025
Context
My 2-year journey to build the foundation for Vinamilk’s online presence
2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
On July 2023, Vinamilk officially launched its new branding after nearly five decades, but the digital presence was outdated. The primary business need was straight-forward: to quickly launch a MVP reflecting the new visuals. Technical team decided to use Shopify for fast shipping, and my job was to complete both the corporal & e-commerce website design within 2 months.
The website MVP was successfully launched on December 2023 under the domain new.vinamilk.com.vn, along with the first version of its e-commerce app.
2024
Design overhaul to raise the bar
The MVP served its purpose, but the real work had just started. The question became: How can we design an experience that stands out visually from the market? How can we transform the new branding and optimize it for product design?
I worked closely with stakeholders and internal creative team to come up with an early concept by April 2024. This new UI brought forth not only a visual overhaul, but also a big system change as half of the back-end needed to run internally for the UI to come to life. The final revamp of website & app went live on September 2024, focusing on the e-commerce side (eShop). Half of the corporal webpages had not been revamped yet until 2025.
2025
Robust releases of new e-commerce features
The revamp was a success, setting the foundation for Vinamilk’s D2C experience as well as its master design system. The remaining corporal pages were completed by July 2025 alongside robust releases of new e-commerce features and UX enhancements, enabled by another system update which was replacing Shopify completely with internal services.
By August 2025, Vinamilk eShop made a new revenue record* after 2 years in operation, exceeding expectations and proving its potentials for future expansion.
(*) Due to confidentiality, I cannot disclose the precise number.
Phase 1 ⎯ 2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
Challenge
Solve a complex branding with limited time
Complex branding
5 typefaces & 28 colors. Various patterns and a library of illustrations
Tight timeline
2-month deadline for each MVP (website & app)
Limited resources
Including corporal pages and e-commerce flows
View Vinamilk brand identity here
5 typefaces including VNM Display, VNM Standard, VNM Mono, VNM Text, and Inter
Goal
MVPs to rebrand & replace current website & app
Revamp website. Add e-com feature.
- To revamp the corporal website (view the old corporal website here)
- To add e-commerce feature (previously called Giấc mơ sữa việt - hosted separately from the corporal one)
- To ship as fast as possible
Launch a completely new e-com app
- To design a new e-commerce app and replace the current app (called Giấc mơ sữa việt App)
- To ship as fast as possible
My Approach
For branding: Be selective in design principles
4 typefaces
Reduced 5 typefaces to 4: VNM Display for giant headings, VNM Std for smaller headings and branded text, VNM Text for paragraph, and Inter for CTA.
2 primary colors
Use VNM Cream as the main background & VNM Blue as the main foreground color.
1 key element
Use only a stripe pattern as the visual cue & some spot illustrations to tie it back to the branding.
For website: Efficient collaboration & delagation
As Vinamilk website was the priority, I collaborated with my teammate (shout out to anh Phi) and deliver 30+ screen design in 2 months.
Plan ahead
- Ranked tasks by priority and complexity
- Drafted an initial plan to follow
- Limited time for each task to ensure delivery time
Clear ownership
- Divided workload based on each designer’s capabilities
- I was in charge of the UI principles, e-commerce flows, and some corporal pages
- My teammate was in charge of main corporal pages and loyalty program
Daily sync-up
- Updated daily on progress & blockers
- Reviewed with developers before pushing design to dev board
- Noticed teammate if any changes might affect timeline
Early concepts
For app: Simplify features & opt for common e-com UX
As the app was the second priority, I had more time to prepare components, UI patterns, and plan app features. I chose to go with common UX patterns (browsing offerings from homepage, browsing by category in listing, basic PDP, cart & checkout based on Shopify).
I also took the initiative to manage the app development end-to-end, from project management, feature planning, to UI/UX design and working closely with mobile developers.
Speed-to-market
- 2-3 months from ideas to shipped product
- Design scope: wireframe, prototype, UI/UX design
- Other scope: project & product management
Feature planning
- Features were categorized by MVP-focused, what’s in plan for next phase, and future suggestions
- Features were based on personas, business expectations, and my own vision for the app
Project ownership
- I worked directly with mobile developers to delegate tasks
- I also took on QC role when short-staffed to ensure quality before launching
High-level user flows
Outcome & takeaway
Designed 30+ screens in 2 months. Launched both MVPs successfully after 5 months.
Outcome
- Designed products, end-to-end: this was my first time building an app & component library from scratch
- Upgraded project management skills
- Had first-hand experience in product & feature planning
- Successfully setting the foundation for Vinamilk’s D2C digital experience
Takeaway
- A small team can achieve great outcome with strategic planning
- Always set clear goals before starting any project
- Manage team’s focus zone: anything out of that zone is unnecessary and should be avoided
- Tech sets constraints, business set goals, user sets expectations, designer puts them together
Website: Homepage
Phase 2 ⎯ 2024
Design overhaul to raise the bar
Challenge
The MVPs only conveyed 10% of the branding
After the MVP, the focus was shifted toward:
- How can we design an experience that stands out visually from the market?
- How can we transform the new branding and optimize it for product design?
Design must be flexible & scalable
Vinamilk changed not only their logo, but also their design philosophy & brand story. Digital transformation was also happening at the time, with in-house technical upgrade and expansion. The website and app had to be constantly updated to match branding, business & technical growth. The question became:
- How can we minimize design decisions & ship faster?
For the majority, I was the sole designer on this project. Thankfully, my teammate (shout out to chị Nhàn) gave me a helping hand with the app during this time.
My Approach
For branding: A research-backed design strategy that took double the time (4 months)
After the MVPs, I could understand the branding more and was aware of its constraint in product design. However, the MVPs only solved the complexity by using a small portion of the brand identity. The expectation was to develop a design system that matched the same level of sophistication and still optimized for product design.
Deep branding analysis
- Analysized
UX strategy
- Defined user personas
- Created mapping for user needs, expectations, and pitfall to avoid for each stage
- Proposed UX solutions
Quick prototyping
I tested each concept through various prototypes to persuade stakeholders and ensure usability before implementing in my design
Typeface comparison & testing
For scalability: Same principles for multiple platforms
E-commerce features were always developed simultaneously for web and app, putting heavy strains on the designer. I was the sole designer on this project for the majority
Flexible components for web & mobile app
Outcome & takeaway
Setting Vinamilk’s D2C design foundation
Outcome
- Successfully designed a UI that matched stakeholder’s expectations
- Ensured the flexibility and scalability of the design
- Delivered 23+ flows, hundreds of screen designed
- Worked closely with technical & business units on every release
Takeaway
- When to take a step back: I spent 4 months to solve the branding to save 50% of design effort later on
- Tech sets constraints, business sets goals, user sets expectations, and designer puts them together
- Figma variables unlocked crazy opportunities
View current Vinamilk website here
Website: Homepage
Phase 3 ⎯ 2025
Robust releases of new e-commerce features
Challenge
More requirements, limited resources
Operating as a small design unit required efficiency, clear communication, and a willingness to wear multiple hats to keep the project moving forward. As the platform grew bigger, so did the demand we got from business units.
1 designer on the job
I was the only designer of D2C products in 2025. The team consists of 1 designer, 1 PO, 1+ QCs, and 6+ developers.
Technically demanding
Shopify was replaced by internal system, opening up new possibilities as well as challenges. Flood of requests came from all departments, with a heavy focus on e-commerce expansion
Business-heavy
Including corporal pages and e-commerce flows
My approach
Stepping up to fill the gap
Operating as a small design unit required efficiency, clear communication, and a willingness to wear multiple hats to keep the project moving forward. As the platform grew bigger, so did the demand we got from business units.
End-to-end design ownership
Established and maintained a cohesive design system across both web and mobile app platforms
Progress facilitation (PM/PO)
Helped define feature requirements and prioritize backlogs to ensure the development team was on track
Communication bridging
Including corporal pages and e-commerce flows
Outcome & takeaway
Released 7 new features in 4 months through strong collaboration and communication
Outcome
- 7 new features released, positively impacting user engagement and sales
- Redesigned Checkout flow (previously Shopify’s checkout), added Guest checkout flow, Express delivery, Geo-fencing
Takeaway
- A small team can achieve great outcome with strategic planning
- Always set clear goals before starting any project
- Manage team’s focus zone: anything out of that zone is unnecessary and should be avoided
- Tech sets constraints, business set goals, user sets expectations, designer puts them together
View current Vinamilk website here
App: Refined UI, enhanced shopping UX, new Checkout, Voucher wallet, Geo-fencing
This website was created with Figma Site. View design file.
Behind the design: Vinamilk website & app
Every project begins with a 'why'. For Vinamilk, the goal was to align its digital presence with a major brand refresh, creating a modern platform to connect with a new generation of consumers while navigating tight deadlines and a lean team.
Lead Designer
Leading UI/UX strategy and execution, from concept to final pixel
Web & App Scope
Creating a cohesive brand experience across platforms
2023-2025
Guiding the product's design evolution from 2023 to 2025
Context
My 2-year journey to build the foundation for Vinamilk’s online presence
2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
On July 2023, Vinamilk officially launched its new branding after nearly five decades, but the digital presence was outdated. The primary business need was straight-forward: to quickly launch a MVP reflecting the new visuals. Technical team decided to use Shopify for fast shipping, and my job was to complete both the corporal & e-commerce website design within 2 months.
The website MVP was successfully launched on December 2023 under the domain new.vinamilk.com.vn, along with the first version of its e-commerce app.
2024
Design overhaul to raise the bar
The MVP served its purpose, but the real work had just started. The question became: How can we design an experience that stands out visually from the market? How can we transform the new branding and optimize it for product design?
I worked closely with stakeholders and internal creative team to come up with an early concept by April 2024. This new UI brought forth not only a visual overhaul, but also a big system change as half of the back-end needed to run internally for the UI to come to life. The final revamp of website & app went live on September 2024, focusing on the e-commerce side (eShop). Half of the corporal webpages had not been revamped yet until 2025.
2025
Robust releases of new e-commerce features
The revamp was a success, setting the foundation for Vinamilk’s D2C experience as well as its master design system. The remaining corporal pages were completed by July 2025 alongside robust releases of new e-commerce features and UX enhancements, enabled by another system update which was replacing Shopify completely with internal services.
By August 2025, Vinamilk eShop made a new revenue record* after 2 years in operation, exceeding expectations and proving its potentials for future expansion.
(*) Due to confidentiality, I cannot disclose the precise number.
Phase 1 ⎯ 2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
Challenge
Solve a complex branding with limited time
Complex branding
5 typefaces & 28 colors. Various patterns and a library of illustrations
Tight timeline
2-month deadline for each MVP (website & app)
Limited resources
Including corporal pages and e-commerce flows
View Vinamilk brand identity here
5 typefaces including VNM Display, VNM Standard, VNM Mono, VNM Text, and Inter
Goal
MVPs to rebrand & replace current website & app
Revamp website. Add e-com feature.
- To revamp the corporal website (view the old corporal website here)
- To add e-commerce feature (previously called Giấc mơ sữa việt - hosted separately from the corporal one)
- To ship as fast as possible
Launch a completely new e-com app
- To design a new e-commerce app and replace the current app (called Giấc mơ sữa việt App)
- To ship as fast as possible
My Approach
For branding: Be selective in design principles
4 typefaces
Reduced 5 typefaces to 4: VNM Display for giant headings, VNM Std for smaller headings and branded text, VNM Text for paragraph, and Inter for CTA.
2 primary colors
Use VNM Cream as the main background & VNM Blue as the main foreground color.
1 key element
Use only a stripe pattern as the visual cue & some spot illustrations to tie it back to the branding.
For website: Efficient collaboration & delagation
As Vinamilk website was the priority, I collaborated with my teammate (shout out to anh Phi) and deliver 30+ screen design in 2 months.
Plan ahead
- Ranked tasks by priority and complexity
- Drafted an initial plan to follow
- Limited time for each task to ensure delivery time
Clear ownership
- Divided workload based on each designer’s capabilities
- I was in charge of the UI principles, e-commerce flows, and some corporal pages
- My teammate was in charge of main corporal pages and loyalty program
Daily sync-up
- Updated daily on progress & blockers
- Reviewed with developers before pushing design to dev board
- Noticed teammate if any changes might affect timeline
Early concepts
For app: Simplify features & opt for common e-com UX
As the app was the second priority, I had more time to prepare components, UI patterns, and plan app features. I chose to go with common UX patterns (browsing offerings from homepage, browsing by category in listing, basic PDP, cart & checkout based on Shopify).
I also took the initiative to manage the app development end-to-end, from project management, feature planning, to UI/UX design and working closely with mobile developers.
Speed-to-market
- 2-3 months from ideas to shipped product
- Design scope: wireframe, prototype, UI/UX design
- Other scope: project & product management
Feature planning
- Features were categorized by MVP-focused, what’s in plan for next phase, and future suggestions
- Features were based on personas, business expectations, and my own vision for the app
Project ownership
- I worked directly with mobile developers to delegate tasks
- I also took on QC role when short-staffed to ensure quality before launching
High-level user flows
Outcome & takeaway
Designed 30+ screens in 2 months. Launched both MVPs successfully after 5 months.
Outcome
- Designed products, end-to-end: this was my first time building an app & component library from scratch
- Upgraded project management skills
- Had first-hand experience in product & feature planning
- Successfully setting the foundation for Vinamilk’s D2C digital experience
Takeaway
- A small team can achieve great outcome with strategic planning
- Always set clear goals before starting any project
- Manage team’s focus zone: anything out of that zone is unnecessary and should be avoided
- Tech sets constraints, business set goals, user sets expectations, designer puts them together
Website: Homepage
Phase 2 ⎯ 2024
Design overhaul to raise the bar
Challenge
The MVPs only conveyed 10% of the branding
After the MVP, the focus was shifted toward:
- How can we design an experience that stands out visually from the market?
- How can we transform the new branding and optimize it for product design?
Design must be flexible & scalable
Vinamilk changed not only their logo, but also their design philosophy & brand story. Digital transformation was also happening at the time, with in-house technical upgrade and expansion. The website and app had to be constantly updated to match branding, business & technical growth. The question became:
- How can we minimize design decisions & ship faster?
For the majority, I was the sole designer on this project. Thankfully, my teammate (shout out to chị Nhàn) gave me a helping hand with the app during this time.
My Approach
For branding: A research-backed design strategy that took double the time (4 months)
After the MVPs, I could understand the branding more and was aware of its constraint in product design. However, the MVPs only solved the complexity by using a small portion of the brand identity. The expectation was to develop a design system that matched the same level of sophistication and still optimized for product design.
Deep branding analysis
- Analysized
UX strategy
- Defined user personas
- Created mapping for user needs, expectations, and pitfall to avoid for each stage
- Proposed UX solutions
Quick prototyping
I tested each concept through various prototypes to persuade stakeholders and ensure usability before implementing in my design
Typeface comparison & testing
For scalability: Same principles for multiple platforms
E-commerce features were always developed simultaneously for web and app, putting heavy strains on the designer. I was the sole designer on this project for the majority
Flexible components for web & mobile app
Outcome & takeaway
Setting Vinamilk’s D2C design foundation
Outcome
- Successfully designed a UI that matched stakeholder’s expectations
- Ensured the flexibility and scalability of the design
- Delivered 23+ flows, hundreds of screen designed
- Worked closely with technical & business units on every release
Takeaway
- When to take a step back: I spent 4 months to solve the branding to save 50% of design effort later on
- Tech sets constraints, business sets goals, user sets expectations, and designer puts them together
- Figma variables unlocked crazy opportunities
View current Vinamilk website here
Website: Homepage
Phase 3 ⎯ 2025
Robust releases of new e-commerce features
Challenge
More requirements, limited resources
Operating as a small design unit required efficiency, clear communication, and a willingness to wear multiple hats to keep the project moving forward. As the platform grew bigger, so did the demand we got from business units.
1 designer on the job
I was the only designer of D2C products in 2025. The team consists of 1 designer, 1 PO, 1+ QCs, and 6+ developers.
Technically demanding
Shopify was replaced by internal system, opening up new possibilities as well as challenges. Flood of requests came from all departments, with a heavy focus on e-commerce expansion
Business-heavy
Including corporal pages and e-commerce flows
My approach
Stepping up to fill the gap
Operating as a small design unit required efficiency, clear communication, and a willingness to wear multiple hats to keep the project moving forward. As the platform grew bigger, so did the demand we got from business units.
End-to-end design ownership
Established and maintained a cohesive design system across both web and mobile app platforms
Progress facilitation (PM/PO)
Helped define feature requirements and prioritize backlogs to ensure the development team was on track
Communication bridging
Including corporal pages and e-commerce flows
Outcome & takeaway
Released 7 new features in 4 months through strong collaboration and communication
Outcome
- 7 new features released, positively impacting user engagement and sales
- Redesigned Checkout flow (previously Shopify’s checkout), added Guest checkout flow, Express delivery, Geo-fencing
Takeaway
- A small team can achieve great outcome with strategic planning
- Always set clear goals before starting any project
- Manage team’s focus zone: anything out of that zone is unnecessary and should be avoided
- Tech sets constraints, business set goals, user sets expectations, designer puts them together
View current Vinamilk website here
App: Refined UI, enhanced shopping UX, new Checkout, Voucher wallet, Geo-fencing
This website was created with Figma Site. View design file.
Behind the design: Vinamilk website & app
Every project begins with a 'why'. For Vinamilk, the goal was to align its digital presence with a major brand refresh, creating a modern platform to connect with a new generation of consumers while navigating tight deadlines and a lean team.
Lead Designer
Leading UI/UX strategy and execution, from concept to final pixel
Web & App Scope
Creating a cohesive brand experience across platforms
2023-2025
Guiding the product's design evolution from 2023 to 2025
Context
My 2-year journey to build the foundation for Vinamilk’s online presence
2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
On July 2023, Vinamilk officially launched its new branding after nearly five decades, but the digital presence was outdated. The primary business need was straight-forward: to quickly launch a MVP reflecting the new visuals. Technical team decided to use Shopify for fast shipping, and my job was to complete both the corporal & e-commerce website design within 2 months.
The website MVP was successfully launched on December 2023 under the domain new.vinamilk.com.vn, along with the first version of its e-commerce app.
2024
Design overhaul to raise the bar
The MVP served its purpose, but the real work had just started. The question became: How can we design an experience that stands out visually from the market? How can we transform the new branding and optimize it for product design?
I worked closely with stakeholders and internal creative team to come up with an early concept by April 2024. This new UI brought forth not only a visual overhaul, but also a big system change as half of the back-end needed to run internally for the UI to come to life. The final revamp of website & app went live on September 2024, focusing on the e-commerce side (eShop). Half of the corporal webpages had not been revamped yet until 2025.
2025
Robust releases of new e-commerce features
The revamp was a success, setting the foundation for Vinamilk’s D2C experience as well as its master design system. The remaining corporal pages were completed by July 2025 alongside robust releases of new e-commerce features and UX enhancements, enabled by another system update which was replacing Shopify completely with internal services.
By August 2025, Vinamilk eShop made a new revenue record* after 2 years in operation, exceeding expectations and proving its potentials for future expansion.
(*) Due to confidentiality, I cannot disclose the precise number.
Phase 1 ⎯ 2023
From Vietnam’s biggest rebranding in 2023 to fast-shipping MVPs
Challenge
Solve a complex branding with limited time
Complex branding
5 typefaces & 28 colors. Various patterns and a library of illustrations
Tight timeline
2-month deadline for each MVP (website & app)
Limited resources
2 designers for website and 1 designer for app
View Vinamilk brand identity here
5 typefaces including VNM Display, VNM Standard, VNM Mono, VNM Text, and Inter
Goal
MVPs to rebrand & replace current website & app
Revamp website. Add e-com feature.
- To revamp the corporal website (view the old corporal website here)
- To add e-commerce feature (previously called Giấc mơ sữa việt - hosted separately from the corporal one)
- To ship as fast as possible
Launch a completely new e-com app
- To design a new e-commerce app and replace the current app (called Giấc mơ sữa việt App)
- To ship as fast as possible
My Approach
For branding: Be selective in design principles
4 typefaces
Reduced 5 typefaces to 4: VNM Display for giant headings, VNM Std for smaller headings and branded text, VNM Text for paragraph, and Inter for CTA.
2 primary colors
Use VNM Cream as the main background & VNM Blue as the main foreground color.
1 key element
Use only a stripe pattern as the visual cue & some spot illustrations to tie it back to the branding.
For website: Collaborate & delegate efficiently
As Vinamilk website was the priority, I collaborated with my teammate (shout out to anh Phi) and deliver 30+ screen design in 2 months.
Plan ahead
- Ranked tasks by priority and complexity
- Drafted an initial plan to follow
- Limited time for each task to ensure delivery time
Clear ownership
- Divided workload based on each designer’s capabilities
- I was in charge of the UI principles, e-commerce flows, and some corporal pages
- My teammate was in charge of main corporal pages and loyalty program
Daily sync-up
- Updated daily on progress & blockers
- Reviewed with developers before pushing design to dev board
- Noticed teammate if any changes might affect timeline
Early concepts
For app: Simplify features & opt for common e-com UX
As the app was the second priority, I had more time to prepare components, UI patterns, and plan app features. I chose to go with common UX patterns (browsing offerings from homepage, browsing by category in listing, basic PDP, cart & checkout based on Shopify).
I also took the initiative to manage the app development end-to-end, from project management, feature planning, to UI/UX design and working closely with mobile developers.
Speed-to-market
- 2-3 months from ideas to shipped product
- Design scope: wireframe, prototype, UI/UX design
- Other scope: project & product management
Feature planning
- Features were categorized by MVP-focused, what’s in plan for next phase, and future suggestions
- Features were based on personas, business expectations, and my own vision for the app
Project ownership
- I worked directly with mobile developers to delegate tasks
- I also took on QC role when short-staffed to ensure quality before launching
High-level user flows
Outcome & takeaway
Designed 30+ screens in 2 months. Launched both MVPs successfully after 5 months.
Outcome
- Designed products, end-to-end: this was my first time building an app & component library from scratch
- Upgraded project management skills
- Had first-hand experience in product & feature planning
- Successfully setting the foundation for Vinamilk’s D2C digital experience
Takeaway
- A small team can achieve great outcome with strategic planning
- Always set clear goals before starting any project
- Manage team’s focus zone: anything out of that zone is unnecessary and should be avoided
Website: Homepage
Phase 2 ⎯ 2024
Design overhaul to raise the bar
Challenge
The MVPs only conveyed 10% of the branding
After the MVP, the focus was shifted toward:
- How can we design an experience that stands out visually from the market?
- How can we transform the new branding and optimize it for product design?
Design must be flexible & scalable
Vinamilk changed not only their logo, but also their design philosophy & brand story. Digital transformation was also happening at the time, with in-house technical upgrade and expansion. The website and app had to be constantly updated to match branding, business & technical growth. The question became:
- How can we minimize design decisions & ship faster?
For the majority, I was the sole designer on this project. Thankfully, my teammate (shout out to chị Nhàn) gave me a helping hand with the app adaptation during this time.
My Approach
For branding: A research-backed design strategy that took double the time (4 months)
After the MVPs, I could understand the branding more and was aware of its constraint in product design. However, the MVPs only solved the complexity by using a small portion of the brand identity. The expectation was to develop a design system that matched the same level of sophistication and still optimized for product design.
Deep branding analysis
- Researched on the functionality of each elements
- Analyzed the do’s and don’ts
- Created concepts based on gained insights
UX strategy
- Defined user personas
- Created mapping for user needs, expectations, and pitfall to avoid for each stage
- Proposed UX solutions
Quick prototyping
I tested each concept through various prototypes to persuade stakeholders and ensure usability before implementing in my design
Typeface comparison & testing
For scalability: Same principles for multiple platforms
I created a new design system with unified principles across desktop web, mobile web, and mobile application with:
- Responsive guidelines (grids, margin & spacing)
- 01 foundation for typography (desktop - mobile) and color (primitive - semantic)
- Multi-platform components library with specific adjustment for mobile interaction
This way, I could monitor and ensure consistency of the project even with different designers on board.
Flexible components for web & mobile app
Outcome & takeaway
Setting Vinamilk’s D2C design foundation
Outcome
- Successfully designed a UI that matched stakeholder’s expectations
- Ensured the flexibility and scalability of the design
- Delivered 23+ flows, hundreds of screen designed
- Worked closely with technical & business units on every release
Takeaway
- When to take a step back: I spent 4 months to solve the branding to save 50% of design effort later on
- Tech sets constraints, business sets goals, user sets expectations, and designer puts them together
- Figma variables unlocked crazy opportunities
View current Vinamilk website here
Website: Homepage
Phase 3 ⎯ 2025
Robust releases of new e-commerce features
Challenge
More requirements, limited resources
As the platform grew bigger, so did the demand we got from business units. Operating as a small design unit required efficiency, clear communication, and a willingness to wear multiple hats to keep the project moving forward.
1 designer on the job
I was the only designer of D2C products in 2025. The team consists of 1 designer, 1 PO, 1+ QCs, and 6+ developers.
Technically demanding
Shopify was replaced by internal system, opening up new possibilities as well as challenges.
Business-heavy
Flood of requests came from all departments, with a heavy focus on e-commerce expansion.
My approach
Stepping up to fill the gap
As Lead Designer, I guided the product's design vision. However, on a lean team, success is a collective effort. I often stepped into hybrid roles to bridge gaps, ensuring our small team could achieve ambitious goals.
End-to-end design ownership
Established and maintained a cohesive design system across both web and mobile app platforms
Progress facilitation (PM/PO)
I assisted PO with defining feature requirements and prioritizing backlogs to ensure the development team was on track
Communication bridging
Acted as a key communication link between design, development, and business units to ensure strategic alignment
Outcome & takeaway
Released 7 new features in 4 months through strong collaboration and communication
Outcome
- 7 new features released, positively impacting user engagement and sales
- Redesigned Checkout flow (previously Shopify’s checkout), introduced new features like Guest checkout, Geo-fencing, Express delivery, Voucher wallets, O2O order management
- Increase in sales and new users
Takeaway
- Systematic design, though takes considerable time to set up, is worth investing
- Fast release requires a flexible design system
- A design system should be made to be manageable with current capabilities
- Final design is the harmony between UX best practices & unique requirements from business
View current Vinamilk website here
App: Refined UI, enhanced shopping UX, new Checkout, Voucher wallet, Geo-fencing
This website was created with Figma Site. View design file.