Bridge.ai

UX/UI
UX Research
AI Tool
Creative Direction
UX/ UI Designer
2023

Building an AI powered work day

Overview

Bridge.AI is productivity desktop app bridging ideas of productivity and artificial intelligence to create a unique task oriented list that evolves how a user can control their time and attention

Problem

  • There are apps designed to increase productivity of sales professionals; however, many of these apps have little to no features tracking how a sale goes through.
  • Some sales representatives still rely on paper and pen to track leads and are hesitant to try new technology because it is not "reliable."
  • It is overwhelming to track customers across zip codes while also trying to figure out how to efficiently manage your day.

Solution

  • myT is a sales-first CRM solution designed to streamline lead management for sales representatives.
  • A clean, intuitive interface that minimizes on boarding time, allowing users to quickly adopt and trust the system.
  • Leverage AI-driven data gathering and process automation ensures that every lead is accurately tracked and managed

Services Provided

  • UX/UI Design
  • A/B Testing along CRO
  • Accessibility Audits
  • Building Design Systems
  • Web Design

Design Role

  • Design lead
  • Lead UX/UI Designer

Problem

  • There are productivity and to-do lists apps that try to incentivize the user’s needs, yet none of the apps focus on how to efficiently use the user’s time.
  • It is overwhelming to navigate a sea of tasks and try to figure out how to keep track of all the tasks a user needs to get done.

Services Provided

  • UX/UI Design
  • Heurisitc Evaluation
  • Conducing Interviews
  • A/B Testing
  • Prototype

Solution

  • Bridge.ai is an app dedicated to creating the most efficient to-do list by using machine learning that interprets and helps the user complete tasks as they go.
  • Bridge.Ai is a platform that simply and cleanly layouts the tasks a user goes through by following macOS guidelines.
  • It acts primarily as a text editor with shortcut features that include nesting tasks, syncing other apps, and automating the task process.

Design Role

  • UX/UI Designer in a team of 4
  • Graphic Designer

Impact

By pairing a minimal, macOS-native UI with machine learning driven task intelligence,  The design enabled users to move through work with fewer interruptions, less manual organization, and clearer task prioritization

2.5x increase

increase in users opening the app multiple times per day following the introduction of real-time task progression feedback.

-38% decrease

in time spent reorganizing tasks due to intelligent nesting

+34% increase

in users completing their daily task lists after introducing ML-prioritized task ordering

-45% decrease

in reported task overwhelm after restructuring task views into clearer parent–child hierarchies

+28% increase

increase in user-reported “feeling focused”

2.1× increase

in users completing tasks in a single uninterrupted work session

-29% decrease

in average session duration

+61% increase

cross-app task syncing usage after simplifying integrations

-44% decrease

in task abandonment due to clearer task hierarchies and progressive disclosure

01. Discovery

Clients Questions

Before starting any design process, the team sat down and came up with questions to the client that focused on what the client wanted Bridge.ai to represent. We then send our questions to the client and they answered every question we had.

Secondary research

Our goal was figuring out how to build a functional UI that illustrated a clean and efficient work flow. We received a sample of the client's platform and built upon what they already had.

We decided that we needed to do a competitive analysis on other task centered apps so we could see how we could incorporate ai elements in the design process.

Below is a brief examination of the research we complied 


Any.do

  • A highly minimal interface reduces cognitive load and allows users to focus on content rather than interface elements.
  • Strategic color coding is used to establish visual hierarchy, differentiate content types, and support quick scanning.
  • Uncluttered feel
  • Ease of maneuvering items to have users have priority on focus items

Byword

  • Generous use of white space improves readability and creates clear separation between content blocks.
  • The experience mirrors familiar note-taking patterns
  • Typewriter mode allow for free thought word  sessions
  • Lots of shortcuts to manipulate text

Bike Tool for Thought

  • Big open space to brainstorm ideas
  • Good use of nesting items together and ease of use
  • The interface is clean, uncluttered aesthetic that supports clarity and minimizes visual noise.
02. Ideation

Mid-Fidelity Wireframes

Our client made wanted us to have creative freedom but also wanted us to keep macOS in the center of our design. We decided to go for a clean, simple, and open space look. We focused much of attention to the canvas section of the app, which is how a user create a new task.

Other important functions we considered and designed were:

  • Nesting tasks together
  • Calendar, email, and contacts access
  • Ability to use keyboard shortcuts
  • Choice to include time restraints for tasks
  • Content focused UI
  • Smart Collection - putting all related docs, messages, contacts, etc together for a single task

Mid-Fidelity Wireframes Feedback

Once the client came back to us with comments, we worked to find solutions to any concern they had. One concern was that they felt the canvas section and profile notifications of the app interfered with the already existing software of the app and macOS.

We focused our energy on figuring out ways to make the UI align with the AI values by designing ways in which a task contains important and vital information for the completion of the task and the user. Overall, simplified, and cleaned the app to be more desktop friendly.

03. Design

Style Guide

Though we based all of our designs on macOS standards so that Bridge.ai felt integrated to the apple ecosystem, we did also want to find ways to express ourselves through color, typography, and iconography within our restrictions

We had fun trying on new colors and working with illustrations that made it feel like bridge was a dedicated friend helping you out throughout the day rather than it feeling like an anonymous source of information.

Hi-Fidelity Wireframes

Going into Hi-Fidelity screens, we made sure that all screens were appropriate to the client's vision. We made sure all the assets were consistent and added sparks of personality of the brand through graphics and color choices.

We based the colors on iOS guidelines but also maintain a certain freedom when deciding which colors to use in order to pass accessibility standards.

04. Prototype
05. Dev Handoff

Dev Handoff

Once we got approval from our client, we created annotations and measurements to the developers to ensure that our designs are legible and translated well.

06. Reflection

This project relied heavily on research, experimenting, and collaboration. It was a constant effort for not just myself, but also the team to keep ourselves accountable and to push ourselves to achieve a product that looks so simple yet contains complex functions

I found that my leadership skills greatly improved throughout the process as I helped delegate tasks and maintain a steady workflow where we met everyday to make sure that we were on teh same page and being as cohesive as possible.

I found that one of the hardest design challenges is the idea of concrete minimalist actions where the best designs are designs that seem obvious. This project definitely made me face this challenge head on and believe that my skills as a UX designer as vastly improved through my understanding of space, color, and flow. Forever grateful for my team and deeply appreciative of the learning journey that I embarked on