Responsive design for RedNote
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 June 2024, impacting over 900 million HarmonyOS devices.
Timeline
Mar 2024 - Jun 2024 (11 Weeks)
Team
2 UX Designers
Product Managers
Developers
Tool
Figma
Result
Launched
CONTEXT - REDnote
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 - hARMONY OS
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 - Harmonyos next
Key technical features of HarmonyOS NEXT
Scheduled for release in Q4 2024, it will no longer support Android
It supports a wide range of devices, with strong split-screen functionality
It allows developers to write code once and apply to different devices
Our Task
Adapt RedNote application to HarmonyOS NEXT within 6 months
Starting in January 2024, RedNote needs to adapt to HarmonyOS NEXT to accommodate its large user base. We need to complete the design and development of the minimum functionality by June 30, 2024.
HOW MIGHT WE
Adapt to multiple screen sizes efficiently
in a tight timeline?
STRATEGY 01
Start with the mobile screen size and scale up
Take the Profile page as an example, which is a complex case. To design responsively for this type of page, I started with the mobile screen size and ensured that every breakpoint was thoroughly considered to achieve a seamless experience across all screen sizes.
BEFORE
AFTER
DESIGN HAND-OFFS
STRATEGY 02
Design different styles and interactions on large screen for specific components
Take dropdown menus as an example. On larger screens, their style differs. I limited the maximum width of the dropdown component to keep it close to the trigger point, visually reinforcing their connection.
BEFORE
AFTER
STRATEGY 03
Find the smallest width for simple page to do the adaptation design
Take Login page as an example. On mobile, the login page uses a full-screen layout. For larger screens, I used a modal to prevent the content from becoming too wide.
BEFORE
AFTER
OUTCOME
By June 2024, RedNote launched core features of HarmonyOS NEXT, and the full version launches in Q4 2024
REFLECTIONS
Proactively seek ways to enhance coordination and efficiency within a large team
This project lacked a dedicated team, requiring designers and developers to be temporarily assigned from their respective teams, which led to unclear priorities and difficulty tracking progress. To address this, I created a centralized table to consolidate all HarmonyOS-related requests and updates in one place, enabling real-time status updates and reducing the need for redundant check-in meetings. This approach not only helped me manage the workload more effectively but also provided busy colleagues with a clearer picture of their tasks and completion status, ultimately improving overall team efficiency.
