Streamlining Browsability on GeekWire

Improving the navigation experience for a Seattle-based tech website with a focus on Designing for Mobile.

PROJECT SYNOPSIS

Team: 3 members

Duration: 2 weeks

Type: Concept Project

Primary Role: UX Researcher

Additional Role: UX Designer, Designing for accessibility, Modifying the prototype by incorporating user feedback

Tools: Figma, Airtable, Google Forms, Google Docs, Slack, Whimsical, WebAIM Contrast Checker

Deliverables: User Survey, Heuristics Evaluation, Competitive Analysis, Sitemap, Proposed User Flows, Design Studio Sketches, Wireframes, Interactive Prototype, Usability Test Script, Usability Tests, Iterations to Prototype

Brief Description: GeekWire wanted to obtain a deeper understanding of the current usability issues affecting their site. They also wanted to create a mobile-first, responsive version of their site. So we employed a user-centered approach that focused on simplifying the navigation of their mobile site (and, ultimately, their desktop site) in a way that did not impact GeekWire’s business needs.

PROBLEM

The GeekWire website is cluttered by content and ads. This overwhelms users and causes them to opt for other sources of tech news that provide a more streamlined, browsable, and user-friendly experience. 

RESEARCH & DESIGN APPROACH

Collaboration, meticulous research, and synthesis of results formed the foundation of design direction

Pinpointing the specific usability issues

We made it a point early on in our research process to examine the problem space thoroughly before going straight into design. To get a solid understanding of the specific usability problems affecting Geekwire’s current site, we did a heuristic evaluation using Nielsen’s Ten Heuristic principles.

Based on our evaluation, we identified two main heuristics violations:

• Violation #1 - Visibility of System Status

• Violation #2 - Aesthetic and Minimalist Design

Violation #1 - Visibility of System Status

As we were browsing through GeekWire’s site, we noticed multiple pages that had no contextual navigation. This made it difficult for us to know how to go back to the previous page we were on and gave us no understanding of how we got to a particular page on the site. Furthermore, the lack of status indicators on the top navigation bar made it unclear what particular section of the site we were on.

Violation #2 - Aesthetic and Minimalist Design

Another thing we noticed as we evaluated the site was the uneven and inconsistent use of whitespace on some pages. This may have contributed to users’ perception of too much content on the site and, in turn, made them unable to make sense of the information they were viewing.

Obtaining the user’s viewpoint

To understand the usability issues affecting GeekWire’s site from the user’s perspective, we conducted a survey combined with an unmoderated usability walkthrough. After answering questions about their interests and media consumption habits, survey participants were then directed to GeekWire’s site and were asked to perform a series of tasks and provide rating and explanation for each task. However, before launching this survey, I realized that the data we obtained would ultimately play a crucial role in shaping our design approach and solution. That said, I played an active role in drafting our survey because I wanted to ensure that the data we obtained was valid, accurate, and reflective of our users.

While constructing the survey, I emphasized the following points to my teammates:

• Is the purpose of the survey clear to the respondent?

• Are the instructions clear and understandable to the respondent?

• Are the questions phrased in a way that isn’t leading?

• Are the questions ordered in a way that’s logical and that makes sense to the respondent?

• Is there a clear reason for having a question on the survey?

Analyzing the data

We collected responses from a total of 16 respondents. Nine of them took the survey on a desktop device and the remaining seven on a mobile platform. When analyzing the responses, we noticed that many of the negative responses seemed to focus on being overwhelmed with so much content that it can make the site difficult to navigate at times. These responses also affirmed the key findings we obtained from our heuristics evaluation.

In addition, we obtained data on users’ media consumption habits. This data would be useful for us when it came time to do our competitive analysis.

Portraying the target user

After analyzing the survey results and defining the problem statement, a clearer picture began to emerge about who the main target user is. We put down all of our thoughts about this individual into a persona. This persona would serve as a useful reference point for us when proceeding to the design phase of our process.

Assessing the competition

Once we defined our target user, I conducted a competitive analysis to see what similar companies were doing well on their sites and what aspects could be improved.

I analyzed the layouts and features of our competitors’ sites for both desktop and mobile to see how they structured their content, where they positioned key features (e.g., the search field), how they applied color, typography, and spacing, and how the combination of these things affected the navigation and overall user experience of their sites.

