Project Overview
My Role
Designed:
Wireframe 1.0 / 2.0 / 3.0 / Prototype 1.0 / 2.0 / 3.0
Iterated:
Prototype 3.0 -> integrated AI Features
Created:
Brand VIS Guideline
Problem
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
Competitive Audit
Persona
User Flow
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.
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.
Design Process - Low Fidelity wireframe 2.0
Design Process - Create VIS Brand Guideline
.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.
.png)
AI-Prompt Chat Function
I have integrated an AI feature into the chat function that can automatically detect the conversation context and provide several text-based suggestions for the user, such as rescheduling reminders and meeting confirmations. Initially, we designed a rescheduling function to help users in case of sudden emergencies. However, after several meetings and user testing, we decided to cancel the reschedule function but retained the AI reschedule suggestion feature.
Now, the system will prompt users to reschedule based on their common availabilities.
This ensures that the Bridge will remind them to reschedule when necessary.
Identifier meet up random color
In Versions 1.0 and 2.0, our primary objective is to eliminate biases stemming from appearances, race, and job titles. To achieve a fair and anonymous matching system, we have implemented a policy that prohibits users from uploading real photos and using real names in their profiles.
To facilitate anonymous meetings, we have introduced an innovative identifier function. Upon a successful match, the system generates a pair of random gradient or solid colors for the two users involved. When these users decide to meet in person, they can easily locate each other by lifting their phones, allowing the identifier colors to serve as a discreet yet effective means of recognition
Summary:
I began conceptualizing this product in September 2022. After nearly two months of intense discussions and meetings.
Feature Discarded:
Punishment Mechanism:
In the original Bridge1.0 version, we allocated four opportunities per month for each user. Users had the option to use up their pairing quota all at once or spread it out, using one opportunity per week. The intent behind this was to prevent rapid depletion of the user pool, considering our target audience was corporate entities.
Reason for Discarding:
To enhance user freedom and experience, we removed this feature in the Bridge 2.0 version.
Chat Function:
Regarding the controversy over the chat feature, our team spent a month discussing whether to eliminate it. I believed that users needed some form of small talk to establish comfort zones. Therefore, we decided to enhance user security through verification codes provided by the Human Resources department. Simultaneously, we introduced a feature to identify common hobbies as an ice-breaking mechanism. When a meeting is about to commence, the system automatically generates a pop-up reminder and it can suggest topics based on shared interests to facilitate ice-breaking conversations.