Bridgit
from Alpha to Beyond
Imagine that you are reading an interesting article online. Suddenly, you read a line that would be extremely useful for a blog post you are writing. You could source the info and link back to the page, but this is a really long article – How will your readers find the part of the page you’re referencing? They’re lost! What if you could share the exact coordinates of the exact sentence instead? You just won another reader’s trust…
Bridgit is a Chrome Extension in early Alpha that enables users to make connections between pieces of content (IE. Text and images) on any website to help verify blog posts, combat fake news and create a web of community driven information. This is called bridging.
Understand & Plan
Lead Designer
3 week sprint
4 Person Team
My Team
- 4 person team
- UX Researcher,
UX Designer, - Content Strategist
My Roles & Responsibilities
- Research
- User Interviews
- Personas, Journey Map
- Information architecture
- Over looked UI designs
- Sketches, Wireframes, & Mockups
- High Fidelity UI Design
- Prototype Design
- On-Bording
- Video Implamation
Tools
- Sketch
- Figma
- InVision
- Google Forms
Marker, Paper, pen, Whiteboard
Problem Statement
Almost everyone uses the internet to watch videos, but no one can easily create links from specified ranges of video timelines to other videos or other media. In addition to the challenge of navigating a ton of content, ads and pop-ups also add noise to the system, which creates a chaotic and disorganized experience. A tool that cuts through this clutter and allows users to create connections between snippets of video and also to other media would help them to consume content in useful and meaningful ways.
Solution Statement
Design a tool that enables users to create meaningful and useful connections between various content including video to video, text to video, images to video and more. This will empower users with the ability to organize their interests in a way that hasn’t been possible yet. Users will be able to easily create valuable content that will help them to learn new skills, follow current and relevant topics, organize academic research, and help them complete tasks.
Design an automation feature for Bridges that takes users to the precise locations on web pages where the bridge content is located including playing the video segment from the selected starting point to end of video selection.
In doing research for competitive analysis we found that currently there aren’t any direct competitors with Bridgit. However, we did find some with similar functions to base the competitive analysis on.
Hypothes.is is an extension which I did a competitive analysis on.
It provides annotation functionality for websites.
Side Panel design allows the user to invoke the tool at optimal times.
Navigation Bar Extension icon fills in when in use.
You can take notes with this tool as well.
Competitive Analysis
Hypothes.is
Hypothes.is is an extension that provides annotation functionality of websites. This ability to manipulate the web with annotations on any given website makes Hypothesis the most similar functioning product to date.
Youtube, & Vimeo
KEY FINDINGS
Side Panel design allows the user to invoke the tool at optimal times.
Filled in Extension icon when in useYou can take notes with this tool as well.
KEY FINDINGS
All Three services have a thumbnail when hovering over the navigation bar. This could be useful for saving and building bridges.
KEY FINDINGS
Great tools for following influencers and pinning content.
Fantastic way of organizing ideas and showcasing how users could interact with content on the dashboard.
Pinterest houses a lot of amazing ideas that could be used in conjunction for users bridging items. So we really wanted to showcase this.
KEY FINDINGS
All Three services have a thumbnail when hovering over the navigation bar. This could be useful for saving and building bridges.
Comparative Analyses
Because of Brigit’s uniqueness we also produce multiple comparative analyses from several businesses which provided insight to features to design for Bridgit
Global User Research, Interviews, Insights
We also asked Academics how they interacted with video which yielded some unexpected results.
Bridigit informed us that their target audience are Students and Academic researchers. We received 33 responses from our survey and conducted 18 interviews with participants in this target group.
- Users wanted a better way to organize their internet content.
- Credibility features implemented in their web experience.
- Users also wanted a way to weed out bad information.
- Pop ups were very frustrating to the majority of users.
# 1 Learn a New Skill!
Findings
- Learn a new skill
- Entertainment
- Complete a task
- News/Politics
- Adult content
- Academic research (last)
Want to see the data for yourself?
Go to the links below for the user research data:
Pivot Moment
The primary goal was to implement video. But our current participant demographic did not rely on video to back up academic research. After consulting with our client we made a decision to interview a broader audience to see how people were using and interacting with video.
Personas
Primary Persona: Sally "The Skill Seeker"
"I hate to skip around a video I've already watched to the part most useful to me. In addition, I use 4-5 different platforms."
Usability Testing of Initial Product
We conducted contextuals interviews to find out exactly what the users experiense was with the alpha version of Bridgit before we began doing any designing and we found that the current UI was daunting for most users.
Findings
- Mostly people wanted ways to connect and store their research content and access the information easily later on.
- We asked what problems they were facing with Bridgit in its Alpha stage. "The pop ups were annoying". This was due to Bridgit’s design being centered on a modal interface with pop ups.
- We gave user tasks with Bridgit and observed them struggling and feeling discouraged with the process and the UI.
- We realized that all users were having a huge problem with understanding the concept of Bridgit. Although onboarding was a stretch goal, it was a vital asset and became a primary goal.
- Being that our primary goal was to implement video. When asked about using/implementing Videos with bridgit, their concerns were visual overload, And the legality of using membership educational platforms with in a bridge
- In the first interviews every user was confused about the purpose of Bridgit. One reason was the verbiage that was handed down to us by the company. "It was way out there" When users first tried Bridgit they struggled and were even more confused. "They hated it!"
"Bridgit is such a pain in the ass to use let alone understand its purpose. What's the point of it and what's with the big popup in the middle of the screen? Really?"
` Angel S
Synthesize & Prioritize
In this phase the users' experiences, actions, and mindsets are mapped out to bring to life the users' goals, define problems and formulate & forge solutions.
User Syntheses
We also compiled all the user data into personas and (frameworks) that helped us understand and visualized the process ahead.
User task: To bridge a segment of video content to text
Verbiage Confusion
Users wanted clarity on verbaged being used (e.g. bridging, bridgit, idea, ect)
Iteration
Exchanged previous verbiage such as: begin bridge, Bridge It’ to better understand connecting content
Product Difficulties
Unsure of how to interact with the product or its purpose
Iteration
On-boarding was developed to show the value in bridging and how to navigate the tool efficiently.
UI Difficulties
UI blocked the users view of page content and there was no password recovery
Iteration
I broght the UI into a side panel, improving user engagement with clear affordances and provided password recovery
As UX designers our primary focus is to understand the user's pains and needs and resolve them. However, when the user is struggling to understand what the purpose and functionality of Bridget was, and the terminology used then that's the first problem we have to tackle.
Our goal now was to improve the experience so users could have a better understanding and be able to get the results they wanted from the moment they accessed Bridgit.
Problem Spotting and Solving
User Pains With Bridgit
Menu constantly pops up over content where the mouse pointer and is interrupting the user's experience/flow. The modal also pops up in the middle of the screen making it impossible to refer to the site content .
Users are confused about the process and need guidance.
New Solutions
Designed the UI for Bridget in a side panel giving user full access of page content at all times. It relieved frustration and provided fluidity in viewing and selecting content especially with selecting video segments .
I built onboarding showing how to use Bridgit and provide quick access to it for review.
Creating an Improved
User Journey
Through implementing all the useful data from the users, I put together a visual roadmap that would create a seamless experience for the users.
Inspiration & Ideation
Time to play with the muses to create efficient, and effective solutions.
Inspired by the gathered user insites we began brain storming by implamenting a desing studio and sketched out ideas to create various ways for users to "build bridges" of their researched content. Then I drew up the "automated play back feature "Bridge Automation" so other users can view the Bridged content with just one click automation. ,
Initial Sketches of UI/UX
Just like any design process there are widening stages and there are narrowing stages. We started with big ideas since this was a big topic to take on. We imagined a system for organizing content as simple as dragging and dropping into containers.
Pivot Moment
Stretch goal becomes a must! After hearing from our original testers, iterating and then hearing from our usability testers. We could not ignore the fact that Bridgit was so cutting edge that users just didn’t understand it’s purpose or how to use it. We simply had to implement an onboarding element.
Re-strategizing
We realized that the vast majority of our users were having a problem understanding the product and how to use it, so we escalated the onboarding from a stretch goal to a primary goal. Seeing how vital it would be I quickly took on the full task of designing the onboarding feature.
Onboarding Ideation and Sketch
I began with ideating the onboarding and built a storyboard to ensure that every detail of the onboarding was covered. Then followed with user tests to ensure the users were able to follow along and grasp the concept.
Bridgit's Onboarding
After the user testing for the onboarding I then implement my findings and designed the onboarding animations and retested. As a result of the final onboarding all user tested were able to understand the porupose and process of using Bridgit
What I did
- Implemented “Onboarding with Bridgit.”
- Brought Bridgit alive by creating a fictional character that gave users an engaging on-boarding experience.
- Provided step by step instructions on how to to access and use Bridgit's features.
How I implemented it
- Started the users experience with and introduction video on how to use Brigit.
- I provided an onboarding assistance feature that users can access at any time to help them with Bridgit.
Introduction Video
Bridgit Onbording Assistance
UI Solutions - High Fidelity
Implementation of video
We needed to overlay our UI on any existing website and it needed to be visible on all backgrounds. The user needed to be able to distinguish between our UI and the current website UI.
WHAT WE DID
- We utilized a black background with high opacity so that the user could see the overlay with additional features.
- We used Bridgit’s bright pink colors for contrast
- We created signifiers for the user to move forward by indicating next steps
Selecting and adding a YouTube video segment into Bridgit
UI and Bridging Process
We heard from users and they did not like the current interface, We got to work creating a beautiful interface that anyone want to use.
WHAT WE DID
- Implemented a side panel that users could invoke when they needed it and close when they didn’t need it. The key is that users know it is always available to access their bridges when they need it.
- We utilized the Pink colors of Bridgit for contrast and a dark UI for a sleek professional experience.
- Added a notification to panel to indicate a bridge is in process.
Demonstration of adding Text and Image content into Bridgit
Iterations
We worked diligently with the users to solve all the problems they confronted. By providing them with User Tasks and closely listening and observing we could pinpoint and work work out all the fine details/problems.
Difficulties with Product
Users felt the UI needed refinement in terms of font size, padding, etc
Iteration
Adjusted font sizing, increased lead space and padding, and more to contribute to visual aesthetics
Difficulties with UI
Users felt confused with the ‘+ add’ icon in ‘selections’ screen
Iteration
Replaced ‘+ add’ icon with notification that more bridges may be added. And used dots to show bridge connection.
Solutions
- We created an intuitive UI that users could easily interact with
- We built the UI overlay as a side-panel that gave full access to the browsers content
- We provide signifiers so users could work effortlessly
- We designed an onboarding experiences that users can access throughout
Users were now having a change of heart and getting excited about Brigit's possibilities.
"I hated Bridgit before. Now it's so easy to use. I'll do research with it all the time. I'll also be telling my friends about it."
~ User, Angel S
“I am impressed on how your team transformed the minimalist interface we started with, into an intuitive and easy to learn UX/UI and a radically better on-boarding process.
The list object that your team envisioned and brought to the project is a game changer both for on-boarding and for the utility of the system. Thanks for your insight and for making meaningful magic in three short weeks.”
— CEO, Daveed B
Bridgit's Rebirth
We worked diligently in pairing up Brigit's vision with the users needs and experience.
All of the research, user testing and iterations we did locally and remotely in 5 other countries, immensely helped to make Brigit more productive while improving the ease of use and intuitive user experience.
Conclusion
As lead designer of this team, I learned how to assign tasks, how to manage time, how to make a decision and how to make the best out of team collaboration. We managed to synthesize a good amount of data and designed 3 different flows in a style consistent with the original application.
