Seattle's Tech News in one app

Redesigning the GeekWire Android app

Our team explored the current usability problems of the GeekWire app and suggested recommendations for improvement. We redesigned the Android app based on research interviews of Geekwire users, and reorganized the content to allow easier navigation, searching for articles, and improved the ability to share those articles. 

Overview

Concept Project

Duration: 2 Weeks

Team

Jordan Kulhawik
Visual Design Lead

James Burnett
Research Lead

Jayne Casper
Information Architecture Lead

Steps

• Company Research
• User Research
• Defining the Product
• Initial Sketches
• Digital Product
• Testing
• Final Product

What We Created

The GIF on the right shows our solution in action, including the menu, the ability to search for an article, and the ability to share articles. The sections below will illustrate how the team and I made the decisions that went into this prototype.

Company Research

What is GeekWire?

GeekWire is a fast-growing, national technology news site with strong roots in the Seattle region and a large audience of loyal, tech-savvy readers around the globe, who follow the site for breaking news, expert analysis and unique insights into the technology industry.

Current GeekWire
Android App

Current GeekWire
Mobile Site

GeekWire Desktop Site

Why do people use this app?

Those that regularly use the GeekWire app like having quick access right from their home screen, the ability to set up push notifications, and the customized GeekWire experience.

Why don't people use this app?

Most sections of the Android app are more difficult to use than the mobile website. For many users, it is easier to access the content right from their mobile browser, without having to download an app. 

User Research

James, our research specialist conducted screener surveys and interviews with people who keep up-to-date with tech news, particularly in the Seattle area. From the results, we were able to put together a persona that reflected what those interviewees' needs and goals are. 

Refining the Results

After poring over the interviews, the next step was to distill that information into usable data. As a team, we found patterns the users had in common. Below are the relevant takeaways from that process.

Persona

Our persona, Scott T, was built based on our takeaways from the interviews.

Trust is Key

When it comes to news apps, the users need to be able to trust the source. This means a clean looking, usable experience with no low-quality ads.

Content is King

Our interviewees ultimately cared about the news stories. The easier it is for our users to get to the content, the better the experience will be. Everything else is secondary.

Users Read With Other People in Mind

The people we interviewed often mentioned sharing links to articles with friends or on social media. We kept this in mind while deciding what features to focus on.

Defining the Product

What does the current GeekWire app do well?

The Android app keeps their content updated the same as their desktop site and has a straightforward approach to their home page with the most popular articles featured.

What Needs to be Improved?

The drawbacks to the app is that it has a convoluted menu, hard-to-read articles, and lacks the ability to search for articles, making the product difficult to use. My team focused on improving all of these factors to create a useful and hassle-free tech news experience.

While the home page is straighforward, it looks dated, the amount of content is overwhelming, and the hierarchy of content is not easily understood. 

The menu simply has too many categories that are listed alphabetically, with some being fairly ambiguous (bot or not), and some that are out of date (app of the week).

Yes, this is the standard view for some of the articles, making them practically unreadable. It shows that the content was pulled from their news feed, but no effort was made to format it correctly.

Prioritizing the Features

While the team had a lot of ideas on how the GeekWire app could be improved, we had to keep in mind what could actually be done in the limited time we had. Sitting down to compare the importance of each feature against how difficult it would be to implement helped us decide what to work on.

Designing the Product

To explore as many perspectives as possible for solutions to our user's problems, everyone on the team participated in a design studio. Our individual contributions resulted in a mix of confirming individual thoughts and new concepts.

Sketches

I took the ideas from the design studio session and translated them into digital sketches using Procreate for the iPad. Included below are the home page, the menu, an example of the article page, and the search results page.

Our Initial Digital Prototype

I was tasked with converting the sketches into a digital prototype using Figma. This was my first time using the program, so naturally there was a little bit of a learning curve. The ability to collaborate on a project and add interactions really helped us communicate and share our thoughts on the design.

The home page has been redesigned to group the articles into categories, with the ability to highlight more popular stories with sizing and images. 

The menu underwent an overhaul thanks to our information architect, Jayne. She went through the types of articles Geekwire posts and grouped them into more manageable categories.

Since our users liked the ability to share articles, we made sure to include a share feature at the top of the article for those that searched for it specifically, and another one at the bottom of the article for those that liked what they just read and wanted to share that.

User Testing

In Person Testing

Our research lead James offered free snacks to local coffee shop patrons to test our prototype. We were able to get some good qualitative data about how people felt about the app and how easy it was to use.

Remote Testing

We used a product called Maze to collect information about the tendencies of our users and the usability of the prototype. This gave us more quantitative data on where the biggest pain points were and what people had problems with.

Analysis & Takeaways

The biggest pain points for our users were:

• It wasn't evident that the menu could scroll
• The search results page was confusing and led many of our users to be confused about where to go
• Home page was busy and wasn't conducive use with either hand
• Some of the links did not signify they were clickable

The heat map shows the where users tend to interact with the page

Final Product

Home Page Updates

While separating the articles horizontally might work for newspapers and desktop sites, our testers couldn't easily  reach every article with their thumbs. The layout has been updated to extend to the edges of the screen, allowing content to be accessible from both sides.

How Has the Menu Changed?

Some of the people testing our app didn't realize the menu scrolled. Each row was shortened to allow the bottom row to peek up from the bottom, indicating more content below.

What Was Done to Fix Search Results?

Sometimes you have to admit an idea is bad. Our original search results page just ended up confusing our testers, so most of the work was focused on redesigning this section of the app. It is now separated by category, and the other sections were updated to more appropriately reflect what people search for.

Interactive Prototype

The final prototype incorporates the changes made from testing

• The menu height has been shortened to make the ability to scroll apparent
• The home page articles have been changed to extend to the edges of the page
• The search results page has been redesigned for clarity and usability 

jkulhawik@gmail.com