UX Design | Visual Design | About | Contact | Resume
Bridge
Bridge is a mobile app prototype that connects remote coworkers for in person networking, problem solving and community building.
Overview
Project Type
High Fidelity Prototype, UX Design, Front-end Web Development
Duration
January - May 2023
Team Members
I lead a team of two to complete this project. My role included project management, front end coding (HTML/CSS, javascript), wireframing, and prototyping.
My team member’s responsibilities:
Minglin “Evelyn” Chen - UI, Wireframing, Prototyping, HTML/CSS
Felix Bammer - HTML/CSS, Branding
The Problem
In the wake of COVID-19, we were tasked with finding solutions to pain points caused by remote work. Through research, we came to identify that the lack of opportunity for the creation of weak-tie connections was a major downside to remote work. When we work from home, we don't experience the spontaneous interactions that an office environment can facilitate.
“What we've lost from working from home is a lot of the human touch. The kind of face-to-face interactions. And specifically what we call weak-ties. Not your strong connections; you can clearly schedule all of the meetings in the world you need with your team. But the wider community, the bigger organization, feeling connected to each other and that human connection to the weaker ties. I think that is something that we have lost.”
— Kerstin Sailer
Remote work does not allow for coworkers to connect with each other outside of virtual meetings with their immediate team. Weak ties are important for fostering community, and identifying novel solutions to problems.
Thus we asked, how might we enable the creation of weak tie connections for online workers?
The Solution
Bridge simulates the chance interactions of an office environment by randomly matching remote coworkers for face-to-face, in-person interactions at a location convenient to both coworkers.
Making acquaintances with coworkers fosters community, inspires creativity, and allows for the exchange of novel ideas and solutions. We are bridging the community gap between working from home and working in person.
Process
Research
We began with the initial How Might We statement:
How might we create new work experiences that reflect the future of work (remote work)?
We consulted a number of resources discussing remote work in order to identify potential How Might We opportunities. This included videos of panel discussions led by experts from the World Economic Forum, McKinsey & Company, The Guardian Labs, and TED.
After deliberation, ideation, and pitching a variety of opportunities within our team, we identified 3 How Might We statements with the most potential.
Brainstormed How Might We statements.
Analysis
I explored existing products that facilitate making weak ties. Initially I thought that something of a hybrid between chat roulette and BeReal would be an entertaining and novel way to mimic coworkers running into each other in the office. However, there are a number of products that already exist in the coworker roulette sphere. Also, I was focused on a very specific solution, which I think narrowed the possibilities too soon.
On presenting our initial research and analysis to each other, our team selected my proposed HMW to move forward with.
How Might We enable the creation of weak tie connections for online workers?
Wireframe
We began with ideating what features our app would need and how it would work. From there, we paired down our ideas until we had the simplest version. From there, we sketched initial design ideas before beginning to wireframe. Our wireframing was done in Figma, and initially we each presented our own version of what we thought the app should look like. From there, we streamlined the wireframes into a single one that best exemplified the features.
We received feedback on our initial wireframe and refined it so that we could begin testing.
Initial wireframing and ideating was done on paper.
Testing, Iteration
We tested our wireframe with 7 users. Initial feedback included that the overall concept was good, but that there seemed to be a piece missing from the user flow. The coworkers have met in person, but now what? How does Bridge support them through a potentially awkward or nerve wracking interaction?
We realized that our “conversation prompt” and “things in common” were not located in the appropriate point in the flow, and needed to be more consciously incorporated into the use of the product. By changing the location of these prompts within the user flow, we were able to solve for the feedback and improve the user experience.
Final Design
We took our final high fidelity prototype and coded the prototype in CSS/HTML/JavaScript. You can see the full coded prototype at the top of the page in the overview section. It was key to set up a master CSS document for the team to use. This kept all of our code uniform and established all of the base components like buttons and navigation.
Reflections
As I’m sure is true with most projects, I wish that there had been more time. Specifically, I would have liked more time for additional user testing. Our next steps would be to find a small company that would allow us to run a pilot program with the app. In addition, we want to explore adding in company specific activities and features, such as customized conversation prompts.
I would have also worked to make a basic design system from the prototyping phase. This could have alleviated some of the issues with inconsistency that we ran into when designing the wireframe and prototype in Figma. Our coded prototype truly forced us to all use the same elements, which ensured the consistent design we were striving for.
Rye | Bridge | Showcation | Pitcher | Repose