In addition to analyzing the layouts and features of competitor sites, I created a Pluses and Deltas table for each of our competitor sites because this provided me an opportunity to interact with the sites and document things that I otherwise may not have noticed from looking at a screenshot.

I obtained the following key insights from the competitive analysis. These insights were helpful in shaping our design priorities and, ultimately, our design solution.

• Using article cards for each story by including just the headline, byline, and imagery gives the page a cleaner look and makes it easy to navigate.

• Minimized ad space allows users to focus on content of interest to them.

• Sticky top navbars can help users navigate the site more efficiently.

• Consistent application of typography styles and white spacing can make the site easier to navigate and provide a less cluttered look.

(re)Structuring the content and information hierarchy

Before proceeding to the ideation phase, we wanted to determine the content structure and information hierarchy for GeekWire’s redesigned site. First, we created the current sitemap of GeekWire’s site to document its existing content inventory and information architecture. Afterwards, we applied our competitive analysis and user research insights to create a proposed sitemap. The proposed sitemap served as a basis for restructuring the content and information architecture of the redesigned site. It also helped in determining which features, sections, and pages to prioritize.

However, before we proceeded to creating the sitemaps, I proposed to the team that we conduct a card sorting test to understand how the users would organize the information and content. This would allow us to create a more informed and user-centered sitemap. While my team members understood my reasoning, they were concerned that conducting a card sorting test would put us behind schedule in completing the project on time. Since I also wanted to stay on track in completing the project on time, I compromised with them and dropped the idea of conducting card sort tests.

Sketching it all together

Once we established the information architecture of the proposed redesign, we proceeded to sketch our ideas for various mobile screen concepts via the Design Studio method. This iterative and collaborative approach allowed us to consolidate the best of our ideas into one set of sketches for each section of the site. This allowed us to prioritize what features to include on our wireframes, how to organize content based on user needs, and establish team alignment so that we can stay on track in completing the project on time.

DESIGN PRIORITIZATION

Establishing a focused design approach

Going into the design phase, we incorporated our competitive analysis and user research findings to come up with a few design priorities. This provided us with more clarity and direction when crafting our design solution.

• Design Priority #1 - Design for clarity and simplicity

• Design Priority #2 - Ensure ads don’t detract from the overall user experience

• Design Priority #3 - Maintain the GeekWire brand

Design Priority #1 - Design for clarity and simplicity

“Excessive content” was a common theme that we observed from our survey responses. Some of the things that may have contributed to this perception were inconsistent alignment and sizing of elements. For instance, the image thumbnails on the mobile sites for Wired and Tech Crunch are all the same size and aligned on the same side as each other. This provides the user with a sense of clarity, makes it simple to distinguish content on those sites, and makes the sites more browsable. This is also something that’s missing on the current GeekWire site.

Design Priority #2 - Ensure ads don’t detract from the overall user experience

The presence of too many ads was another common theme we found from our survey data. At the same time, ads are a primary source of revenue for GeekWire and should not be removed. Instead, the sizing of those ads should be minimized so that they don’t detract from the content users wish to see but also remain at the top so they don’t lose their prominence.

Design Priority #3 - Maintain the GeekWire brand

It’s essential for us to retain GeekWire’s color scheme, type styles, voice, and other branding elements in our redesign so that it remains familiar to its core user base.

SOLUTION

Polish the site’s overall look so that it’s easier to navigate (on mobile).

Objectives

• Provide clearly labeled section titles as well as headlines and bylines for news articles

• Place trending news articles towards the top of the page

• Be mindful about where ads are placed 

• Creating a My Wire user account page

HOMEPAGE

We focused our design solution on providing clearly labeled category tabs as well as headlines and bylines for news articles on the homepage so that it was clear to site visitors what kind of content they were viewing on the page. Additionally, referring back to our user research and heuristics analysis, we added breadcrumb links for each news article card so that users were given context as to where they are located on the site.

NEWS CATEGORY PAGE

When designing the news category pages, we established information hierarchy by placing trending news articles at the top of the page. This made it instantly clear to site visitors how content was prioritized. Furthermore, to balance business objectives with user needs, we were also mindful about how ads were placed so that site visitors can focus primarily on viewing the content they wished to see.

We also created a MyWire account page that allows users to customize their experience based on their interests or preferences. For instance, if a user bookmarked an article that they were interested in reading later, they can view their MyWire page and see all the articles they’ve bookmarked. 

TESTING & ITERATING

Emphasizing Clarity, Consistency, and Accessibility