top of page
TL;DR
The ask was to streamline a messy and highly informal process. My solution cuts down the number of tools users need, saves heaps of clicks, sets the stage for automation, and generates a valuable resource for the business: data.

Not Your Grandma's Scrapbook

The following is the third mini case study in a series about a single project. You can read the first case study in the series here and the second one here.

​

Scrapbooking

 

My client’s users want to write a report based on secondary research. Kyle, a typical user, starts by separating hundreds of Google search results into good and bad ones.

​

Once he has a nice, long list of promising webpages, he scans each one, copying pertinent information and pasting it into a Word document along with the link to the webpage from which he got it. He calls this document “the scrapbook”.

​

This process looks like this:

My job was to bring this process into a unified dashboard, and try to improve it along the way. 

Can We Keep It Casual?

​

The scrapbook is an intermediate document between Kyle’s shortlist of valuable sources and his final report. It’s also, in a way, temporary, because after the report is done he will never refer to it again. In fact he might not even save it. He certainly doesn't intend to share it with anyone else; i.e. the scrapbook is personal.

​

Additionally, its creation process is haphazard, the document itself is unformatted, and its internal logic is not consistent. For example, in the video above, Kyle pasted a link under a series of bullet points. Word formatted the link as a bullet point, and Kyle didn’t bother to fix it. The scrapbook is full of this kind of stuff.

​

The scrapbook is messy. Data scientists would use the term “unstructured data”. Sociologists would say it’s “a personal or informal artifact”. High school teachers would call it “scratch paper”. My client wanted it streamlined.

 

There are certain chances we as UX designers face when we seek to formalize an informal process, and so I didn't take this task lightly. I categorized my own misgivings about my task as follows:

​

  • Risk #1: The new process inadvertently introduces complications that take away whatever lightness or even carelessness the existing process allows. 

​

  • Risk #2: The new formality confounds or even embarrasses the user. 

​

  • Risk #3: Worse, this formality gives the impression that a messy, personal artifact may become subject to scrutiny. The consequences of this could be fatal.

​

For example, if my grocery list app forced me to name my lists, I’d revert back to jotting them down on the back of an envelope. If there was a social media share button next to each list on the home screen of the app, I'd go ahead and uninstall the app. Why? 

