Unilever Learning App – UI Concept for MVP Version
Unilever Learning App – UI Concept for MVP Version
Around May 2024, at the Hoa Lac Hi-Tech Park — often referred to as the Silicon Valley of Northern Vietnam — the summer heat was over 40°C.
I came to the office as usual, not knowing that today, we would receive one of the most exciting briefs of the year.
Our Art Director at G.Studio announced that we had just been awarded a new project from Unilever, a global brand that almost everyone on the planet has encountered at least once through their products.
After nearly two hours of internal discussion, our small design team — including one UX Researcher, one Design Lead, and myself — outlined the project goals, working timeline, and proposal plan.
For this project, I took on the role of UI Designer, responsible for designing the main interface of Unilever’s new internal learning application.
Unilever’s team requested a Minimum Viable Product (MVP) within just two months, which meant we had about one month to complete all the design deliverables before the development team began working in parallel.
It was a tight timeline — but also a rare opportunity to create something that could impact a global corporation.
About Unilever
Unilever is one of the world’s largest fast-moving consumer goods (FMCG) companies, founded in 1929 in the UK and the Netherlands.
With more than 400 brands under its portfolio — including Dove, Lifebuoy, Sunsilk, Omo, Knorr, Lipton, and Wall’s — Unilever has become a global symbol of sustainability, innovation, and human-centric values.
Unilever is one of the world’s largest fast-moving consumer goods (FMCG) companies, founded in 1929 in the UK and the Netherlands.
With more than 400 brands under its portfolio — including Dove, Lifebuoy, Sunsilk, Omo, Knorr, Lipton, and Wall’s — Unilever has become a global symbol of sustainability, innovation, and human-centric values.
Their philosophy is encapsulated in the message:
“Making Sustainable Living Commonplace.”
In Vietnam, Unilever has been present since 1995, contributing not only through consumer products but also through long-term community, education, and environmental programs.
With its global yet human spirit, Unilever always places people at the heart of its operations — not only consumers, but also its employees.
This human-centered DNA became the foundation for how I and the G.Studio team approached the design concept.
Their philosophy is encapsulated in the message:
“Making Sustainable Living Commonplace.”
In Vietnam, Unilever has been present since 1995, contributing not only through consumer products but also through long-term community, education, and environmental programs.
With its global yet human spirit, Unilever always places people at the heart of its operations — not only consumers, but also its employees.
This human-centered DNA became the foundation for how I and the G.Studio team approached the design concept.
Project Context and Objective
Project Context and Objective
Unilever wanted to create an internal learning and training application for its sales and retail teams — those who directly represent the brand in the field.
The app would deliver lessons about products, brand culture, and sales techniques, while also allowing managers to track employee learning progress.
The MVP version focused on Wall’s, Unilever’s ice cream brand.
The main goal was simple but meaningful:
Equip employees with product knowledge → help them sell more effectively → boost revenue for both subsidiaries and Unilever globally.
Carrying this responsibility, I felt both the pressure and the excitement. It was challenging, but it was also a chance to create real value — because the impact of this project extended far beyond UI screens; it affected how an entire organization learns and grows.
That very afternoon, I sat down with Ms. Tune – the project’s UX Researcher — to break down the scope, requirements, and target of the MVP before moving into the design process.
Unilever wanted to create an internal learning and training application for its sales and retail teams — those who directly represent the brand in the field.
The app would deliver lessons about products, brand culture, and sales techniques, while also allowing managers to track employee learning progress.
The MVP version focused on Wall’s, Unilever’s ice cream brand.
The main goal was simple but meaningful:
Equip employees with product knowledge → help them sell more effectively → boost revenue for both subsidiaries and Unilever globally.
Carrying this responsibility, I felt both the pressure and the excitement. It was challenging, but it was also a chance to create real value — because the impact of this project extended far beyond UI screens; it affected how an entire organization learns and grows.
That very afternoon, I sat down with Ms. Tune – the project’s UX Researcher — to break down the scope, requirements, and target of the MVP before moving into the design process.
Target and Requirements
Target
- Build a training app for salespeople and operators of Wall’s (Unilever). - In the long term, the app will expand into a platform for training, communication, and internal engagement across Unilever’s workforce.
Target
- Build a training app for salespeople and operators of Wall’s (Unilever). - In the long term, the app will expand into a platform for training, communication, and internal engagement across Unilever’s workforce.
Requirements
- Product business analysis - Consulting and proposing design solutions - Build UX/UI that is interesting, fun, and interactive, encouraging users to log in daily - Integrate video, gamification, and reward systems Ensure scalability for future development after MVP
Requirements
- Product business analysis - Consulting and proposing design solutions - Build UX/UI that is interesting, fun, and interactive, encouraging users to log in daily - Integrate video, gamification, and reward systems Ensure scalability for future development after MVP
Approach and Design Strategy
Approach and Design Strategy
Every project requires a tailored approach.
Unilever’s core values revolve around People, Joy, and Global Connection.
So our concept was born:
“Happy People, Happy Planet.”
Inspired by the legacy of Wall’s — the world’s largest ice cream brand with over 100 years of spreading joy — our goal was to build an app where employees could feel inspired by the company’s purpose while learning and developing professionally.
Beyond a simple training tool, the app aimed to foster a sense of connection, motivation, and continuous growth, all deeply embedded in Unilever’s corporate culture.
Every project requires a tailored approach.
Unilever’s core values revolve around People, Joy, and Global Connection.
So our concept was born:
“Happy People, Happy Planet.”
Inspired by the legacy of Wall’s — the world’s largest ice cream brand with over 100 years of spreading joy — our goal was to build an app where employees could feel inspired by the company’s purpose while learning and developing professionally.
Beyond a simple training tool, the app aimed to foster a sense of connection, motivation, and continuous growth, all deeply embedded in Unilever’s corporate culture.
From Maslow to Employee Engagement
From Maslow to Employee Engagement
We based our research on Maslow’s Hierarchy of Needs, applying it to employee engagement levels.
This helped us understand the emotional layers behind learning motivation within organizations:
At the base, employees need to feel secure and compensated fairly → the app must be friendly and trustworthy.
In the middle layers, they seek connection and recognition → we designed with leaderboards, badges, and reward systems.
At the top, they pursue growth and self-actualization → the UI should inspire positivity, optimism, and purpose.
We based our research on Maslow’s Hierarchy of Needs, applying it to employee engagement levels.
This helped us understand the emotional layers behind learning motivation within organizations:
At the base, employees need to feel secure and compensated fairly → the app must be friendly and trustworthy.
In the middle layers, they seek connection and recognition → we designed with leaderboards, badges, and reward systems.
At the top, they pursue growth and self-actualization → the UI should inspire positivity, optimism, and purpose.
Core Value for employees
From this insight, we defined both the goal of building the application and its core values for employees, represented in five pillars:
Product Roadmap
To align with Unilever’s long-term vision, we proposed a two-phase product roadmap:
Phase 1 - MVP
Learning/Training space Content for Unit 1: D.A.V.E 101 Quiz validating understanding IC branding Basic usage stats Capturing score
Phase 1 - MVP
Learning/Training space Content for Unit 1: D.A.V.E 101 Quiz validating understanding IC branding Basic usage stats Capturing score
Phase 2 - After MVP
Onboarding Unit Creator Feed Tips and Facts about IC business User profile Leader boards Checklist and assessments Advanced functions (To be defined)
Phase 2 - After MVP
Onboarding Unit Creator Feed Tips and Facts about IC business User profile Leader boards Checklist and assessments Advanced functions (To be defined)
UI Concept Creation
UI Concept Creation
As the UI Creator, the first step was to determine the Tone, Mood, and Look of the product.
To stay aligned with Unilever’s brand DNA, I started by analyzing its official website and global branding materials, which served as the visual and emotional foundation. Here's some photos I was collected from Unilever website.
As the UI Creator, the first step was to determine the Tone, Mood, and Look of the product.
To stay aligned with Unilever’s brand DNA, I started by analyzing its official website and global branding materials, which served as the visual and emotional foundation. Here's some photos I was collected from Unilever website.
Keywords
Keywords
Keywords
From the visual elements I gathered and the overall look & feel of Unilever’s website, I distilled the following keywords that best capture the brand’s spirit and emotional tone:
From the visual elements I gathered and the overall look & feel of Unilever’s website, I distilled the following keywords that best capture the brand’s spirit and emotional tone:
Friendly
Positive
Global
Human
Illustration Style
Illustration Style
Illustration Style
Flat, friendly, lightly shadowed characters that reflect diversity in gender, race, and culture — capturing the inclusive spirit of Unilever.
Flat, friendly, lightly shadowed characters that reflect diversity in gender, race, and culture — capturing the inclusive spirit of Unilever.
Color Theme
Color Theme
Color Theme
A vibrant blue as the primary tone, paired with cyan and purple accents to convey freshness and learning energy.
The strong color contrast brought both personality and challenge — ensuring vibrancy without overwhelming the user.
A vibrant blue as the primary tone, paired with cyan and purple accents to convey freshness and learning energy.
The strong color contrast brought both personality and challenge — ensuring vibrancy without overwhelming the user.
Typography
Typography
Typography
Bold, modern sans-serif fonts to enhance readability and confidence.
Bold, modern sans-serif fonts to enhance readability and confidence.
Look & Feel
Look & Feel
Look & Feel
Overall, the UI had to feel cheerful, global, and optimistic — the same emotional tone one experiences when visiting Unilever’s official website.
I created a moodboard combining visuals from Unilever’s ecosystem to ensure consistency and alignment across all design stages.
Overall, the UI had to feel cheerful, global, and optimistic — the same emotional tone one experiences when visiting Unilever’s official website.
I created a moodboard combining visuals from Unilever’s ecosystem to ensure consistency and alignment across all design stages.
Competitor Research & Wireframing
Competitor Research & Wireframing
Before moving into detailed design, I conducted a competitive audit of similar learning platforms — including Quizlet, Duolingo, and Coursera.
The research focused on:
Lesson structure and modular learning
Quiz and progress tracking flows
Reward and motivation mechanisms
From there, I sketched wireframes for all key screens, defining layout, information hierarchy, and interaction logic before applying visual design.
Before moving into detailed design, I conducted a competitive audit of similar learning platforms — including Quizlet, Duolingo, and Coursera.
The research focused on:
Lesson structure and modular learning
Quiz and progress tracking flows
Reward and motivation mechanisms
From there, I sketched wireframes for all key screens, defining layout, information hierarchy, and interaction logic before applying visual design.
Final UI Concept
Final UI Concept
After consolidating all research, branding, and visual directions, I finalized the UI Concept
After consolidating all research, branding, and visual directions, I finalized the UI Concept
Conclusion & Reflection
Conclusion & Reflection
The Unilever Learning App – MVP was one of the most rewarding projects in my design journey.
It wasn’t just a design task — it was an opportunity to translate a global brand’s spirit into a meaningful digital experience.
The Unilever Learning App – MVP was one of the most rewarding projects in my design journey.
It wasn’t just a design task — it was an opportunity to translate a global brand’s spirit into a meaningful digital experience.
The Unilever Learning App – MVP was one of the most rewarding projects in my design journey.
It wasn’t just a design task — it was an opportunity to translate a global brand’s spirit into a meaningful digital experience.
Conclusion & Reflection
Conclusion & Reflection
Conclusion & Reflection
After a month of intense collaboration between G.Studio and Unilever’s team, we successfully delivered
After a month of intense collaboration between G.Studio and Unilever’s team, we successfully delivered
01
01
A complete UI Concept & Component System for the MVP
A complete UI Concept & Component System for the MVP
02
02
A foundational Design Guideline & Developer Handoff Kit
A foundational Design Guideline & Developer Handoff Kit
03
03
A proposal that helped G.Studio win the project over multiple competitors
A proposal that helped G.Studio win the project over multiple competitors
As of late 2024, the project has entered the Go-Live phase and is being rolled out across Unilever’s Southeast Asia region, with plans to expand globally in 2025.
As of late 2024, the project has entered the Go-Live phase and is being rolled out across Unilever’s Southeast Asia region, with plans to expand globally in 2025.
Looking back, this project taught me an important lesson:
Looking back, this project taught me an important lesson:
Looking back, this project taught me an important lesson:
When you design for people, the real success is not what they see — but what they feel throughout the journey.
When you design for people, the real success is not what they see — but what they feel throughout the journey.
When you design for people, the real success is not what they see — but what they feel throughout the journey.
Core Value for employees
Core Value for employees
From this insight, we defined both the goal of building the application and its core values for employees, represented in five pillars:
From this insight, we defined both the goal of building the application and its core values for employees, represented in five pillars: