Tmall Campus App Redesign
Internship Project at Alibaba
During my internship at Tmall Campus (Alibaba Group), I worked as the UI/UX designer to redesign their mobile app, focused on university campus services, to enhance the user experience for students. I conducted a thorough audit, restructured the information architecture, and developed new visual styles to better align with Gen Z preferences. 75% of the final design was integrated into the final development, contributing to over 500,000 downloads in the first month.
May 2023 - Sep 2023
Internship Project
​
Skills:
UI Design, UX Design, User Testing,
Agile Development,
Cross Functional Collaboration,
Visual Design, Graphic Design,
Design System,
​
Tools:
Sketch, Figma, Lark, JSdesign
Design Strategy
Product Overview & Target Audience
Tmall Campus is a digital campus service brand established by Alibaba Group, integrating supermarket shopping, learning, leisure, and cultural life services into a small-scale commercial ecosystem.
The Tmall Campus app is a student-focused platform designed to help university students access campus resources, events, and community-driven activities. It aims to simplify campus life by offering a centralized hub for academic, social, and service-related needs.
Redesign Goal & Problem Analysis
The redesign aims to make the app more youthful and engaging for its target audience while strengthening brand identity and enhancing visual hierarchy for a clearer, more intuitive experience.
Original Design
The current design has aesthetic issues, visual inconsistency, weak branding, an overloaded layout, and lacks interactivity, resulting in a poor user experience.
-
The design feels rigid, uninspired, and lacks creativity.
​
-
Failed to capture the dynamic, youthful energy Gen Z prefers.
​​
-
The blue color scheme is too generic, making it hard to differentiate the brand.
​
-
Lack of brand personality or campus-related uniqueness.
​
-
Icons resemble those of other apps (e.g., Ele.me), leads to a lack of brand differentiation.
-
The homepage is packed with too many elements competing for attention, making it overwhelming.
​
-
There's no clear hierarchy—everything feels equally important, which makes it hard for users to focus on key features.
-
Lack of Cohesiveness in the overall design. Too many different styles and elements makes the app cluttered.
​
-
Functional icons clash with the menu bar icons, disrupting the visual flow.
​
-
Clash of 2D and 3D stickers feels disjointed and failing to align with modern design trends.
-
Missing interactive features, gamification, and social elements.
User Analysis
The target users are 18-25-year-old university students who are highly digital, value convenience, seek discounts, and prefer social and smart experiences. The design should align with their visual preferences and shopping habit
Youthful visual style with elements resonate with student culture.
One-click payment integration for smooth transactions.
Make discounts visually prominent to drive engagement and transactions.
Bold, clear typography and high-contrast CTAs to ensure key actions are instantly recognizable.
A clean, futuristic look reinforces the smart campus experience.
Bold price tags, coupon visuals, and limited-time deal banners to create urgency.
"Exclusive Member Deals" sections and tags to increase membership sign-ups.
Redesign Strategy
The redesign focuses on a youthful visual style, consistent design language, enhanced brand identity, improved layout hierarchy, and increased interactivity to optimize user engagement.
Homepage Information Architecture & Content Strategy
To ensure visual clarity and improve user experience, this strategy extracts key elements from the original design and restructures them for better organization.
Design Process
Design Principles & Guideline
Target Audience Focus
Tailor design elements to the specific needs and preferences of university students and Gen Z, ensuring the UI highlights the features and values that resonate with them.
Strong Brand Identity
Maintain a consistent Tmall ecosystem vibe while incorporating campus-specific cues and bold, unique color choices.
Conversion-Driven Visuals
Prioritize key features, promotions, and calls-to-action using visual cues (e.g., bold typography, contrasting colors) that drive user engagement and commercial conversion.
Effective Visual Hierarchy
Use color contrasts, typography, and design elements to establish clear priorities and guide user attention.
Consistency in Visual Language
Develop unified icon sets and decorative elements that align with the overall style for a coherent user experience.
Interactive And Engaging
Integrate gamified elements and interactive features to boost user engagement and create a dynamic interface.
Visual Styles
Set #1: Fresh & Minimalist Style
Time-Sensitive Promotions – Encourages frequent app visits & event-driven browsing.
Consistent use of brand colors ensuring a recognizable, cohesive brand presence.
Bold price drop indicators emphasize on the discount.
Vibrant frosted-glass icons enhance recognition and add a dynamic, modern touch.
Gen Z-friendly aesthetic with flat, cartoon-style visuals feel playful and modern.
Increased white space and structured layouts improve clarity and user focus.
Unified visual language for visual consistency.
Proven 3.2% increase in conversion during A/B testing validated the effectiveness of price visibility in driving sales.
Harmonized color palette, iconography, and layout.
Set #2: Energetic & Trendy Style
More use of brand colors reinforces Tmall’s visual identity, making app cohesive and recognizable.
Calendar-style banner design adds interactive and creative while highlighting promotions, time-sensitive and engaging.
Refined, rounded cartoon-style icons feel polished, compact, and tailored for Gen Z.
Offline store section uses a storefront-inspired frame, making physical store promotions more immersive, thematic and eye-catching.
Accent colors highlight coupons and price cuts, ensuring discounts are eye-catching.
Set #3: Cyber-Futuristic Style
Dark ,mde with neon and holographic accents creates a futuristic, high-end aesthetic with added depth and premium appeal.
Engaging and gamified experience using cyberpunk-inspired icons and UI elements feel dynamic and interactive.
Eye-catching headlines with glowing outlines enhance visibility, making discounts and promotions more compelling and action-driven.
Stronger commercial impact by emphasizing key offers with clear, bold text improves click-through rates and purchase intent.
​A bold departure from traditional e-commerce UIs, making it highly memorable.
Tech-inspired fonts, gradients, and grids reinforce a digital, Gen Z-friendly aesthetic.
High-contrast color palette with neon accents directs user attention toward high-value promotions and CTAs, increasing engagement.
Final Outcome
Final Version
Original Design
Standard daily version for regular use
Seasonal campaign version
for the Back-to-School promotional event
Calendar-inspired layout – emphasizes daily brand promotions, creating a structured, time-sensitive shopping experience with scrollable up/down interactions enhance engagement.
Clean, colorful, and cute style icons, lightweight yet visually distinct, enhances friendliness and accessibility, appealing to young users.
Strong color contrast and card-based layout highlights exclusive deals and premium appeal.
Bold price tags and eye-catching indicator draw attention to discounts, reinforcing deal urgency.
UI Components
Metrics & Contribution
A/B Testing
Before launching the final version, we conducted internal A/B testing with 600+ internal team members (21% aged 18-24, 62% aged 24-30, and 17% aged 30+) to evaluate user preferences and the impact of different design variations on click-through rates, engagement, and navigation efficiency.
Banner Interaction
Click-Through Rates Increase by
Conversion Rate Increase by
Membership Benefits Section
Click-Through Rates Increase by
Offline Store Discount Section
Conversion Rate Increase by
Purchases Rate Increase by
Product Launching
The app achieved 500,000+ downloads in the first month after launch.
Campus Shopping is Now More Convenient!
"The interface is super clean and modern, making it easy to find discounts and campus stores! The newly launched brand calendar is great, and the discounts are quite generous. The calendar-style scrolling banners make me want to check in daily for new deals. The little red flower reward system feels a bit underutilized—maybe I haven’t figured out the best way to use it yet..."