​

  • The extra step of naming the list is an unnecessary complication (risk #1). 

​

  • The mere suggestion that I should title a grocery list confounds me (risk #2). 

​

  • And lastly, the share button makes me nervous. What if I accidentally click it and reveal to friends and family my shameful addiction to chocolate covered pretzels? (risk #3).

​

Although the informal process is not perfect (for example, I can’t easily share the list I jotted on the back of the envelope with my husband while he’s driving to the supermarket) -- the formal one is worse.

The Design

​

Easy Breezy Button Squeeze-y

​

In my Better Google case study, I chronicled my redesign of a Google search result, which incorporates data that my client extracts using natural language processing to try to speed up the users’ process. It looks like this:

​

scrapbook circled in result.png

In fact, I designed a few different configurations of visual, quantitative, and qualitative information, which Kyle can navigate between within a unified dashboard. Another example of such a configuration is below. Instead of the first few sentences from the webpage, this result displays a gallery of the images appearing on the webpage. 

visual result scrapbook circled.png

The little book icon circled in blue in both of the images above represents the scrapbook. Adding content to the scrapbook is as easy breezy as clicking this icon.

 

The icon appears:

 

  • next to every object that can be added to the scrapbook

  • no matter what context Kyle may see it in. 

 

The second point is worth expanding on. Since the dashboard offers many different configurations of the same information, it’s important that Kyle can interact with the same types of information consistently, no matter where and how he comes across them.

​

Here are the two main contexts in which Kyle might see and add a sentence to the scrapbook:

Goodbye Browser: The One-by-One View

​

In this view, all of the content of a specific web page is displayed inside the dashboard.

​

Ideally, this would completely supersede Kyle’s need to open any web page in a browser.

 

Here Kyle sees the same content he would see in the browser, but in a uniform format, sans ads, and with shortcuts for scrapbooking. Text, images, and named entities are separated into three tabs. Each sentence has a scrapbook icon next to it.

​

Sentences.png
Goodbye Google: Search Results View

​

This is our “Better Google” view. Ostensibly, while Kyle is using this view, his goal is to sort results into a list of good ones a list of bad ones, but if he happens to see a sentence or an image he’d like to put in the scrapbook, the icon for scrapbooking is still right there.

 

This is important because it allows Kyle to add sentences to the scrapbook without even visiting the page. The "visuals" tab allows him to do the same with images.

​

page.png

Scrapbooking in Action

If Kyle has the scrapbook itself open in one of his panes (see Panes), as in the example above, he can see the item added to the top of the list. Either way, the appearance of the icon changes to indicate the item is now in the scrapbook. A notification with an "undo" button appears on the bottom left of the screen and stays for 5 seconds. 

Not Your Grandma's Scrapbook

​

Let’s take a closer look at what an object looks like once it’s in the scrapbook.

​

New Sentence.png

In this case, the object is a sentence. The sentence itself is displayed prominently. Underneath it, its source is linked, saving Kyle a couple of clicks. 

 

Kyle is not prompted to provide any additional input, but a “Notes” field is available should he wish to use it. Additionally, three other fields are available, each corresponding to a note that Kyle is likely to add in the scrapbook, according to my research:

 

  • Link: this refers to a link between two scrapbook items. For example, Kyle might want to tie this sentence to a different sentence he’s added to the scrapbook previously. 

​

  • Section: every report that Kyle writes contains a subset of the same collection of sections, such as “executive summary”, “key trends”, “supply chain”, etc.

​

  • Tag: depending on the topic that Kyle is researching, he may use more specific categories. For example, if he’s researching cancer therapeutics, he might want to tag information with the type of cancer it pertains to, e.g. “Lung Cancer”. 

 

If Kyle wishes to revert back to his old ways of doing things, he can copy the sentence as well as its source by clicking “copy” in the top left corner. 

 

If he changes his mind and wants to remove the sentence from the scrapbook, he can click the “No Scrapbook” icon. It looks like this:

The Other User

​

I covered how I approached structuring the scrapbook, but I want to talk more about the why. Why formalize an informal process?

 

There are two reasons. The first is obvious: we want to help Kyle. We want him to have an easier and faster experience, and we believe that we can achieve that by bringing the scrapbook into the dashboard. This is the familiar UX reason. But my client has an additional motive:

 

The company’s ultimate goal is to eventually automatically generate reports.

​

Every click that Kyle makes in the dashboard produces data for this purpose. My client hopes to eventually use this data to train machine learning models to perform much or all of Kyle’s work on their own.

 

What this meant for me as a designer was that I had another user to consider - a user with a set of goals and needs completely disparate from Kyle's -  a data scientist.

​

Here is the data that Kyle generates while doing his work:

Screen Shot 2020-06-16 at 11.51.45 AM.pn

In the first two rows, Kyle’s actions are well-defined and the relationship between the input and the output is direct. With enough data, it seems possible that we can train a model to do what Kyle is doing now. 

 

But will this be true for the last row? 

 

The actions that Kyle takes when he transforms the scrapbook into the final report are harder to get a grasp on. A function that replicates this process is difficult to imagine because Kyle’s decisions are both complex and opaque to us. We might be able to capture some of his process through drafts, or if we track his keystrokes as he types a report, or record him talking to himself while he’s working on it, but (1) that would probably make Kyle uncomfortable - as mentioned previously, the impression of scrutiny can be fatal - and (2) his analysis and synthesis would still largely be a mystery to us. 

 

Another way to think of the last row is like this:

insight flow.png

In my design of a scrapbook item, I tried to find ways to fill in the gap represented by the red hexagon above by giving users like Kyle the option to reveal more of their process. 

annotated scrapbook item.png

If Kyle makes use of these features, the diagram transforms to this:

Screen Shot 2020-06-15 at 4.52.21 PM.png

If Kyle uses these features heavily, his scrapbooks will transform from unstructured to structured data, because each piece of information would be given a meaningful label. Structured data is a much more usable (and therefore valuable) resource for the purpose of machine learning. 

​

Once I am able to test and iterate on these features, my goal will be to find ways to encourage users like Kyle to expose and fill in as many intermediate steps and processes between the scrapbook and report - a fascinating challenge, which frankly I can't wait to sink my teeth into.

What's Next?

​

My client is betting that a dataset consisting of a thousand scrapbooks and their corresponding reports would be enough to create a machine that turns the former into the latter. To do that, they need a comfortable lab for their experiments. My next case study covers the machine learning interface I built for this purpose.

bottom of page