NetEase × 5i5j Rebranding

Developed at NetEase for 5i5j Real Estate, this HTML5 mobile experience is an interactive lifestyle quiz. Featuring customizable illustrated avatars and eight distinct lifestyle profiles, it engages Gen Z users in a playful way while helping the client efficiently gather insights into young customers’ housing preferences.

SNEAK PEEK

DESIGN CHALLENGE

Context

5i5j is a large-scale real estate company undergoing brand renewal
NetEase was responsible for digital brand experiences and interactive content

Design Challenge

Modernize a traditional real estate brand
Engage younger, mobile-native users
Balance brand credibility with visual warmth

MY ROLE

Roles: Visual & Interaction Designer, Illustrator, Motion Graphic Designer

Date: Summer 2023

Tool: Photoshop, Illustrator, After Effects, Figma

Designed illustration systems for H5 brand pages
Created mobile-first interaction flows
Collaborated with product managers and developers
Prepared assets for development handoff

Context & Opportunity

How might we create a rental experience that is both playful and convenient for lifestyle discovery?

OPPORTUNITY

Problem

A rapid competitive scan revealed that many real estate campaign pages rely on text-heavy layouts and static navigation. These patterns make it difficult for mobile users—who often browse during fragmented moments—to understand which housing options fit their lifestyle quickly. This gap presented an opportunity to shift from information dumping to guided lifestyle discovery.

Design Strategies

Rapid competitive scan
Opportunity framing around lifestyle clarity
Modular illustration system for flexible reuse
Subtle motion feedback to enhance engagement

UNDERSTANDING USERS

What do time-constrained urban renters need in order to quickly recognize their lifestyle fit?

UNDERSTANDING USERS

Fast, Visual Decision-Making Pattern

Using lightweight persona synthesis and empathy mapping methods, I identified that target users are highly sensitive to time cost and cognitive load. They prefer visually scannable experiences that quickly signal relevance. These insights directly informed the decision to structure the experience around clear lifestyle categories rather than dense listings.

User Persona

Quotes

EXPERIENCE STRATEGY

What experience structure best supports playful but efficient lifestyle discovery?

EXPERIENCE STRATEGY

We developed a vertical narrative structure that guides users through different lifestyle categories. Instead of presenting large blocks of information, the experience progressively reveals content as users scroll. Each section introduces a different living style using illustration and motion cues, allowing users to quickly recognize where they fit within the rental ecosystem.

Key Moves

Lifestyle-based information architecture
Section-based progressive reveal
Scroll-triggered storytelling
Motion cues for orientation

Why It Works

Helps users quickly identify the lifestyle that fits them.
Keeps information easy to scan on mobile.
Balances playful visuals with clear navigation.
Encourages exploration while guiding users toward rental options.

Experience Flow

The experience strategy was translated into high-fidelity H5 screens supported by a custom illustration system. Motion elements were designed to enhance interaction feedback while maintaining readability on mobile devices. Illustrations were used to represent different lifestyle categories, creating a warmer and more relatable brand image.

Wireframes

I created low-fidelity wireframes to define the structure and pacing of the H5 experience before moving into visual design. I focused on establishing a clear vertical flow, reducing information density, and ensuring users could quickly recognize each lifestyle category. These wireframes helped me test content hierarchy and interaction patterns early, allowing the experience to remain playful while still convenient to navigate on mobile devices.

OUTCOME

The final campaign experience presents the brand as more contemporary, approachable, and visually engaging. By combining illustration, motion, and a clear narrative flow, the H5 page helps users quickly understand the platform and explore lifestyle-based rental options.