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.
