Quartz was one of the first websites to rely on HTML5 for publishing the same codebase to web and mobile, without creating a separate iOS or Android app. At the time, they were looking to grow their audience which was around two million users a month. Quartz editor, Kevin Delaney, came to us with the task of redesigning the navigation elements of QZ.com, including the left Menu, Top Nav, and Obsessions Bar, to address UI challenges on tablet and desktop versions.
Key Challenges
- Low engagement with existing navigation elements
- User confusion about key features like "Top" stories and "Obsessions"
- Ineffective use of site real estate
- Balancing branding needs with user experience
Objectives
- Streamline navigation while maintaining aesthetic
- Improve understanding and usage of "Obsessions" feature
- Optimize for side-door traffic (90%+ of visits)
- Enhance visibility of important content like "Top" stories
Constraints
- Maintain brand prominence
- Consider potential for new sponsorships
- Ensure design works across desktop and tablet
Deliverables
We first presented two different layout options for the navigation, one horizontal and the other stacked in two columns, which allowed for variable height so the Obsessions column could expand if necessary.
After the horizontal layout was chosen, we created high-resolution HTML/CSS mockups of variants of button placement and rollover interactions for the client to review, and incorporated feedback directly onto those posted comps.
Email from the client post launch: “...we rolled out the new desktop and tablet designs last night and the response this AM has been nothing but supremely positive.”
Peter Kafka posted about the improvement in the Wall Street Journal’s All Things D blog the next day: