Justine F
Product Designer | UX Designer

creating intuitive navigation

RESPONSIVE WEBSITE REDESIGN

GEEKWIRE.COM WAS FOUNDED IN 2011 BY JOHN COOK, LEFT, AND TODD BISHOP, RIGHT. GEEKWIRE.COM IS A NEWS SITE WITH CONTENT THAT COVERS A VARIETY OF TOPICS RELATED TO THE TECH INDUSTRY.

GEEKWIRE.COM WAS FOUNDED IN 2011 BY JOHN COOK, LEFT, AND TODD BISHOP, RIGHT. GEEKWIRE.COM IS A NEWS SITE WITH CONTENT THAT COVERS A VARIETY OF TOPICS RELATED TO THE TECH INDUSTRY.

project overview

Project Type: Responsive Web Redesign
Team: Kris Dawson, Melissa Gorham, Jessie Kim
My roles: UX Research, User Interviews, User Flows, Navigation Site Map, Sketches, Responsive Design Layout, UI Design, Prototyping, Usability Testing
Tools: Figma, Miro, Mural, Mockflow

LANDING PAGE AND NEWS CATEGORY

LANDING PAGE AND NEWS CATEGORY

research

We made conclusions during the user interview process and using the affinity map method.

This is what users liked:

  • the variety in news topics because of the different content

  • resources the website has to offer for a spectrum of roles in tech

  • podcasts for all tech news and world events

This is what users did not like:

  • the layout structure feels too busy

  • placement and amount of ads throughout the website because ads

  • the membership process is not easy to find

  • subscribe link is confusing; same as membership?

  • the news categories are not easy to understand

NAVIGATION SITE MAP CREATED ON MURAL

NAVIGATION SITE MAP CREATED ON MURAL

solution

We identified the problem to be that users need a to find information quickly by relying on well-organized content. I created a navigation that simplified the categories and news topics as a solution. I also added a new category for PNW Startups because of the abundance of resources for this that were originally found under different categories.

responsive web redesign
USER FLOW CREATED ON MIRO

USER FLOW CREATED ON MIRO

plan

With a simplified navigation to the identified problem, I created a user flow that shows the different paths the user takes to read an article and listen to a podcast before becoming a GeekWire member. 

SKETCH CREATED ON MOCKFLOW

SKETCH CREATED ON MOCKFLOW

sketch

For desktop, I made the decision to keep the number of ads on the landing page the same and reflected that in my sketch. Still, I focused on designing for pain points mentioned by our users, so I rearranged the ad placement to the left and bottom columns for ease of view.

I grouped the common news categories together as tabs as they were originally separated on the landing page. Podcasts, Startup Spotlight, and Geek of the Week were popular interests hidden in the News section, so I brought that to the landing page as well.

I made the link to become a GeekWire member visible in the header and footer. Adding in the link to Subscribe to the Newsletter in proximity to the link to become a GeekWire member was also for visibility and so users can differentiate between the two easier.

RESPONSIVE DESIGN LAYOUT

RESPONSIVE DESIGN LAYOUT

design

As we moved further into the design phase, the visual style and original color scheme were kept the same. This was to stay on-brand, simple, and neutral. The responsive design layout flowed by order of importance and interests in content, without eliminating pertinent aspects of the website.

FULL SCREEN MOCKUPS OF MENTIONED ITERATIONS BELOW

FULL SCREEN MOCKUPS OF MENTIONED ITERATIONS BELOW

resulting iteration

We got feedback from conducting Usability Testing and made the following improvements:

  • adjusted the layout and sizing of certain content

  • ensured balance on the horizontal plane by introducing more white space for visual rest

  • defined clickable links and images

  • adjusted size resolution on ads

After making these adjustments, users found that the website was intuitive and easy to use. 

prototype walkthrough


See how to navigate through an article from the landing page, to becoming a GeekWire member. Notice the same amount of ads without the compromise of space and ease of use through the membership process.

Interactive Prototype below.

INTERACTIVE PROTOTYPE - GO TO 'DESKTOP_GEEKWIRE' TO EXPERIENCE IN FULL SCREEN