PIZZAHUT HK
UXUI re-design | Mobile app
Preview of Final product
Overview
Pizza Hut initiated a comprehensive mobile app redesign project, focusing on enhancing the membership platform and ordering system. The primary objective of this project was to revitalise the brand image, foster stronger customer loyalty, and optimise the overall ordering experience for their customers.
Roles
UX/UI designer
Wireframe, Prototyping and testing, Visual design, Coding (Html / Scss), Interaction

Final Product - Website
This design strategically focuses on capturing the attention of the younger demographic, effectively strengthening the brand's identity.
Final Product - Mobile Application
Let’s check the process below
Part 1. Analysis
ORIGINAL APP DESIGN
Flowchart for THE original app
1. The presentation of member and reward information lacks organisation and fails to command attention.
2. The member-related features lack clear guide and direction for users.
3. The feature’s lack of variation and engagement contributes to a low level of usability within the app
4. The visual design exhibits significant usability and accessibility issues.
Understanding the problem
OUR TARGETS
Part 2. Define Goals
Learning
At the stage of creating flow chart, it is essential to clarify how different pages interact and address across various devices.
The original flow chart was unclear, causing confusion among the engineers during development.
To ensure the project's timely completion, the UX consultant and I reviewed and fixed all the concerns, ensuring the addressing and flows are accurate and ready to develop.
Flowchart for the redesignED APP
1. Prioritise and streamline the ordering features to enhance user experience.
2. Emphasise the significance of ordering and loyalty programme as the core features of the app
3. Consolidate the member-related features into a dedicated page
4. Enhance usability and accessibility to ensure a seamless and inclusive user experience.
5. Design user-friendly elements for registration processes to encourage user register to a member
6. Provide clear guideline on utilising and redeeming rewards to the better user experience
Revised approach for a similar situation
I recognise that it was not the correct way to create a user flow. After completing a course on Coursera about UX design titled "Build Wireframes and Low-Fidelity Prototypes," I have learned the proper way to outline a user flow and have understood that different shapes hold common meanings when outlining a user flow. I believe that I will do much better if given another opportunity.
Screen captured via Coursera
Revised user flow
WIREFRAMING
Part 3. Wireframing
Protoyping in Figma
Flow - Check my previous order
Flow - Ordering food (Guest)
Flow - Check membership page
DESIGN
Part 4. Design
Learning
At the stage of visual design, I presented to clients with a selection of at least 3 different styles that aligned with their brand identity. However, the satisfaction wasn't fully met.
Therefore I proactively modified the design option again and again, finally met the satisfaction!
Usually, before starting the visual design, I would create several mockup screens based on the requirements and brand identity, However this approach often resulted in extensive modification and redesign efforts.
I understood visual design is subjective in nature. Reflecting to this experience, utilising components as a guideline for the desired look and feel can streamline future modifications. Therefore, I would like to prioritise research and development of components before creating mock-up screens.
Style1
Style2
Style3
From version 1 to version 5 (final VERSION)
FINAL DESIGN
TYPOGRAPHY
Color
Components
Final Product - Mobile Application
Final Product - Website
CONCLUSION
Part 5. Reflect
This project marked my first experience handling all aspects independently, from research and wireframing to prototyping, creating mock-ups, and collaborating with engineers to bring the design to life. We faced the challenge of delivering the project within a few months. It was a big challenges but I found great excitement in taking on this responsibility.
Prior to the sign-up phrase, we got several meetings with clients to go through and understand their needs and expectations. Effective communication was the best thing we did, involving stakeholders such as clients, sales, project managers, product directors, designers and also engineers. We always consult with each other before making decision. It would not happen without anybody during the tight deadline.
Not being an expert of front-end logic, I encountered confusion and felt lost when addressing interactions across different pages and devices. It was the engineer who brought this issue to my attention, so I seek the assistance of a UX consultant. Together, we worked tirelessly day and night to resolve the challenges. I was grateful about their understanding and patience.
However, if given another opportunity, I would dedicate more effort to research and A/B testing. Looking back, I realise that we did not conduct sufficient research during this project. I would send users survey to gather feedback on the current app's user experience, to identify what user exactly needs and pain points. Additionally, I would conduct thorough A/B testing for each idea and flow, ensuring we achieve a usable and exceptional user experience.
DESIGN SYSTEM
A new design system for an ordering experience, with "CONSISTENT" and "FLEXIBLE".
TEXAS CHICKEN
Two fun mini-games that encourage customers to check in daily, allowing them to earn rewards as they play.
The Rink
A website for one of the best ice rink in Hong Kong.
PIXAL ART
A ordering pages for Hong Kong’s traditional noodles, with pixal art design.
MAHJONG APP
(In progress)
Case Study: Optimizing application performance with new analysis feature.