Desktop Experience and Navigation Redesign

My Role

Research, UX Design, UI Design

Team Members

Chris Combs, Tom Shafer

Overview

The purpose of this project was to improve the look, feel, and navigability of the Washingtonian site for desktop users. The site’s design was purposefully stripped down and simplified from a previously cluttered and confusing design; however, this new, mobile-first design left some desktop users feeling like the site was “stark,” “basic,” and “not very interesting.”

To address these pain points, our team decided we needed to provide a richer desktop experience for our desktop users. We accomplished this by: A) Breaking up the one-column layout with useful design elements that guide the user’s flow throughout the page and B) Re-organizing the site’s navigation to help users easily find what they’re looking for.

The project took 6 weeks, including one week of design iterations. After 6 months, I went back to the project’s stakeholders and Washingtonian users to see what could make the desktop experience even better. Design iterations based off of user feedback have recently been pushed.

The Washingtonian website pre-January 2016 re-design.

After the January 2016 re-design.

UX Process

Research methods: User surveys, stakeholder interviews, competitive analysis and layout comparison, quantitative Heuristic evaluation of Washingtonian’s website compared to competitors, statistics review from Google Analytics and research similar project case studies.

Competitive analysis of features on Washingtonian and three competitors.

Layout analysis and comparison of Washingtonian and three competitors.

Ideation: Created proto-personas based off of the above research. Constructed user flows for loyal desktop users who come to Washingtonian via the homepage, as well as for users who reach us via a social media platform such as Facebook.

Proto-persona #1

Proto-persona #2

User flows

Wireframes: Used user flows to sketch a new design for the Washingtonian homepage and navigation.

 

Wireframes

Design: Move sketches over to Figma and work with the developer to iron out technical details. I present these designs to stakeholders for feedback and make the necessary changes and updates to launch the minimum viable product.

Prototype: The final design before moving to a testing development environment where the digital team tests the design and usability before launching. Since the launch in November 2016, we have received user and stakeholder feedback and continue to iterate upon the homepage and navigation design. What you see below is the latest prototype for the homepage, and we are currently drafting new design ideas for the site’s menu. You can also view the website at https://washingtonian.com.

Leave a Reply