Designing to Improve Medium for iOS

Building a better on-the-go reading experience by adding a 'Nearby' articles feature

Objective

Run a two-week design sprint to build out a new feature, from persona to prototype, for Medium iOS.

Feature

Add a 'Nearby' articles feature to allow iOS users to choose Medium articles relevant to their current location.

My Process

I used a lean approach to guide my process in designing a new feature. Considering the scope of this project, I focused on the first four steps of the lean cycle. Later it will be important to validate my design with users. 

Inspired and adapted from Laura Klein's "UX for Lean Startups

Inspired and adapted from Laura Klein's "UX for Lean Startups

This is how I got started…

Empathize

Personas

First, I created a persona. The purpose of a persona is to help visualize a real user and determine their needs and goals. It 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:

persona.jpg

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 allow me to capture the rough scope of what a user would do. Stories are detailed stories that help me determine how users would navigate a particular epic. 

 

By mapping out epics and stories, I was able to gain a more comprehensive understanding of what I could design and uncovered 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 me to determine the scope of my project. In the end, I chose to focus on two epics: How the user would read a ‘Nearby’ article and how a user would have a seamless reading experience despite leaving a “Nearby” zone.

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

Next, I converted my design stories into task flows. 

Task Flows

Task flows helped me visualize how a user would interact with and move through my new feature and also helped to demonstrate alternative flows a user might take.

This diagram shows the typical flow of how a user would read a ‘Nearby’ article:

And this diagram shows what would happen when a user leaves a ‘Nearby’ zone and can no longer access ‘Nearby’ articles:

In addition to these two front-end of house, user focused flows, I thought it was also important to consider the back of house flow. How might Medium collect and curate relevant articles for the new ‘Nearby’ feature? Would there be a lone employee at the bottom of the Medium office working tirelessly to categorize articles by location? Maybe, but probably not. 

Due to the scope of the project I decided against designing this consideration out to prototype, however, I do discuss it in more depth here.

Now with task flows established, the stage was set to think creatively about designing solutions. 

Ideate 

Sketches

I identified the screens that I needed to design for and sketched out as many solutions as possible. Sketching allows me to quickly get my ideas out of my head and on to paper and provides a conducive medium to rapidly experiment with different design patterns. Designing first at a low fidelity also helps me to not get too attached to my initial solutions. 

Selected sketches

Selected sketches

Iterate

Wireframes

I took the best solutions from my sketches and converted them to wireframes. At this stage, I tried out a couple of designs and selected my final mockups based on what I thought was best for the user while also considering the importance of conforming to Medium’s design aesthetic. To keep the user at the center of the design process, I created simple scenarios for my persona, 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]

Prototype

High fidelity prototypes and demos.

I converted my wireframes into high fidelity mockups and created a prototype for the ‘Nearby’ flow using InVision. You can watch a demo of it here.

And check out a demo of what would occur if a user leaves a ‘Nearby’ zone here. 

Finally, you can try the clickable 'Nearby' flow prototype for yourself here

Next Steps: 

My next steps will be to put my prototype in front of users and iterate upon observations. 


I’m not affiliated with Medium. This project is put forth unsolicited, in an effort to explore the design process of creating a new feature.