top of page

Project Overview

40 weeks.png
Frame 2.png
Frame 3.png

My Role


Wireframe 1.0 / 2.0 / 3.0  / Prototype 1.0 / 2.0 / 3.0


Prototype 3.0 -> integrated AI Features



Brand VIS Guideline  


The period from 2019 to 2022 marked a significant transformation in human civilization, primarily due to the global impact of the coronavirus pandemic. This challenging time led to a paradigm shift in work culture, with many companies transitioning from in-person operations to hybrid or fully remote models. This change, while necessary, introduced new challenges, notably in communication and connection among co-workers.

The Solution

The Bridge App, tailored for remote workplaces, aims to strengthen colleague bonds. It's designed to encourage not just online, but also offline interactions, easing the shift from digital to in-person engagement. In the 3.0 last version, to enhance the experience and prevent bias, I added features of AI-generated avatars, adding fun and promoting inclusivity by focusing on personalities over appearances. This approach enhances user enjoyment and fairness.

Main Features

Enhance User Authenticity

This is completely anonymous software and we encourage users to use unique usernames to emphasize their personality, so we do not allow users to change their usernames. If you need to change the username, please contact the company's HR department and address the reason.

AI-Generate Personalized Avatar

Bridge utilizes the Gen AI avatars function to generate their personalized unique avatars! 
This approach aims to eliminate potential biases or judgments based on appearance, race, or gender.

And makes the entire application more creative!

AI-Text Prompt

It integrated the AI context detection function. Ai will remind you how to reply based on the user’s context.

This helps introverted users feel less nervous.


At the same time, placing hobbies at the top of the chat box serves as an icebreaker to remind users how to start chatting.


Moved the Reschedule function into the chat and let the AI automatically detect and suggest based on users’ weekly availability data.

Creative Paired Identifier Colors 

Compared with the previous solid color identifiers, the new version adds different multi-color gradient combinations, which avoids the possibility of duplication with other users.

User need to lift their phone to looking their co-worker.

 Interactive Prototype 3.0 (Figma)

Design Value

Design Value.jpg

Competitive Audit

Screen Shot 2023-05-16 at 10.21 1.png



User Flow

Persona user journey map.jpg
User flow.jpg

Design Process - Step 1

Crazy 8s is a rapid ideation technique employed in UI/UX design for swift concept generation. In just eight minutes, not seconds, our team brainstormed initial ideas and key features, quickly iterating to refine our concepts. This process led us to identify potential standout features like an icebreaker feature, Ai-chat functionality, avatar feature, and user weekly availabilities.

PXL_20230202_014519066 1.png
PXL_20230502_192316223 1.png
PXL_20230502_192350482 1.png

Design Process - Wireframe 

Based on our initial sketch from the Crazy 8s brainstorming exercise, I expanded more main features, such as an invitation from the HR department on the boarding page to enhance the user's authenticity.

Avatar Library Feature: To avoid potential bias, we encourage users to choose avatars from our library instead of using their pictures.

I also designed the hobbies feature as an icebreaker feature when users first matched, allowing users to initiate conversations with personalized and engaging opening lines. Also, the ice breaker feature allows users to find common similarities between each other by small chat to create a comfort zone before they meet up.

Screenshot 2024-01-06 at 7.51.40 PM.png

Design Process - Low Fidelity wireframe 2.0

Screenshot 2024-01-06 at 8.28.52 PM.png

Design Process - Create VIS Brand  Guideline

Style guide (1).jpg

Design Process - High Fidelity Prototype 1.0

I chose blue as our primary color to convey professionalism to our target audience, while the addition of yellow as a secondary color introduces an energetic element for our users (3.0 version).

In our user interface design, our emphasis on developing and designing a light mode aims to enhance color contrast, ensuring a visually friendly and readable experience for users of all ages and genders. This approach prioritizes accessibility and inclusivity in our design choices.

Part 2 User Testing

Testing Process - Collecting User Feedback

During the user testing phase, we administered a user questionnaire to obtain valuable insights while participants interacted with our initial 1.0 prototype. The feedback collected has been documented, highlighting common themes and insights. This document serves as a valuable resource for identifying areas of improvement and refining our prototype based on user input.

We designed an interactive prototype by Figma and sent it out to do user testing. 

Based on these User feedback, We improved and changed. So, here is our Prototype 2.0

We use HTML/ CSS/ and JS to develop this Project.

Please click the link below and enjoy our project :)


Part 3 Finlized and update

Prototype 3.0 

Onboarding Pages 

The onboarding page is crucial in product design as it helps new users understand essential features and prompts them to create profiles for future app functionalities and data collection. As users interact with the onboarding steps, their choices and interactions help build their personal profiles, for instance, through features like Icebreaker and weekly availability. Additionally, the new AI-generated avatar feature effectively showcases users' personalities, adding a fun and colorful element.

I have designed three distinct default modes on the avatar generation page to facilitate users in choosing their style, while also providing the freedom to explore and create their own unique look. This approach balances structured guidance with creative flexibility, ensuring a user-friendly experience that encourages personal expression.

Portotype 3.0 - Onborading page (1).png