NEIGHBORHOOD: Online Local News

• Role: UI/UX Design (Research, Interaction, Visual Design)

• Challenge: Design a responsive true community publication online, commenting will be a large focus of the design of the site.

• Client: Neighborhood - online publication startup

• Timeline: 80 hours over 2 weeks.

Project Goals

• Create a modern design that forgoes news industry tropes and cliches in favor of something more modern that will draw more readers and, in turn, higher revenue.

• Create a true community publication online.

• Commenting will be a large focus of the design of the site. Each article page should have contribution and discussion at its core.

My design process

Phase 1a: Research & Discovery

My initial research was using Secondary Research to analyze how users consume contents from online news vs traditional newspaper. Furthermore, I want to know some trends in modern publication as well as figure out the best formats for online discussion. 

Research questions I would like to explore:

• What are some trends in modern publications?

• How do modern publications combine content and discussion together?

• Which topics in local news are readers interested in?

• How do they consume content from a site and what is most important to them?

• How do the readers interact with the online publications vs traditional publications.

• What factors influence reading behaviors?

• Which device do they usually use when reading the online news?

• Are there any points of frustration that readers have regarding their experience reading and interacting with online news?

Industry Review

Market Landscape

Competitive analysis

To identify the strength and weaknesses, I evaluated the competitors by focusing on 7 of the 10 Nielsen Norman Group’s Usability Heuristics for User Interface Design.  I researched and considered Nextdoor, Medium, Facebook, Reddit as direct competitors because they were most similar to what I wanted to design due to their user engagement by focusing on comments and new posts. To flesh out ideas about how other local online news are successful in the market, I also analyzed indirect competitors such as Gothamist and NBC Bay Area News. 

Initial things to keep in minds

• The content and action should be consistent across the site, so users don't get confused with unfamiliar icons or actions.

• Make sure that users can easily navigate and customize the contents based on their preferences or favorite articles.

• To encourage users to interact with the site, make sure that each articles is embedded with the section where users can leave comments, and show their reaction with funny icons such as Facebook, Medium, Nextdoor.

• Design should be minimal with clearly indicated UI.

• Make sure that users can save their favorite articles and read them again.

Primary Research: One-on-One Interview

Before diving into a one-on-one interview, I brought up 6 assumptions I needed to validate from my secondary research: 

1. Some readers don't care about commenting and just want to quickly get their local news.

2. Some readers visit to engage in conversation and meet other locals.

3. Young readers rely on a wider combination of platforms for information than older generation and are more likely to get local news.

4. People in large cities are more likely to engage in commenting on and discussing local news than people in rural areas.

5. Many old people are more reliant on traditional platforms such as newspapers and TV.

6. Mobile phone is the most popular device for people to read online local news.

To prepare my 1 on 1 interview, I drafted user interview planning to recruit the right users. Due to the time constraints,  my focus is to recruit users living in big cities or suburban neighborhoods who mostly read news online. I conducted in-person interviews with the neighbors in my local communities, and two others living in the large city.  

Phase 1b: Synthesis & Understanding

Information gathered during the discovery process helps me capture customer insights, user needs, and which elements make users frustrated in their shopping experiences. 

Empathy Map 

An empathy map is where I gather information and put them on post it notes which I, then, organize. In particular, I placed them in 4 quadrants: Doing, Thinking & Feeling, Seeing & Hearing, Saying. This helps me find user insights which I then extrapolate to find user needs. 

User Persona 

In order to develop a typical Persona that depicts the average audience member, I looked back over the Insights, the Needs and the Pain Points from my Empathy Maps.This Persona also highlights the major needs of the most important user groups so that they can be addressed.  Bri desires to get online news updates quickly every early morning as well as seek the facts while getting lots of information from other sources.   

POV Statement & HMW

The define mode is critical to the design process because it explicitly expresses the problem I am  striving to address through my earlier research. In order to be truly generative, I reframed the challenge based on new insights I have gained through the Empathize Process.   

Brainstorming

I selected each HMW question and though of  as many solutions as possible, then I jotted them down on my notes. After spending 30 min brainstorming, I looked back at my notes, prioritized, sorted and refined all of my solutions that I had come up with. 

Define Business Goals and User Goals

Before jumping right to design challenge, I would like to confirm where the business goals and user goals overlap. I read over project goals and user data that I had synthesized from primary and secondary research. Ultimately, I combined them with technical consideration to articulate the business goals in the diagram. 

Product Roadmap

After defining the shared goals, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Product Roadmap shows not only these goals, but also features that I came up with during the brainstorming process. Also, I added metrics to gauge the impact and effectiveness of such attributes on the site.  

Site Map

I organized the features and content architecture based on the priorities of the product roadmap. Then I mapped out the site map to show the relationship within the content on Neighborhood site. 

Before moving forward to visual design and high-fidelity wireframe, I needed to examine my initial design assumption. To prepare for usability testing, as always, I uploaded all pages to Invision and created  clickable prototype for usability testing. This lightweight prototype helped me test the product problems faster before going to high-fidelity mockups . 

Phase 6a: Usability Testing

Usability Testing Plan & Conduct Usability Testing 

I created a test plan based on Erika Hall’s method to help me test the usability, the functionality, and the problems of Neighborhood design sites. I recruited 6 people via Craigslist and conducted in-person testing with 4 people and remotely with two participants to see how they interacted with my lo-fi prototype. Also A screener was used as a recruitment aid to identify participants who matched the required characteristics. The criteria I used to select the participants include: living in a big city, or a suburb near large city; they have experience with both reading news online and traditional news.  

Affinity Map 

Creating Affinity Map helps me improve my design by defining the problems and suggesting the solutions. I generated the sticky notes to write down my observations; each on one sticky notes. Afterwards, I organized the notes in group to find patterns which lead to insights. Eventually, I prioritized each note to determine the recommendation in the next steps. 

The Affinity Map revealed the following insights:

• Most users don’t understand the purpose of the site.

• Most users were confused with using the feeling icons to show their feelings.

• Most users were confused with the concept of becoming a local journalist. They misunderstood that they have to pay for writing their story.

• Most users love to play with bookmark icon.

• Most users want to read more comments on the homepage.

The insights led to several recommendations to solve the user problems going through given tasks:

• Add the description about the purpose of the site on homepage.

• Allow users to interact on feeling overview section to navigate and share their feeling.

• Add how-it-works page to describe how users apply to become a local journalist.

• Allow users to click to see detailed comments on the homepage.

Phase 6b: User Interface Design   

Visual Design

I wrote down a few keywords that are also suitable for target audience's preferences along with business objectives: Modern, Trustworthy, Connected, Communicative. After sketching many pages, I ended up with a concept that presents the Initial N of Neighborhood and three strips that represent a paragraph of the articles. Then I created a style tile that consists of typography, color palettes, images and logo examples on black, white and colored background and to different scales.

Phase 6b: Iteration 

High-fidelity Wireframes

Based on insights and recommendations from the affinity map, I elaborated a  set of revised high fidelity wireframes. These showcase how visual design applies across the site. The following are the three main design changes I made based on the recommendations from the Affinity Map.

Responsive Design 

Besides the desktop version, the users also need to search for the information on their mobile or tablet. Therefore, designing responsive UI is the best way to reach more customers in the market.