Stargate Navigation




Product Design, UX, UI, Information Architecture

Redesigned a global navigation system that prioritized higher-used features, simplified data relationships, and unified new and legacy applications.






WeWork     2017

Lead Designer

Team: Design Director, Product Designer

Background


The existing navigation bar for Stargate had evolved into a mash-up of different icons that were unclear on what they represented, or where they led to. The icons didn’t prioritize the most critical information that users wanted and didn’t consistently link to all pages.

Approach


It quickly became clear that navigation was not just an iconography issue, but a larger information architecture problem. We needed to create a more seamless navigation experience, show important data relationships, and build a long-term system to organize new features by.


01/


Understanding
the Problem

Stargate is a huge platform for 20+ apps for different types of users within WeWork. It handles everything from the square footage of a single floor to regional construction schedules to annual sales projections.

When we were quickly building new features into Stargate, we resorted to adding an arbitrary icon into the navigation bar, which was not a scalable solution. As the ecosystem grew, we learned that users no longer knew where, how, and what to even look for. We realized that the current navigation didn’t need better icons, but a complete information architecture overhaul.

Evolution over time: in the 2016 reskin, icon descriptions were removed in favor of more screen real estate. A bigger problem was that the top navigation bar was also removed, which deprioritized Search, the most used feature in Stargate.



Team Brainstorming


Our entire team (product, data analysis, customer success, engineering, and design) sat together to map out different ways of clarifying the mechanics in Stargate. We tried categorizing and understanding the site by user type, data architecture, engineering platform, and aggregate vs single-entity pages.




02/



Information Architecture

The Existing Navigation


With the insights from our brainstorm, Design worked on mapping out the existing navigation system. We knew we needed to better represent the data architecture within the site architecture. Before, there was no clear link between different portfolio views and the tools on separate pages to edit them. Navigating between related locations, deals, and projects was cumbersome. There were also tools in Stargate that had no relationship to anything else, which we decided to deprecate over time.



A New Scalable System


After many different versions, we decided on a system that categorized pages by their respective data category (Locations, Deals, Projects), and then by the view level (Portfolio, Summary, or Entity tool). Maps and User were products that everyone in the company used frequently, so we kept them on top. We also needed to make sure that related information linked together across the matrix. With this new system, our team now understood where to organize future apps and features.

We divided by data category because they were usually exclusive to different user types. For example, Real Estate mostly needed to look at Deal information, and Development was mostly concerned with Project information.


03/



Considering Form

As a team, we went through multiple iterations to visually achieve the data structure we had outlined. We ultimately decided on a horizontal navigation that eliminated the need for icons to show data types.






04/



Final Product





Mobile Navigation




Hover States & Dropdowns




Secondary Navigation Components




After tackling the navigation bar, we realized we could create another layer of navigation within the Headers, particularly on Summary Pages for Locations, Deals, Projects, and Floors. We also created Entity Cards that were used in Portfolio Views to carry over visual representation and link to the Summary Pages.


05/



Roll-out
& Results

Building and Deprecating in Phases


The entire navigation roll-out was completed over the course of a year. During and after the design process, Engineering was working on their end, like building a single navigation component and restructuring links and architecture across Stargate. Product also had to communicate with stakeholders in different departments and roll out each data category in phases. 

User Testing


Results were positive – we ran speed tests before and after to see the time it took users to find certain pages that showed significant improvements.

“People prefer the new navigation to the old nav, feel like it is cleaner and more useful - just takes a second to figure out the new structure.”

“Most people still gravitate towards search to find things.”

“Several people mentioned that they think the openings view should be the default view.”

In user interviews, people were excited about the change and also offered valuable feedback for future improvements.



Previous

(Stargate Maps)

Next

(Stargate Design System)