UXUI Design

Branding Design

Redesign the Watsons mobile app for improved user experience and functionality.

icon

Wilson Lin

cover

Overview

This project focuses on modernizing the Watsons mobile app through a user-centric redesign, enhancing branding to elevate the shopping experience. The revamped app will integrate a refreshed branding design, featuring vibrant colors, intuitive icons, and cohesive visuals that align with Watsons’ identity as a trusted health and beauty destination.

design process

Research

Conduct an in-depth analysis of the existing Watsons app to identify critical UI flaws, such as outdated navigation, cluttered layouts, and poor accessibility. Gather user feedback and behavioral data to pinpoint frustrations like slow checkout processes or difficulty locating promotions.

research
interview

Revision

Restructure the app’s user flow to simplify tasks like product discovery, cart management, and loyalty program access. Redesign the information architecture to prioritize key features and ensure intuitive navigation across all sections.

revision

Wireframes

Develop low-fidelity wireframes to map the app’s redesigned layout and interactions. Test prototypes with users to validate the new flow, ensuring critical actions are frictionless before advancing to high-fidelity design.

wireframes

Branding Design

Refresh the app’s branding by integrating Watsons’ signature vibrant colors, modern typography, and playful yet professional icons. Highlight key brand pillars—health, beauty, and trust—through cohesive visuals, such as curated product category banners and loyalty reward animations.

branding design

Design Standard

Establish a design system with standardized styles (colors, typography, icons), components (buttons, grids, spacing) and interaction patterns. Ensure consistency in typography, color contrast, and iconography to create a polished, unified experience.

design standard color
design standard font
design standard layout
design standard icon
design standard component

UI Design

Translate wireframes and branding into high-fidelity UI screens, focusing on aesthetics and usability. Prioritize clean product displays, micro-interactions (e.g., smooth cart transitions), and accessibility features (e.g., readable text sizes) to enhance engagement.Translate wireframes and branding into high-fidelity UI screens, focusing on aesthetics and usability. Prioritize clean product displays, micro-interactions (e.g., smooth cart transitions), and accessibility features (e.g., readable text sizes) to enhance engagement.

ui design mockup
ui design homepage
ui design product details
ui design poster
ui design card
ui design app

Conclusion

Summarize how the redesign addresses user pain points, strengthens Watsons’ brand identity, and improves functionality. Highlight next steps, such as developer handoff and A/B testing, to ensure the app becomes a go-to platform for seamless health and beauty shopping.

final
Thanks for reading!
Thanks for reading!
Copyright © Wilson Lin 2025 All rights Reserved