design and product
lederfinal4.png

Outlining iOS App for Journalists

 
 

Leder

 

As a former reporter, I knew early on that I wanted to focus my master’s thesis project on simplifying the workflow for journalists. After much research and many conversations, a trend emerged—taking notes is easy, but there is little you can do with your notes after you have taken them.

We can enhance photos, mix audio, make beautiful presentations, and edit video on our phones—why does mobile text manipulation lag so far behind?

 

Challenge

Help journalists turn their raw interview material into finished stories by making it easier for them to parse and organize their notes.

Solution

Provide users with an easy way to extract text from already-typed notes and create an outline to use as the base for a story. As a mobile app, Leder serves the increasingly active and transient context in which journalists work.

Results

Leder launched in December 2015 and is available for download on the iOS App Store. Its custom highlighting functionality, which works by simply tapping words, has been lauded as a novel approach to text selection. 

Role

I am the sole designer and developer of Leder. I completed all of the research, UX and visual design, development, and implementation of the app and promotional content.


 

Leder’s Key Features

Designed for journalists. Leder is a highlighting and outlining tool that helps journalists (and all writers) organize and edit text on the go.

Custom highlighting. Highlight only the parts of each note that you want to keep. Leder’s touch-based text selection makes highlighting text as easy on a phone as it is on paper.

Access everywhere. Leder syncs with Evernote, so content is available on every device.

Super simple outlining. Combine quotes from different notes and organize them all in one easy outline. 

 
 

Process

Defining the Problem

First, I wanted to fully understand the problems facing journalists before considering product solutions. To do so, I interviewed nearly two dozen working reporters, bloggers, and novelists to learn about their process. I asked questions about how they reported and wrote stories, and looked for inefficiencies and pain points in their workflows.

Affinity diagram of research insights 

Affinity diagram of research insights 

One problem came up again and again in my research—outlining methods are stuck in the pre-tech ages. To extract useful information from a mass of notes, writers resort to time-consuming and stationary methods, like printing and highlighting by hand, or copying and pasting selections into a text document. Doing this while working on-the-go is even more difficult, where writers are confined to a tiny screen, keyboard, and blue toggles.

I conducted a thorough competitive analysis of note-taking products, and found that outlining and parsing tools are few and far between. By the end of my research, I had a clear idea of the problem and lots of ideas on how to solve it through a product.

Turning Research into Deliverables

Before moving into design, I created personas and use cases to illustrate my research. These deliverables were backed by data, and served as reference points for me as I continued the project.

 
 
 
 
 
 

Design, Test, Iterate

After understanding the problem I needed to solve, I could move into design. Over the next few weeks, I generated a ton of out-of-the-box ideas through sketching. Since I was working on this project alone, I recruited friends to help me brainstorm and sketch.

Eventually, the notion of extracting important information, outlining that information, and using that outline as a base for stories emerged as the strongest concept.

A simple depiction of the four steps that eventually made up Leder.

A simple depiction of the four steps that eventually made up Leder.

Next I worked quickly through dozens of designs, testing each and applying the insights to the next iteration. I bounced back and forth between varying degrees of fidelity. This helped me quickly assess ideas, and abandon the ones that weren’t working. 

 
 

The screens below illustrate how I worked through one design challenge. The first several prototypes featured a side panel containing all notes in a project, but testing revealed that users didn’t understand how to navigate it. I eventually abandoned the side panel and introduced a new project view that followed a folder structure, holding all notes and outlines.

Despite the addition of another screen, this structure was clearer and more in line with my users’ mental models.

 
 

Interaction Design

Some things, like Leder’s highlighting functionality, cannot be tested through static prototypes alone. I tested that functionality and other complex interactions by developing functional prototypes in code.

The insights from usability testing informed the details of the highlighting functionality. For instance, I applied a faint yellow highlight to the first word a user selected to indicate that the user was successfully in the midst of highlighting (before, no feedback was provided). The full yellow highlight appeared once users completed the selection.

The final experience allows users to highlight text by touching the first and last words of a quote, bypassing the native iOS long-press method of selecting text. Under the hood, Leder separates and extracts highlighted selections so users can work with them later. The mechanics are designed to be easy to learn, quick to do, and more in line with how users prefer to highlight.

 
 

Visual Design

Much like the UX deliverables, I created a logo and moodboard early on to guide my visual design. I wanted the visuals to be clean, simple, and inviting, always keeping the focus on the content and task at hand. For that reason, I chose to go with iOS’s system font at the time, San Francisco.

The logo is a nod to the inverted pyramid model of structuring a story, where the most newsworthy information leads the story. It also reflects Leder’s basic mechanics, whittling down a mess of notes into the most meaningful selections.

Web App to iOS App

I developed Leder in HTML, CSS, and JavaScript, paired alongside the AngularJS architectural framework and the Ionic user interface framework, and deployed it through PhoneGap. I invested as much time in my code as I did in design—researching frameworks and database options, modeling data, and restructuring and optimizing code where possible.

Below, the evolution of Leder’s data model:

 
 

Even my design work was influenced by my developer hat. My user flow, for instance, covers technical details and coding edge cases.

 
 
 
 

Despite careful planning, I could not account for all of the challenges I faced throughout my development process. I documented the trials and triumphs in this project development blog. Some of my favorite posts are listed here:

Preparing For Launch

I recruited a group of working journalists to test Leder in a controlled app release so I could understand how Leder operated in the real world. The results helped me structure my last few weeks of design and coding so I could uncover additional bugs and edge cases, prioritize outstanding features, and refine details like empty states and copy choices before releasing Leder to the public on the App Store.

 

Results

I released Leder on the iOS App Store in December 2015. Version 1.2 is currently available for download. The feedback so far has been encouraging. This project, along with a master’s thesis on my research and process, consumed the better part of 2015 for me, and I’m very proud of the result. I truly believe that Leder will help writers work better.

For more, read my writeup on Medium, or, for the truly dedicated, my thesis linked below. For the hands-on experience, give Leder a go.