Examples of Sketch
HERE FOR LOCAL JOURNALISM APP
HERE, a location-aware app
First experiment at the Lenfest Local Lab
I joined the Lenfest Local Lab as a UX designer in mid-August right after graduating from Drexel University’s Interactive Digital Media program in Philadelphia. The first project I began working on with the lab team is a location-aware app to send related news notifications based on where people are. The purpose of this experiment is to test different ways of surfacing local news using someone’s real-time location.
I started applying UX thinking by outlining questions and challenges that users of this app might encounter. Before I could start designing the experiment, there were fundamental questions I needed answers to, including:
1. Do people check notifications on a regular basis?
2. Do they tend to engage with notifications?
3. What are other features would they expect from a location-aware news app?
A good way to quickly gather impressions from potential users is to deploy a survey, and so I did for this experiment.
Please read more about the survey methodology, respondents, and result in this Medium post I wrote: How We’re Applying UX Thinking in the Lenfest Local Lab.
Based on the survey, I started drawing initial app sketches with pen and pencil. The sketches included ideas for welcome screens (or onboarding), content filtering and layout. With almost 50 sketches to review, the team met to discuss the possibilities for the app. We decided we would request permission to send people notifications and also to access their location, and that the app’s main screen would display a list of Inga’s articles about Center City Philadelphia with a toggle option for a map view of where articles were located. With those decisions made, I transitioned from pen and pencil sketches to make low-fidelity wireframes using Sketch.
For that, I started by wireframing two key features of the app: the screens people would see after downloading the app (called onboarding screens) and the app’s notifications. The onboarding screens are key because they set the tone for people’s experience with the app, and it’s also what they see when we invite people to grant the app the three permissions it needs. Similarly, the notifications are key because, in a perfect world, people will never need to open the app to get value from it.
After putting together low-fidelity wireframes and accounting for all of the user flows, I moved onto making more detailed mid-fidelity versions by adding real text and images pulled directly from Philadelphia Inquirer articles that would be in the app. I also started adding placeholder graphics and few icons — for the Enable Location and Enable Notification buttons — to the onboarding screens.
After three iterations of the mid-fidelity wireframes, there were a few changes made to the app. For example, the list view was removed, a setting screen was added to control permissions, and articles are directly linked to Philadelphia Inquirer articles on Philly.com.
When the mid-fidelity wireframes were mostly complete, I moved on to create the visual design of the app. My first step was to create two mood boards for the team to review, with different visual styles. The first one focused on the vivid and lively theme of arts, culture and architecture journalism — which were the types of stories we were aiming to include in the app. The second one zeroed in on a sleek and modern urban theme since the app was going to be focused on surfacing local news about Center City Philadelphia.
The team decided to move forward with the first mood board because we wanted the look and feel of the app to truly reflect the first set of stories that would be included — local arts, architecture, and real estate news. This decision gave me the direction I needed to move forward with high-fidelity wireframes. In addition to applying the color and fonts to the interface design, I also used the colors to create the onboarding graphics and the app icon.
The app’s final design and feature set have also gone through a few iterations. To read more details about the process and how the design changes are made, please see the this Medium post I wrote: Applying research and analysis to new product design and testing.
Solution & Results:
Now that the app is launched, feedback will be collected through the analytic data and surveys. I will continue writing about what we find out through this experiment!