Medium for iOS

Designing a ‘Nearby’ articles feature from persona to prototype

Background

Medium for iOS is a beautiful app that maintains simple functionality by design. Some users have called for additional features that currently exist on the web, such as the ability to search and write. Medium, however, has opted to preserve the focus of its iOS platform on providing quality content for a delightful reading experience. Because enjoying a story is the single most important goal of the app, I wanted to consider a feature that would complement Medium’s design perspective and enhance the reader’s experience.

Challenge

Run a two-week design sprint to build out a ‘Nearby’ articles feature that allows mobile users to read stories sourced from around them

Solution

Watch in HD here

You can try out the prototype here


Design Process

How I Developed My Design

I used a lean approach to guide my design process. I focused on the first four steps of the lean cycle — enough to get a minimum viable prototype out into the world which I could later test with users.

Here’s the process I followed

Inspired and adapted from Laura Klein’s “UX for Lean Startups”

Let's begin!

Empathize

Personas

To begin, I first created a proto-persona. The purpose of a proto-persona is to help visualize a real user and determine his needs and goals. This puts the user at the center of the design process and helps to inspire a valuable narrative that can inform later design decisions. 

Hey everyone, meet Dan:

User Stories 

Next, I distilled Dan’s needs and goals into a user story to better design a helpful feature for him. This is a typical design story format:

“As a <role>, I want <goal/desire> so that <benefit>.”

And here’s what Dan’s story looks like:

As a journalist and avid reader on the go, I want to find articles sourced from my location so that I can experience what I’m reading in the app and the world around me.” — Dan

Design Stories

I then wrote out design stories, breaking them down into two parts: epics and stories. Epics are high-level user stories that capture the rough scope of what a user would do. Stories are more detailed actions to determine how users would navigate a particular epic. 

Mapping out epics and stories helps to gain a more comprehensive understanding of what I could design and uncovers edge and corner cases — less frequent cases that might occur as a user navigates through a particular flow. You can check out my considerations for a couple of edge and corner cases here

Mapping epics and stories also helped to determine the scope of my project. In the end, I chose to focus on two epics that I found to be the most important: How the user would read a ‘Nearby’ article and how a user would have a seamless reading experience despite leaving a “Nearby” zone (Loss of connectivity).

While concentrating on these two epics, I also made sure to consider my additional design stories to help inform my decisions throughout my design process. I then converted my design stories into task flows. 

Visualizing with Task Flows

Task flows help me visualize the process a user would experience as they interact with my new feature and also demonstrate alternative flows a user might take. I created two task flows to reflect the two epics I would be focusing on for this project. 

This diagram shows the typical flow of how Dan, our proto-persona, would read a ‘Nearby’ article:

And this diagram shows what would occur if Dan leaves a ‘Nearby’ zone and can no longer access ‘Nearby’ articles:

In addition to these two front-of-house flows (Dan’s experience), it was important to consider the back-of-house flow, i.e. 

How might Medium collect and curate relevant articles to support this new ‘Nearby’ feature?

*Because my project focuses on the readers’ experience, I won’t go into detail about the back-of-house experience in this post, however, you can check out my design considerations for it here

Ideate 

Sketches

From the task flows, I identified the necessary screens to design and sketched out as many design solutions as possible. Sketching allows for quick ideation and provides a conducive medium to rapidly experiment with different design patterns.

Iterate

Wireframes

Next, I took the best solutions from my sketches and converted them to wireframes. I selected final mockups based on what was best for the user while also considering Medium’s design aesthetic and company goals. Finally, to keep the user at the center of the design process, I created scenarios to reflect my initial design stories for Dan.

Mid-level Wireframes: 

Scenario: Dan is meeting up with a friend in the Mission district in San Francisco. While waiting in a cafe, he opens the Medium app on his iPhone and finds the ‘Nearby’ feature for the first time.

Scenario: Dan gets on Caltrain near AT&T park in SoMa. He begins to read a story from the ‘Nearby feature as his train departs San Francisco to Palo Alto. [a ‘Nearby’ city to a non-‘Nearby’ city]

High Fidelity Mockups

Before prototyping, I converted my wireframes in to high fidelity PSD mockups to explore the look and feel of the new feature. 

Selected mockups

 

Prototype

Finally, I created a prototype for the ‘Nearby’ flow using InVision to test with future users.

You can watch a demo of it of my feature here.

And watch what would occur if a user leaves a ‘Nearby’ zone here. 

Conclusions

In building a ‘Nearby’ articles feature, I wanted readers to be able to access relevant stories by location to feed their natural curiosity about what’s around them and help inform a greater sense of community. Medium users have already begun to collect stories by location, as demonstrated here, and I think the trend of curated, local storytelling will continue. With the addition of a new ‘Nearby’ feature, finding articles by location could contribute to a better reading experience that keeps users curious and enlightened by what’s around them. I’m excited to test this hypothesis with users.