Welcome!
Jun Zhou is a |
She makes technology easy to comprehend and collaborate with by creating empathic designs and data-driven impact. Curently at Parsons School of Design, exploring systems and playful media.
Previously at
Lepal.ai, ByteDance.
︎︎︎
Projects
Scroll down to see featured projects!An AI-powered documentation experience
+30% user efficiency | reaching 5000+ MAU
Product Design
Desktop
Gamified mental health product for Gen-Z
+200% WAU | 94% Positive Feedback
UI/UX Design
Mobile App
A Refined Docs Assistant Experience
Duration
05/2024-07/2024Team
Product ManagerFront-end Engineer
Role
UX Designer
Overview
During my internship at a startup focused on Product-as-a-Service (PaaS) and Model-as-a-Service (MaaS) solutions, I had the opportunity to design a documentation assistance window that enables a more efficient and intuitive learning and search experience for users.
Our team aimed to streamline the user experience of discovering and navigating official documentation. I led the design work as the primary product designer, collaborating closely with a front-end engineer and a product manager, while receiving mentorship from a senior designer.
Problem
Because the product requires a high level of professional knowledge, users often struggle to efficiently find solutions to technical problems while using the product. Although official documentation is available through a dedicated webpage, the lookup process frequently interrupts the user’s workflow, resulting in friction and reduced overall product efficiency.
Solution
An efficient assistant window that supports user’s search experience based on different kinds of demands.
Jump to final design︎︎︎
So...
How did I get there?
It starts with...
Background
A model-training and computing power management platform for users working with complex, technical workflows.
As a result, the documentation site becomes a frequently visited resource. To help the product stand out within its ecosystem and improve overall usability, it is essential to upgrade the documentation search experience.
Research
Competitive Analysis
User Research
Internal research shows that the documentation webiste is not efficient enough in solving user’s operation problems, especially when the issues are trivial.
External user interviews show that the users value flexibility of the feature the most.
Statement
Research shows that the users expect the feature bo be:
1.
Flexible and intuitive, adapting to different contexts and user goals
2.
Naturally integrated into the product workflow, minimizing disruption during task execution
Design Principles
Our users need docs assistant that:
🧐
Prioritize Findability Over Volume
Design for easy discovery—shortcuts, filters, smart search, and categorized common issues—rather than relying on large documentation pages.
🚀
Enable Fast Switching Between Help Sources
Allow seamless transitions between the AI assistant, documentation, quick tips, and examples.
🧩
Adapt to User Scenarios with Flexible UI
Allow the help window or assistant panel to resize, reposition, and adapt to different tasks without disrupting the user’s working rhythm.
Visual elements
A freshing and friendly supporting visual system
Iterations
Iteration 1
Floating window vs. Side window
In the first Itaration round, I contemplated upon the form of the UI. Both floating window and docked window appears with pros and cons as an assistance form.
Floating Window
-Overlays upon existing UI
-Flexible & Draggable
Docked Window
-Occupies a fixed position on thescreen
-Pushes the existing UI to the left
I prototyped both form out and present them to the product manager team to gather feedbacks. We ended up with the docked window design due to:
1. Floating window blocks the view of the operation UI, which would influence the efficiency.
2. Competitors favor the floating UI design tue to its conveniency in front-end develpment, making the docked design helps our product standing out by providing a smoother experience.
Iteration 2
Finding the correct form of info layout for expanded mode
Layout 1
-Highlights categories
-Subtitles only appear when the major category is selected
Layout 2
-Present all the content at once
-Occupies more space on the creen
I voted for layout 1 due to it’s simplicity, while the product team voted for layout 2 for it’s straighforwardness. After discussion, we settled on layout 2 considering it is more direct for users to find what they intend to work with.
Constraints
How to achive non-disruptive Integration?
Using the docked window design would push the existing UI to the left side and lead to less space for the original UI content. For types of UI like dashboards, this could cause inconvenience since everything are pushed together.
This is how it might looks like by pushing all the elements to the left, and it’s even harder to read when there are more infos in the original form.
So...What’s the solution?
To make a smooth dashboard experience, I figured out a pattern to adapt the new UI layout. While the ID coloumn and the action coloumn stay fixed on the screen, the other infos would be presented in their original layout and controlled by a slider for the users to view. This pattern is better than squeezing the original dashboard narrowers because:
1. The ID and action coloumn remain undisturbed and prioritized, whicch are the most essential info.
2. The users doesn’t need to review all the infos in the dashboard at once, mostly the first couple column would be enough.
Final Designs
A seamless assistance experience that
Changes its position & shape based on your work demands without disturbing your operation
- Providing instant support when operating the product, always prioritizing the action column so the user don’t need further act to switch between reading and operating
- Allowing both docked view and immersive view for different reading demand
Allows you to switch between conversational assitance and immersive documentation reading
-Quick search for contents where the users are ware of how to find
-Chatbot assistance for questions that the users are unsure about
Smoothly helps you with solving your problem by different response modes
-Quick, balanced, and deep mode would cover different user scenarios by solving questions with various levels of details.
A set of re-usable visual identity for webpage & marketing materials
-The color palette could be used to upgrade the visual identity system of the product, official webpage, etc.
Impact
After improving the assistant entry point and adding contextual prompts, 32% of weekly active users engaged with the AI assistant within the first month.
Previously, users relied on manual searches that took approximately 3–5 minutes. With the AI assistant, users were able to reach relevant documentation or answers in under 2 mins, significantly improving workflow efficiency during product usage.
Takeaways & reflections
1. toB vs toC 💡️
The difference between toB and toC design is often overstated. ToB product also values visual aesthetics, clarity, and empathetic design as it helps building brand identity and user trust.
2. Bringing help under complexity 🙏️
There are more space for customization about designing a help system that my expectation. The more complex the operation flow is, the more design possibilities would appear in the process. Upon familiarity about successful UI patterns, designer needs to learn about each step themselves before shaping a solution.
3. How would AI assistance belike in the future 🤖️
I started to ponder about how might the documentation assistance experience be like in the future with AI. The role of such assistance tool might evolve into co-working partners which could auto-detect the user’s progress and intent, offering contextual and personal support.
Lepal.ai Redesign:
Mental health solution for Gen-Z
Duration
09.2024-01.2025Team
Lepal.ai product teamProduct Manager *2
Front-end Engineer
UX Designer/Researcher*3
Role
UI/UX Designer
Overview
Lepal.ai is a gamified product aims at improving positivity of Gen-Z users. By creating an AI companion and providing a mental oasis, it helps users to focus on self-healing and relaxing through a series of interactive exercises.
︎My team worked on the redesign of beta version, improving both the product functions and the experiences.
︎I contributed majorly to the new design system, user experience improvement and feature redefinition of all the features listed in this page.
︎The project won the Gold award in Muse Design Award 2024 and and NY Product Design Award.
Project Timeline![]()
Jump to final ︎︎︎
Introduction
Gen Z faces rising mental health challenges, from career, academic, and financial stress to social media anxiety, while navigating the transition into adulthood. Yet, care remains costly and inaccessible. Traditional mental health interventions are limited by economic, time, and logistical barriers, highlighting the need for a personalized, seamless, and stigma-free solution.
Gamification in product design applies game-like elements—such as points, rewards, and challenges—to keep users motivated and engaged. It strengthens product stickiness and creates greater value in fields like education, health, and training.
Problem Analysis
The beta version of lepal.ai has multiple issues in the UI/UX perspective, as it also requires re-definition of features and scopes.
︎Unorganized Design system
︎Wrong color usage and visual elements
︎Unclear user flow that leads to user’s confusion
...
Challenge
How to make the new Lepal.ai stand out among competitors and build a meaningful relationship with users?
Research
Users’ feedback has always been the important info source when we are making design decisions. Over the interation process we interviewed 100+ users from different perspectives, covering issues from user persona building to the specific feedback about a new feature draft.
Process
Kano Model is employed in the design process to decide the priority of features and well as effectively arranging energy and time in team work. By using Kano model, we separate the tasks into three part: Must-be, Performace, and Delighter and take different actions for each kind.
The visual language is redesigned to exaggerate the concept and spice the whole experience up. I had great fun designing the new color palette and visual system.
One app that help u dive deep into urself.
Flow 1
Your Own Planet. Your Own Harbor.
Our design strengthens the product as a coherent space for the users to explore, just like in their own planet.
Flow 2
Keeping track of your progress. Stay positive.
The daily streak functions as a tracker for your connection with lepal, encourgaing you to keep going by offering rewards. 4 emotion records are generated daily to reflect your personal emotion development.
Flow 3
Find your community.
The mindmap provides a platform for the users to share their thoughts anonymously. Apart from that, the users could also add users they know as friends and keep track of their spirits’ growth.
Flow 4
Challenge yourself, reward yourself.
Your daily small achievements would earn you stars to buy customization assests and unlock premiums features.
A role would be assigned based on the user’s current demand and issues, resulting in different quest arrangements.
Flow 5
Embrace your fortune. Entertain yourself while grow.
Flow 6
Record your day. Listen to yourself.
Flow 7 & 8
Keep connected, keep friendship going.
Flow 9
Customize your planet, customize your mood.
The overall improvement
Through collaboration, our team reached the final redesign together, use the slider to see the contrast.
Accomplishments
The new launch soon outruns the beta version by almost tripling the weekly active user within a month.
We were continuing conducting interviews after the new launch, and the users were giving a lot more positive comments to the new version.
︎Takeaways
1.
For products that create emotional values, user’s feedbacks are always the priortized source of advice. When iterating features, it’s useful to make creative approaches and test them out quickly by interviewing users.
2.
For products with gamified elements, it’s more important to focus on accessibility and affordance than making cool interactions. The goal of gamified design should be making sure users find it understandable and playable.
3.
Designers should view problems and find solutions in a multi-faceted way. In order to balance bussiness demand and user experience, designer need to understand the scenario from multiple perspective. Reaching out more to other people in the team could be an effective way.
Turing Over Time:
And Education Experience about Encryption TechnologyDuration
09.2025-12.2025Client
Museum of ScienceTeam
Eloise Yalovitser - Project ManagerMiles Ashitey - Content Creator
Xinyi Shen - Developer
Yingjie Mu - Designer
Role
Interaction Designer, Visual Designer
Overview
In this collaboration project with Museum of Science︎︎︎, I got the opportunity to work on an interactive experience that teaches visitors about a science revolution. Through ideating, prototyping, and constant meeting with stakeholders, our team created an experience that narrates the history of encryption technology tailored for audiences without professional knowledge. The project is created with FAST ( Flexible, Accessible Strategies for Timely Digital Exhibit Design ) table, which allows object related interactions.
My contribution:
-Researched and brainstormed the theme of each level
-Designed and managed the visual system and visual communication design
-Iterated the user interaction flow base on stakeholder’s advice and user feedbacks
-Conducted user tests and interviews for design refinement
The Final Output
An experience that educates the history of encryption technology, starting from turing’s era, through gamified interactions.
Jump to final design︎︎︎
Problem
How to make a story of technology intriguing to study?
Encryption technology shapes our everyday life, yet most people know little about how it actually works or where it came from. The challenge is two-fold: how do we visualize different encryption methods in a way that's both visually engaging and genuinely informative — and how do we weave those individual pieces into a cohesive, flowing experience?
Solution
A three-level experience that explains the encryption technology through object interaction
Over group meetings, we settled on 3 final milestones in the history of encrytion technology considering the historical and societal context of them. Based on research, we created 3 levels of storytelling, where the users can learn about the technology by successfully selecting the object that represents it.
User Interaction Mode
In each level user need to select one of 4 objects that correctly represent the technology
Level 1 Turing’s Bombe Machine
Turing’s Bombe machine is use in WW2 to decypher germany’s secret messages, which marks a major evolution of encryption technology with the invention of machanical devices.
Correct Object: The gear
Level 2 RSA-based Cryptography
RSA-based cryptography is majorly used in secure communication. It operates one public key for encryption and one private key for decryption.
Correct Object: Key
Level 3 Tokenization
Tokenization substitute a sensitive piece of information with a non-sensitive equivalent piece, which is the token. It is widely used in payment process to protect user’s info.
Correct Object: Mask
Visual design
A Gradual transition from 1900s to 2000s
User Testing
a figjam screenshotFinal Design
From Turing to your phone: the story of encryption technology.
screenshot showcase + data
The Elixir Protocol:
A board game about co-existence
Duration
01.2025-05.2025Team
Solo Passion ProjectRole
Visual Design, Game Design, Web DesignTools
Blender, Figma, Adobe Illustrator
Overview
Designed for 2-4 players, the game simulates survival through plant-human partnerships: each player begins with a plant, resources, and a socio-natural context that determines their pathways forward. Progress requires solving individual challenges through strategic use of capabilities, alliances, and networks. The gameplay unfolds through moments of transition, like forming survival strategies, and narrative-building exercises where players co-create hidden layers of the world. This process transforms the game into a collective act of speculation, discussion, and storytelling.
The Final Output
A board game that propels players to ponder about autonomy, environment, and the future of co-existence
Jump to final design︎︎︎
Background & Research
What if my life depends on another life form, in a radical way?
The story of The Elixir Protocal starts with my reflection upon the human-plant relationship. Realizing that I often forgot to water my plant, I started to ponder about a speculative future where I’m obliged to water it and take care of it.
Start from there, I created a parallel world where each human’s life is connected to a plant which produces necessary resources to maintain life. When the plant’s life is in danger, the person would be socially regulated to have less survive resources, and when the plant dies, the person’s life would be terminated too.
Visual design
A surreal world that seems whimscal and cheerful but also has traces from the reality
Blender is the major tool to create the illustrations, while figma & Adobe Illustrator are used for graphic design & laser cutting sketch.
User Testing
Storytelling + Data is the key to build mechanism
Several rounds of user testing was conducted to help me further study the user scenarios when playing the game. Both mental activities and score fluctuations were recorded in order to generate insights.
Feedbacks includes:
“There should be a guidebook/manual that visualizes the gameplay process.”
“The attributes could be more balanced to create tensions in game play.”
“The visual design is really attractive. I hope there are more items to unlock.”
Final Design
A game that makes you navigate the fragile politics of survival, where every player’s choices ripple through a shared ecosystem.
Takeaways
What to consider when building a system?
1. Visual language helps the users understand their tokens, roles, and objectives. Clear visual communication through multiple rounds of iterations would be most efficient way in connecting with the users by catching their attention and offer more affordance.
2. A product is successful when it reflects the user’s personal values and creates a sense of accomplishment for them. A good game allows the players to form their own strategy on the way to ssuccess instead of pushing them to pursue the same path. Developing individualized options could build more conficence and immersiveness when playing.
Mnemosyne :
Building Urban Memory
Duration
12.2022-01.2023Team
Solo Project︎Role
Product Design
︎Intro
Mnemosyne is a conceptual app design for users to create location-based interactable augmented reality experiences. Shared experiences count a lot in the establishment of a community within a multi-layered society, no matter it’s a cultural community or social community, a large one or a small one, as we could find from the public art programming and space design in multiple levels. Such experiences could be strengthened with emerging medias like AR and integrates with the digital side of our life, making both the creation and the expansion of shared experience more accessible to people. Mnemosyne stands for the goddess of memory, and allows users to interact with memories and makes it part of the physical and social context we are living in.
The project ides is inspired by the same name AR experience Mnemosyne AR︎︎︎
Skip to the output︎︎︎
Project Final Screens
Discover
︎Challenge
How can XR technologies jump outside of their niche position within the public recognition, and involves in our daily production and interaction with digital experiences?
Discover the context
︎Ideation
AR & Public Space?
The experience of visiting and living in many cities around the world, like Beijing, New York, Mexico City, Paris, Osaka, etc., inspires me a lot in how the design of shared experiences in multiple situations forges their uniqueness. Public art, either big installations or grafftis, always reveals the energy of the culture and community and bonds people together by the shared memory. Therefore, I developed this concept of combining pubic art and space with the usage of mixed-reality media that allows people to leave trace on the space and store that memory digitally. Literature review about public art and AR technology help me set up the theoretical foundation of such practices.
Define
︎Research
Data analysis
I have conducted researches upon this idea in ways like data analysis and quastionaires among my friends, and build data visualisations of city space distribution and mind maps about the emotion dimensions people are experiencing.
Competitor analysis
The platform analysis compares different AR creation platforms like Acute Art in their target audiences, interface designs, etc.
Conclusion
︎User Persona
Who would be interested?
I created user personas from both the perspective of a potential content creator and potential user based on my observation from research results and the user groups of above apps. The personas represents who would like to try such experiences and their motivations behind, helping me to proceed with the following steps.
︎Design Approach
Emotional Design framework
︎Reframe
How to integrate XR technology naturally into our daily experience across situations and space, and make it a tool to fuel our relationship with digital platforms?
Concept
I would like the concept to be a product that applies and relates to many scenarios, instead of only a few of them (e.g. art galleries, tourist attractions), and is both user-friendly for people to explore and create. Moreover, an imprtant function is that they can add their own assets to a scene for others to view, including 3d objects, images, messages, etc., or use the scenes as a prop to create photos, both maximizing the interactivity of XR and implementing it with our usual demands.
Develop
︎Prototyping
Information Architecture
After analyzing the initial concepts and researches, I started to prototype the design. The main feature of the app builds around the AR function, which allows the user to detect AR scenes by location data, and create their own scenes. There are pre-made assets for users to use and adjust easily, so they don’t need to be experts in modeling and developing to enjoy AR (but they can still upload their own assets). The logic is similar to leave a graffti on a wall or a polaroid photo on a bar’s album. The core of the function would be to create and explore with accessibility, so people could use it as a tool for production. Other features that supports the AR experience includes recommendations of locations and feeds about AR and public art, a map function that navigate the users to their target scenes, and a personal gallery of scenes they visited and created.
Low-fi Wireframe
︎Design Element
Moodboaard
The visual style should be approachable and straighforward for users to navigate and browse through different content, with relaxing color gradients to indicate transitions and changes. Neumorphism is used to indicate the spatial experiences this concept would create and futuristic vibe of implementing AR in life. The elegance I found in multiple public art programs provides inspirations in a neat, friendly, and color oriented visual design.
Visual element
Deliver
︎Design Output
Final Screens
Several iterations are conducted to the high-fidelity wireframe prototypes in perspectives of accessibility, clarity, visual hierarchy, etc. The final screens polish some details in order to strengthen the visual identity and smooth the user experience, making it more up-to-date and consistent.
︎How do we...
Bridge user with creating smooth AR experience?
By providing feed feature we prepared the user a series of XR related background knowledge and outstanding creations.
The scan and navigate feature helps the user to locate the experience they are inetersted in and provide a seamless experience of scanning the AR piece.
Feed
Scan
Navigate
Create
Record
Share
Empower user to enjoy both sharing and creating?
The user could easily switch between explore and create mode to view or upload creations. The share feature allows the users t easily share their experience with their connections.
Provide customized visually appealing experience to deliver emotional value to the users?
The onboarding navigates user to a new form of aesthetics in the XR world, while the dark mode gives space to the user to customize their experience.
Onboarding
Dark Mode
︎Reflection
Takeaways
Takeaway 1:
While doing research and testing the prototype of this project, I realize that XR is still a realm for vast experiment about the possibility of interactions. The process of wrapping up many functions in an information architecture and visualizes the design through interfaces is challenging but intriguing. I hope one day there will be a shared solution that provides guideline to designers and makes the experience between XR and other functions more seamless.
Takeaway 2:
From the perspective of design, what makes the users stick to a digital product without getting bored or frustrated by it? The consistency between the platform’s content, the brand identity, and ui/ux counts a lot. The harmony between those elements makes the experience pleasurable and relaxing, while only one or two of them standing out makes the experience laborious. Many digital experiences still lack maturity in achieving this balance, and this is an opportunity I can dig into.