Bettina Chou

Bento Browser is a developing product using cognitive sense-making theories to aid the organization of information from complex searches.


UX/Information Architecture, Mobile/Desktop, HCI Research, Ongoing Work  |  Team: Shannon Lin and Amy Lin, under Nikki Kittur and  Nathan Hahn |  Fall 2017–present | Also check out the beta on the app store!


Where We've Been

Expanding a mobile experience onto desktop

Below is a prototype of the chrome extension from last semester. Recently, we've been designing the workflow for artifact creation and unifying the experience between desktop and mobile. Specifically, we're introducing a "queue" to lessen the amount of things a tab is doing at once, and using a combination of existing products and clickable prototypes to test the workflow efficiency. At the same time, we've been testing visual systems to make the product more consumer-appealing.


Video Walk-Through of Chrome Extension

 Mobile Visual Direction as of Jan 2018

Mobile Visual Direction as of Jan 2018


How We Work

Innovating upon ingrained workflows under technical constraints takes courage. There's a lot of ambiguity.

Since a handful of the technology we're relying on doesn't fully exist yet, our process sees a lot of back and forth between ideas generated from both design and dev teams. Primarily a research project, we're often faced with both overlapping and disjointed ideas, with holes filled with technical uncertainties. But we support each other through stand-ups, critiquing across teams, and always switching up angles. We've been able to put Bento in front of many people the last few months, and we're really excited for what's to come!


Where We're Going

Going beyond tab management and aiding decision making through artifact creation.

In comparing our findings last semester with the greater Bento team, we all saw a convergence on note-taking as a way to distill information, ultimately giving users an opportunity to tuck away pages instead of leaving them open. We see value in this especially for complex searches, when users tend to go through phases of mass-information-collection followed by passes of organization and decision-making. I try to update our progress every few weeks here and I'm starting a process blog, but if you're itching to hear about what I've done, say, today, don't hesitate to reach out!


Prototype of switching between items in queue

Queue prototype as of Feb 2018

Rough sketches of system done in a meeting


 Our process involves, paper, pixels, being lost in ambiguity, and finding a way to work with that anyways

Our process involves, paper, pixels, being lost in ambiguity, and finding a way to work with that anyways


01 – Initial Questions

Is tabbed browsing really the best way to organize our information? What existing methods of saving information are not working?

research icons-01.png

02 – Research Insights


Affinity clustering my interview findings to identify themes. I've circled the ones that were most relevant to our research questions and had potential for guiding next steps.

There exists commonalities among both types of users in how they access and retain information.


Fear of Losing Information

Many people hoard tabs out of fear of losing information. Only a few tabs are actually on tasks the user is currently working on and everything else is to save information. Many of those same people find existing information-saving methods incomplete or cumbersome. Ex: bookmarks feel too permanent and aren't as visually accessible as key-ing through tabs.

Making Do with Existing Methods

People have all found ways of making do with existing methods but many wish there were better options. They’ve developed a loose spatial structure to separate tabs and windows by task. many tabs people open are related to each other, if not explicitly for the same task. We can see that spatial organization also in physical and tangible spaces.

Disconnect between Mobile and Desktop

There’s currently a disconnect between mobile and desktop browsing, making people not averse to do searches on-the-go


When it comes to opening tabs, there's two types of users: "all-at-once" & "one-at-a-time"

types of users-05.png

All-at-once users tend to open several (usually 3 to 8) tabs at once when performing a search function, and then go through them individually. These people are more prone to tab hoarding.

types of users-06.png

In contrast, one-at-a-time users go down one path of tabs and sites and return to their starting point after they've gotten all the information they need down one path. These people tend to take notes and save less tabs.


03 – Prototyping and Testing Ideas

Can we lessen the amount of things a "tab" does by introducing more ways of organizing a hierarchy?


Salient points from our research saw that a key reason to tab-hoarding and disorganization was that tabs served multiple purposes: from accessing and saving information to setting reminders. In response, we proposed features of split screens, secondary "tabs", and reminders.

04 – Feedback and design decision 1

Can we find a balance of changing behavior while designing within existing workflows and contexts?

"If I'm in the middle of something I don't want to stop my flow to click so many pop-ups; I'd want Bento to make those decisions for me."

06 – Design decision 2: Shifting workflow towards artifact creation

We identified value in encouraging users to distill information, as it helped returning to a complex topic and decision making.


Designed mobile first because we'd run into discrepancy between existing mobile architecture and desktop usage behaviors.

We've found through our research that in addition to complex searches having a lot of information, users likely don't arrive at an answer in one sitting or even in the same context. In this way, our desktop work converged with the existing mobile app. We considered the use case of someone starting a topic on their phone and then moving over to desktop. Came up with following goals

"I don't believe in saving tabs. Once I get the information I need from a site, I copy over the information to a word-doc, maybe save the link, and close the tab."
"Very little screen real estate, probably wouldn't do so much note-taking and synthesis on mobile."

Some existing habits we found in user's support the direction of creating a more comprehensive artifact-making system.


06 – Design Decision 3: Bridging Organization of Mobile and Desktop

Can an additional spatial organization make parsing of information more efficient?

 timeline and priority of strategies as a result of annotation study insights

timeline and priority of strategies as a result of annotation study insights

This leads us to where we're at this semester; we're currently looking to test the concept of the "queue" and what interactions best fit within existing workflows. I'll be updating this every few weeks, but feel free to reach out for the latest updates!

Meet the growing team!

01 – Initial Questions