Medium iOS: Finding Stories by Location
Designing a ‘Nearby’ articles feature for better UX
Objective
Run a two-week design sprint to build out a new feature, from persona to prototype, for Medium iOS.
Outcome
A ‘Nearby’ articles feature that allows mobile users to find interesting stories sourced from their location, i.e. neighborhood.
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.
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
Let’s begin!
Empathize
Personas
To start, I first created a provisional-persona. The purpose is to help visualize a real user and determine his or her 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. Here’s my persona,
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.
“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
By writing a user story I could focus on Dan’s situation, his motivation, and his intended outcome to make a feature that would best benefit him.
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 ‘Nearby’ data).
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.
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 in this post about the back-of-house experience, 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.
These are my final mockups:
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.
Prototype
Next, I created a prototype for the ‘Nearby’ flow using InVision. Prototyping with InVision was a great way to explore design interactions and allowed me to iterate quickly and efficiently. You can try my clickable prototype for yourself here.
And also watch the demo of the feature below (as shown at the beginning of this post)
Finally, you can watch what would occur if a user leaves a ‘Nearby’ zone.
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.
