Flow [Browser Extension]

A browser extension designed to declutter and organize browser tabs. Flow assists the users to separate their workspaces by context to streamline the browsing process. The extension allows its users to divide their tabs by project so they can just have one project open at a time and easily switch between projects at the click of a button

About Flow’s Goals

About the Project

The Team

• The team was comprised of 4 young UX generalists

The Timeline

• We scheduled this project for a 3 week sprint.

The Problem

• Functionality: Flow's founding team has no trained designers, so they want to get UX support in understanding how they can improve their onboarding experience and general app functionality.

• Customer Retention: Flow wants to improve the conversion rate of various user flows and reduce uninstalls due to bad user experience.

Target Users

• People with Cluttered browsers

• Students, Techies, Designers

• People with ADHD or anxiety

Discovery

Heuristic Analysis

We performed a heuristic analysis of the original extension to see what could be improved in it.

Comparative Analysis

We then in compiled a list of features that would be most common across other extensions with similar purpose to perform a comparative analysis.

Word Association:

Since the name of the product was Flow and we wanted to keep it that way, we decided we should determine what people associate the word flow with in order to keep the branding consistent with user schemas. We ended up deciding to send out a survey which was then turned into word clouds

Define

User Interviews

We then conducted interviews to better understand potential users of the product as well as how they interact with the original product. We interviewed both people who frequently use the original product as well as people who have never used it. For the people who don’t use the product currently, we also performed a user test to see how they navigated the product before we made any changes.

Affinity Map and Key Findings

From these interviews we created affinity maps to sort the responses of our subjects into categories and pulled the main findings into a pamphlet to give the clients to help them better understand our suggestions.

Persona

Based on our user findings we created a persona that reflected our findings.

Problem statement:

Julia A. Anne is a busy, multitasking freelancer and entrepreneur who needs a way to organize her browser tabs because she is always working on multiple projects at once and is often overwhelmed.

Solution statements

• How might we alleviate Julia's anxiety regarding tab clutter?

• How might we help Julia maintain focus on her workspace / tasks?

• How might we empower Julia to enhance her current workspace organization

Our Plans:

We determined we should revamp the landing page for the site, the onboarding for the app, and the general design of the app. These changes would incentivize people to download the app, keep the users engaged once they downloaded it, and increase satisfaction decreasing the number of uninstalls of the extension.

 Design

Preliminary Sketches

Once we felt we had a good idea of what we wanted to make we were ready to begin redesigning the product. We made some simple preliminary sketches. I chose to do mine via the program sketch, focussing on how the flows themselves could be displayed. we ended up with a few themes that ended up in the final versions.

My sketches:

Other Designer Sketches:

Low Fi Prototype

We looked across all the paper sketches and compared them to find which features we wanted to keep and change from each of them and made versions of each of the.

1st Iterations:

Usability Testing

We performed user tests on our prototype. Then based on the user tests we slowly made tweaks to the design and tested them again and repeat, slowly transforming our low fidelity prototype into a higher fidelity one.

Style Guide

We determined a style guide together for how we wanted the app to look, picking colors and fonts to match the website

High Fi Prototype

Finally we were able to bring the prototype to our highest fidelity version. In the high fidelity version we were able to improve their branding with a consistent color scheme, a new logo, and even some animations.

Next steps

As we wrapped up the 3 week sprint we found ourselves happy with what we came up with, but yet knowing that more things would come up once the changes were released to the public.

• Implement these changes in the dev version of the app

• Test the dev version with some of the users

• Make adjustments based on that smaller scale feedback

• Release the full update and request feedback from users