Rene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product Designer
  • Case Studies
    • ULTIMATE EAR TRAINER
    • Delta In-Flight App
    • Teach & Share
    • Positive Grid Bias Pedals
  • More
  • About Me
    • Bio
    • More Designs & Music
  • Contact

Bridgit

from Alpha to Beyond

Bridge It with On Boarding Lt Greay

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

Project Goals

    1. Main Focus: Include Bridging of Videos
    2. Secondary: Improved User Interface and user Experience
    3. Stretch Goal: On boarding to show how to use Bridgit
  • Added Deliverables

  • From discovering user pains with Bridgit's alpha,

    1. Design a UI that does not interfere with the users browsing experience
    2. Create comprehensible user-friendly verbiage
    3. Redesign Login with “Forgot Password” access.
    4. Design a User Dashboard
    5. Design bridges to have automated playback feature
New Bridge It
Lead Designer

Lead Designer

Calendar

3 week sprint

team

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

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.

Pinterest

We looked at sites like Pinterest to consider user engagement and organization of ideas. We considered the search functionality of google.com and its vast user base.



Youtube, & Vimeo

We looked at sites like Youtube, Vimeo, Dailymotion to see how they were displaying video content. We also wanted to see how these websites were displaying engagement features like upvoting, commenting and flagging.


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

Comparative Analysis

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

  1. Learn a new skill
  2. Entertainment
  3. Complete a task
  4. News/Politics
  5. Adult content
  6. Academic research (last)
Interviews
Want to see the data for yourself?
Go to the links below for the user research data:
* Screener Responses
* Survey Responses
* Interview Data Synthesized Into Personas
Idea

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."

Primary Persona
Secondary Persona
Special Persona

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.

User Testing

Findings

  1. Mostly people wanted ways to connect and store their research content and access the information easily later on.
  2. 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.
  3. We gave user tasks with Bridgit and observed them struggling and feeling discouraged with the process and the UI.
  4. 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.
  5. 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
  6. 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.

Affinity Map

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

80%

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

60%

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.

60%

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.

User Flow

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.

New User Flow

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.

Journey Map

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

Drawing Sketches
Sketch
Sketches
Paper Prototype

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. 

Idea

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.


Onboarding 1
Onboarding Sketch 3
Onboarding Sketch 2

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

  1. Implemented “Onboarding with Bridgit.”
  2. Brought Bridgit alive by creating a fictional character that gave users an engaging on-boarding experience.
  3. Provided step by step instructions on how to to access and use Bridgit's features.

How I implemented it

  1. Started the users experience with and introduction video on how to use Brigit.
  2. I provided an onboarding assistance feature that users can access at any time to help them with Bridgit.

Introduction Video

Bridgit Onbording Assistance

Animated Onboarding

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

  1. We utilized a black background with high opacity so that the user could see the overlay with additional features. 
  2. We used Bridgit’s bright pink colors for contrast
  3. 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

  1. 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. 
  2. We utilized the Pink colors of Bridgit for contrast and a dark UI for a sleek professional experience.
  3. 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.

Bridge It with On Boarding Lt Greay

Did you like my work & want to learn more?

If you like to learn more, are interested in hiring me, or joining forces on an awesome project. Drop me a line!  Even if just to talk about design and connect.

As a Product Designer I bring to the table a holistic approach to creating products that offer people a better Life Experience.
Drawing Sketches
Like what you see right?
Drop me a line to grab a drink, to joining forces on a project, or just say hi.

    • Case Studies
      • ULTIMATE EAR TRAINER
      • Delta In-Flight App
      • Teach & Share
      • Positive Grid Bias Pedals
    • More
    • About Me
      • Bio
      • More Designs & Music
    • Contact
    | All Rights Reserved Copyright 2020 René Díaz Product / UX Designer
    • Case Studies
      • ULTIMATE EAR TRAINER
      • Delta In-Flight App
      • Teach & Share
      • Positive Grid Bias Pedals
    • More
    • About Me
      • Bio
      • More Designs & Music
    • Contact
    Rene Diaz UX Product Designer
    Bridge It with On Boarding Lt Greay
    New Bridge It
    Competitive Analysis
    Comparative Analysis
    Primary Persona
    Secondary Persona
    Special Persona
    Old User Flow
    New User Flow
    Journey Map
    Paper Prototype
    Onboarding 1
    Onboarding Sketch 3
    Onboarding Sketch 2
    Bridge It with On Boarding Lt Greay