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

Alpha & Beyond

Bridge It with On Boarding Lt Greay

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

Design Role

Understand & Plan
  • SOW & KPIs 
  • Requirements & Constraints
  • Assumption 
  • Research Strategy & Plan
Listen & Research​
  • User Survey & Interviews
  • Competitive & Comparative Analyses
  • Heuristic Evaluations
  • User ​&​ Job Stories
Synthesize & Prioritize
  • Empathy Maps
  • User Needs Analysis
  • Personas
  • User Journey
  • Prioritization Matrices
Inspiration & Ideation
  • Sketching
  • Storyboarding
  • Wireframes
  • User Flow
  • On Boarding
Design & Play
  • LoFi & HiFi Prototypes
  • Conceptual Design
  • Rapid Prototyping
  • Visual Mockups
  • Style-guide
Test & Discover
  • Usability Testing
  • Card Sorting
  • A/B Testing
  • Multivariate testing
    Iterations


Problem Statement

Almost everyone uses the internet to watch video, 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.

Listen & Research

user testing


Global Research & Interviews

We didn't waste time diving right in, to work with our users. Were worked thoroughly implementing extensive user interviews, user testing and researching in the US, Europe and Asia, to get diverse views of users pain points, input for possibilities and a comprehensive user-centered design

Interviews

Want to ​see the data for yourself? ​Go to the hyperlinked below for ​the user research data:

​* Screener Responses​
*​ ​​Survey Responses​
*​​ Interview Data Synthesized Into Personas

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.

Competitive Analysis
Vimeo.com
Youtube.com

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



Usability Testing of Initial Product 

As UX designers our primary focus is to understand the user's pains and needs. However, when the user is struggling to understand what the purpose and functionality of Bridget was, then that's the first problem we have to tackle.

User testing 2

"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

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 to users. This was due to Bridgit’s development/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!"


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 u​s understand and visualized the process ahead.
80%

Confusion with Verbiage

Users wanted clarity on verbiage (e.g. ideas, bridging, etc.)

Iteration

Exchanged previous verbiage such as: begin bridge, Bridge It’ to better understand connecting content

60%

Difficulties with Product

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%

Difficulties with UI blocked

users view of page content and no password recovery

Iteration

UI into a side panel, improving user engagement with clear affordances and provided password recovery

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

​

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

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 ideate efficient, and effective solutions. 

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. You must iterate! 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 buckets. 

Test & Discover

Listening to our users resulted in creating the best solutions

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
85%

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

71%

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.



Design & More Playing with Muses

Implement MVPs from sketches and wireframes into low, medium and high fidelity prototypes at multiple stages to get perspective from user testing.

Re-strategizing

We realized that the vast majority of our users were having a problem understanding the product, 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. 

I began with ideating and building 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


Iterations

After 5 iterations, feedback from users determined that the interface needed to be more intuitive.

Animated Onboarding


Users were now having a change of heart and getting excited about Brigit's possibilities.



Refine and Repeat

Feedback from testing is what drives the iterative process.
  • More 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.

85%

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

71%

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.

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

~ Daniel

Solutions


  • We created an intuitive U​​​​I 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​

​Presentation of Bridgit's ​Rebirth

​Conclusion

​We w​orked 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​  m​a​ke Brigit more productive ​while improving the eas​e ​of use  and intuitive user experience. 



Live Prototype

Thank you for viewing my case study on Bridgit. 

View the prototype.

Bridge It with On Boarding Lt Greay

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.


​

​Did you like my work and 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
    Interviews
    Competitive Analysis
    Comparative Analysis
    Affinity Map
    Primary Persona
    Secondary Persona
    Special Persona
    Old User Flow
    New User Flow
    Journey Map
    Sketch
    Sketches
    Paper Prototype
    Onboarding 1
    Onboarding Sketch 3
    Onboarding Sketch 2
    Animated Onboarding
    Bridge It with On Boarding Lt Greay