Fuse

Helping users organize web information

Background

Fuse is a Chrome sidebar extension that works to help users organize and manage complex information online.

During this project, I worked with two other research assistants on the Mobile team to design and iterate upon wireframes, conduct online and in-person user testing sessions, and analyze our findings through weekly meetings.

Problem

Large influx of web results makes it difficult for users to easily parse and organize information

The web has become an information paradise with a growing number of opinions and resources with answers to our questions. However, as the number of available resources grow, so does the amount of work it takes to organize all of these options.

Challenge

To conceptualize and prototype an iOS companion application to Fuse

We were tasked with the challenge of repackaging the entire Fuse experience for students, in particular. The goal of this project was to develop an application that could complement the current Fuse extension but also be able to function independently.

Understanding the Problem

What kind of experience do we want this app to be?

We wanted to make sure to design an experience that was not only easy to use and access without large internet usage but also an experience that could complement well with the features currently used in the Fuse extension.

I started off by doing a competitive analysis of similar applications to gain a better understanding of each application’s features and functions, and then using the insights I discovered, we decided built some customer journey maps to better pinpoint pain points and opportunities.

Fleshing out our Ideas

We used our low-fidelity wireframes to gain a better understanding of the hierarchy between Projects, Folders, and Cards and to explore more visually how the potentially process for each feature may look when translated from the web over to a mobile application.

WORKING THROUGH ITERATIONS

Throughout our design iteration process, we explored several options and features, such as the hamburger bar and long press option, to make the app easier to navigate and more accessible; however, we ended up scrapping many of these ideas because the features either weren’t necessary to have at the moment or were not intuitive enough to easily access.

After series of iterations, we decided to make a style guide to help make our design more consistent and uniform.

user testing - getting real life feedback

In between the various iterations, we wanted to make sure to test our design to make sure we were heading towards the right direction. We tested 3 users in 45 minute-each user testing sessions with the goal of allowing us to better pinpoint areas needed for improvement or change.

Through these sessions, we were able to:

1. Determine which icons worked effectively and which were confusing

2. Gain a better sense of which actions did not seem intuitive enough (ie. tapping to edit text)

Reaching the Latest Version

Incorporating icons to help with project classification

In our latest version, we focused a lot on project categorization. Since this was still an ongoing idea, the current colored icons on the “My Projects” page are all just placeholders for icons that should specify the category of each project (ie. Green - Tech Controller, Travel - Orange Plane)

Our main goal while iterating was to begin cleaning up our wireframes and to start thinking of ways to categorize the projects to make them clear which project they’re in throughout the flow.