Case Study
Tech news site redesign and feature innovation group project, focused on usability and improving the overall customer experience.
-
Jordan Friedley
Project Manager | Research | Design -
Figma, Google Slides, Google Docs, Optimal Sort, Maze.co, Zoom
-
Timeline
4/22/22 - 5/12/22Discover
Project and Research Plans
Looking at the Competition
User Research
Geekwire First Impressions
Define
Affinity Mapping
Card Sort
User Flow
Personas
Identifying the Problem
Design
Ideate
Sketches
Wireframe
Prototype
Multiple possible solutions
Deliver
Usability Testing
Iterations
HiFi Prototype
Research Findings
Learnings
Next steps
Discovery
We began the process by digging into the why behind Geekwire, understanding their problem, followed by market research, user interviews, and usability test of Geekwire’s mobile website.
Background
John Cook
Co-Founder | Publisher
Todd Bishop
Co-Founder | Senior Writer
Founded in 2011, Geekwire is a national technology news site based in the Seattle region. Loyal tech savvy readers keep up with Geekwire for breaking news, expert analysis, and current insights into the technology industry.
Core Values
Integrity
Factually backed, researched, and expert reviewed news.
Community
Geekwire provides resources for startups and others.
Focus
Based in Seattle, Geekwire focuses on jobs, news, and resources in this region.
Problem
Tech news users need heir technology news to discovered quickly. Consistency in layout and design is important to keeping the users attention and need to keep using a tech site for news or other resources like finding a job, events, or listening to a favorite podcast.
Geekwire has many resources and lots of researched based news articles, but according to the users it is difficult to understand what Geekwire is about and what types of content they actually are providing.
Geekwire wants to attract people within the tech news community both locally to the Pacific Northwest and internationally. They want all these users to interact with Geekwire to keep in the know tech wise, job listings, events, podcasts, and more.
We decided to add a feature to make all users quickly see what Geekwire’s tech news is all about and a way to create an account to create a better experience returning to the site to use all the other resources.
How does Geekwire differentiate themselves?
We compared Geekwire’s to key competitors, all sites had videos, articles, newsletters, and search features.
User Research
We interviewed 6 users remotely via zoom and recorded our sessions.
“I would like to see the headline news to catch my attention quicker”
“I like being able to share information on multiple platforms”
“I’m not interested in someone's opinion enough to pay for it”
“I follow authors, if I enjoy the authors perspective and writing style”
Key Insights
With a variety of backgrounds and needs, we still discovered commonalities.
Ads are expected
Seeing ads and having option of a premium account feature is understood intuitively, but the desire to want to keep using a tech news site relies upon this being done in an un obstructive way. Users only use sites if they can discern what articles are about.
Everyone had read the same article prior
Pursuing tech news sites for top trending stories is a primary driving factor for any type of user. We asked, “What was the last tech news article or story you read about?” All answered that they had read about Elon Musk attempting to buy Twitter on various platforms.
Skimming causes users to miss content
Because these type of websites have lots of content, ads, and text skimming the homepage quickly occurs. If they can’t quickly find what they want they will abandon the site and go back to social media. Few users discovered that Geekwire offered more than just news.
Social media is important for news consumption and sharing
Having the ability to easily share and find news is common amongst users. Social media is where most intially find an article and get taken to a news site. If there is enough relevant content, users might favorite the site and use in the future.
Navigating Geekwire
At the end of our interviews, we asked the users to use Geekwire’s mobile site to understand users first impressions.
Quickly scrolled through the homepage and thought the news seemed random, most stories about amazon, the top ad got in the way of users seeing the featured story.
Users were unaware that Geekwire is based out of the Pacific Northwest and the news and offerings are based out of this region.
Difficult to discern what are the top stories, the topics of news articles, podcasts, and videos.
RSS sharing feature was currently down.
Job board was a completely different site and navigation back home was frustrating for the user’s flow.
Define
By synthesizing our research, we aimed to understand our users most common pain points when using Geekwire and ideate how to make this a more enjoyable, useful experience.
Revisiting the Problem
People need their technology news to be easy to read and quickly discernable. An inconsistent layout loses a user’s trust and desire to keep using Geekwire as a consistent website for tech news and exploring other resources.
How Might We
Make Geekwire website easier quicker to navigate?
Organize content that makes sense?
Promote Geekwire’s additional resources?
Personas
Jamie Reeva
32 years old
Los Angeles, CA
Software Engineer
About
Browsing social media is the most common source of tech news for Jamie. She’s not one who typically ventures to “geeky” sites, unless there is a popular tech news story, product, trend, or she is on the market for a new job. Quickly skimming these sites, easy navigation is important to her. Tech is her job, but Jamie values having a well balanced life, so she visits these sites infrequently.
Needs and Goals
Clean, efficient layout
Big identifiable headlines
Easy way to access Startup info
Quickly identify job listing
Behaviors
Checks the latest news section and jobs when on news sites
Gets exposed to tech news via social media
Listens to podcasts while commuting
Frustrations
Intrusive ads blocking content
Confusing/busy layout
Difficulty navigating to job postings
Paywall
Robert Fox
28 years old
Austin, TX
Tech Journalist
About
Robert prioritizes the latest news, it’s critical to his work and blogging. He mainly travels to conferences to gain more knowledge about tech news for his blogs. During his commutes, he’ll listen to podcasts that interest him. Robert invests in startup companies to potentially increase his revenue in stock so he revisits the sites frequently for personal and career use.
Needs and goals
Easily accessible reader
Background information for startup companies
A calendar for upcoming events
Behaviors
Listens to Spark podcasts
Uses a RSS feed to read articles on computer, but also uses mobile
Has notification setup for various news platforms
Frustrrations
Events unclear
Inconsistent structure when browsing latest news
Ads obstruct reading view and concentration
Site compatibility for RSS feed.
User Flows
From the daily techie to the casual peruser, users desire a similar experience.
News needs to be quick to read, share, and save. If using other resources, it is important to be able to save for later use. We made two flows to incorporate these thought processes.
Robert
visits GeekWire a lot, so he’s pretty speedy at finding news in the form of articles, podcasts or videos, along with sharing the contents with his social media following on a regular basis.
Jamie
She is the casual user and uses GeekWire when on the hunt for a job using the site’s Jobs page, filtering and applying.
Design
We now have understand our two user goals of being able to search/ find news quickly and the ability to save other resources like a job, event, article, or podcast. Here is what we ideated.
Sketches and Wireflows
Rough sketches to generate some ideas for the information layout, placement for buttons, and how the navigation could function differently
After initial sketches and wireframes, we modified various pages from the GeekWire website to help users find content easier, combined resources that fit well together, and gave the options to bookmark possible job opportunities.
We wanted our flows to make it easy to quickly find relevant news and be able to share.
Quick way to navigate to all the resources Geekwire offers.
Save jobs, events, articles, podcasts, and more with a user account feature.
Usability test
We began testing our lo fidelity prototype with 6 participants with these tasks
Starting at the homepage, please show how you would navigate to the Latest Articles.
Locate the Article on $263M Funko Investment and read further
You found the article interesting and want to share it via LinkedIn. Show us how you would do that.
Success Rate: 87%
““Easy to find with the options of it in the global navigation and in the first container on the home page."
"There was some spacing on the homepage that did catch my eye as something I would want fixed, with more space."
"It was very easy. The sharing icons were where I thought they would be."
First Iterations
Second Usability test
We had 15 participants go through these tasks and give their feedback.
Starting at the homepage, please show us how to find the Job Listing section.
Starting at the homepage, please show us how to apply for the Front End Developer Job
Starting at the homepage, navigate to the Front End Developer Posting. Find Related Job and apply for Flyhomes
Success Rate: 83%
"I think it was quite easy. Only thing was on the home page, I didn't know I could scroll horizontally because I barely saw the letter 'J'"
“Too much scrolling to get to related results. I also want to tap on the card itself if I’m just looking at it. Instead of click on apply”
Deliver
After reviewing our design decisions, we implemented a high fidelity prototype. Here are the prototypes based off the user creating a new account, saving a job, and sharing an article.
Prototypes
New Account Signup
Flow: Showcasing how signup and the initial users account appears.
Prototype
Flow: How user Jamie might use Geekwire to look and apply for a job.
Prototype
Flow: How our primary user Robert might view Geekwire’s homepage and articles.
Looking Forward
We learnt a lot and have immediate ideas to improve Geekwire’s site.
Users primary need is ease of use and the site has to be easy on the eyes, so we made these changes.
Made site more navigable by incorporating a header bar and a sidebar with more relevant links
Changed home page layout and design to emphasis what types of articles and what each section is about
Users want to come back to sites but news isn’t the only reason, having a place to easily store and save other relevant info is important.
Changes Made
Next Steps
Update job card to emphasize company and make the apply button into details.
This will get more users to feel less hesitant about the call to action because they will have more information before applying. The colors used were commented on feeling out of date, we think updating the color scheme and use of shadow would create a more professional appeal.
Geekwire’s about needs to include all the Geekwire sponsored jobs, events, and resources in a clearer way. Also emphasizing the other platforms like geekwire’s youtube, twitter and other channels would be beneficial to create more engagement from people just finding out about geekwire from an article.
Lastly building out the user account feature to be able to store a users favorite articles, resources, jobs, and more can give geekwire the data to build out recommended sections based on the particular user being logged in.
Working in a group environment you can’t always stick to a plan, set timelines to be flexible.
There are many ideas and deciding on one can be tricky, but relying upon user data and being thorough with the planning process helped.
Tech News users mainly find what they like from others via social media or word of mouth, creating a relation between Geekwire the site and social platforms would probably help increase users.
Give more time to design and testing so further ideation can occur.
Ask for specific feedback when doing usability testing, open-end questions don’t yield the answers needed.
Screen record usability tests, seeing the user’s flow helps make a more efficient design.