RedNote — Responsive Design for Large Screens

Back

RedNote — Shipping RedNote on HarmonyOS for 900 million users

In spring 2024, I worked as a UX Design intern at RedNote, where I designed RedNote's adaptation for large screens to serve HarmonyOS (Huawei's operating system) users.

My task was to design the large-screen experience for tablets and foldable phones on HarmonyOS. The design was launched in late June 2024.

Timeline

Mar 2024 - Jun 2024 (11 Weeks)

Timeline

Mar 2024 - Jun 2024 (11 Weeks)

Team

UXDs, PMs, ENGs

Team

UXDs, PMs, ENGs

Outcome

Launched globally for 900 million HarmonyOS users

Outcome

Launched globally for 900 million HarmonyOS users

Context

What is RedNote?

With a mission to "inspire lives", RedNote is a Chinese social media and e-commerce platform with 100 million DAU. It has been described as "Chinese Instagram" and is primarily content-based.

Context

What is Huawei, HarmonyOS & HarmonyOS NEXT?

Huawei is a global technology company based in China, known for its telecommunications equipment and consumer electronics. HarmonyOS is its operating system. HarmonyOS NEXT is the latest version of Huawei's operating system, set to launch in early 2024, bringing smoother performance and better device integration.

Context

Key technical features of HarmonyOS NEXT

🗓️

Scheduled for release in Q4 2024, it will no longer support Android

💻

It allows developers to write code once and apply to different devices

📱

It supports a wide range of devices, with strong split-screen functionality

The Challenge

With the launch of HarmonyOS NEXT in 2024, Huawei would no longer support Android applications. To retain its massive user base on Huawei devices, RedNote needs to build a native HarmonyOS app in six months

How Might We

Adapt to multiple screen sizes efficiently in a tight timeline?

Approach 1

Mobile-first

For complex pages like the user profile, I began with the mobile screen size as the foundation and methodically scaled the layout up. This involved carefully considering every breakpoint to ensure that the user experience remained seamless and intuitive across all devices.

Before

After

Design Hand-offs

Approach 2

Component-level enhancements

I recognized that simply scaling every element was not always the best solution. For specific UI components, I designed unique styles and interactions tailored for large screens. For example, I redesigned the dropdown menus to have a maximum width on tablets, which kept the menu visually anchored to its trigger point and improved usability.

Before

After

Approach 3

Context-aware layouts for simple pages

Simple, single-purpose pages like the login screen presented a different challenge; a full-width layout on a large screen would appear empty and unbalanced. For these cases, I designed a modal-style view for larger screens. This approach prevented the content from becoming excessively wide and kept the user's focus centered.

Before

After

Outcome

By June 2024, RedNote launched core features of HarmonyOS NEXT, and the full version launches in Q4 2024

Featured at Huawei Developer Conference

On foldable phones

Reflections

What I learned…

🚀 Proactively enhance coordination and efficiency within a large team

This project involved a large team where designers and engineers were borrowed from other departments, making coordination a challenge. To address this, I proactively created a centralized progress board that provided real-time status updates for all HarmonyOS-related tasks. This initiative not only helped me manage my own workload but also significantly improved the entire team's efficiency and clarity. It taught me the immense value of proactive communication and tool-building to foster collaboration in a complex project environment.