Applying research and analysis to new product design and testing

Our four-step process for moving from pen & pencil sketches to complete product design for our location-aware local news app.

Faye Teng
Faye Teng
Nov 12, 2018 · 10 min read
Image for post
Image for post

After research, how we dove into design


Step 1: Create low-fidelity wireframes with placeholder items to define the app’s flow

Onboarding screens

Image for post
Image for post

List view and Map view

Image for post
Image for post
List view shows stories in a list; Map view shows stories in a scrollable carousel.

Notifications

Image for post
Image for post
Wireframes include a screen showing an expanded notification and an article being displayed in the app.

Step 2: Create mid-fidelity wireframes with actual content to optimize for real scenarios

1. We removed list view, making map view the main app interface.

2. We added a Setting page to control app permissions.

3. We decided to link directly to Philadelphia Inquirer articles.

Image for post
Image for post

Step 3: Create a visual design that can be used in high-fidelity wireframes

Image for post
Image for post
Image for post
Image for post
Two mood board examples to showcase different themes for the app
Image for post
Image for post
High-fidelity wireframes of the onboarding screens

Step 4: Create high-fidelity wireframes and iterate

We decided to add a motion detection feature to the app.

Image for post
Image for post
The new onboarding screen requesting permission to detect motion

Other iterations we made

Image for post
Image for post
Wireframes for the new map view and Settings screen

Up Next: Launch!


The Lenfest Local Lab

A Philadelphia-based news product innovation team within…

Faye Teng

Written by

Faye Teng

UX Designer at Lenfest Local Lab for Lenfest Institute of Journalism. Drexel University class of 2018.

The Lenfest Local Lab

A Philadelphia-based news product innovation team within the Lenfest Institute for Journalism experimenting openly with ways to reinvent the daily user experience for local news

Faye Teng

Written by

Faye Teng

UX Designer at Lenfest Local Lab for Lenfest Institute of Journalism. Drexel University class of 2018.

The Lenfest Local Lab

A Philadelphia-based news product innovation team within the Lenfest Institute for Journalism experimenting openly with ways to reinvent the daily user experience for local news

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store