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.
creating intuitive navigation
RESPONSIVE WEBSITE REDESIGN
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
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
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.
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.
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.
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.
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.
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.