ArcGIS Online
SaaS application for mapping and analysis for millions of users
I designed the user experience of managing content on ArcGIS Online, with new patterns of search, filters, and views.
Background
ArcGIS Online is a cloud-based mapping and analysis solution by Esri. Users use ArcGIS Online to make web maps, analyze geospatial data, and to share and collaborate. ArcGIS Online is also the main work space for users to search, access, and organize web-based mapping content, including the user’s own content, content of the user’s groups and organizations, content provided by Esri, and public content. Working with these different content scopes is a core part of the ArcGIS Online’s user experience.
From 2016 to 2018, I worked as the UX designer in a small team (program manager, UI designer, developers, and product engineers) to redesign this complex feature while it was being used by millions of active users.
Problems to solve
The legacy content management on ArcGIS Online looked like this:
There were a few problems that I wanted to solve:
- Users had difficulty managing and finding content in different content scopes.
- Users were not able to see details of the content items.
- The search was limited and there were not a lot of options for users to refine the search results.
Design research
Although there are no direct equivalents of ArcGIS Online, file sharing products like Google Drive, Dropbox, and Box have similar content management features. Within Esri’s product ecosystem, ArcGIS Hub and Living Atlas of the World provide search and browse experience with filters, for view-only purposes. I made these observations from examining those products’ content management features:
- The content workspace has a consistent layout: search, sort, and filters are placed around the view of content items.
- The user can perform actions on content items: move, share, delete, etc.
- Actions can be on a single item or a list of selected items (i.e., bulk actions).
- Filters for refining the content list do a “AND” search if multiple filters are applied.
- Search and filters are not separated; they work together to help the user refine the content items.
User research
I started by talking to product managers, and through them, the users, to learn how they managed their content and their needs for a new experience. I learned that users had different content management needs and use cases, depending on their roles. For content curators, they wanted flexible sort and filter options (e.g., finding a map in 10,000 items in a big organization) and efficient bulk actions (e.g., think moving hundreds of items from one user to another); for content creators, they wanted to quickly explore content in different scopes; and for viewers, they wanted to learn more about unfamiliar content.
I kept growing my understanding of the design requirements with user research, and quickly the team identified a short list of areas to focus on:
- Allow the user to see all content in one place.
- Show more information like thumbnail and summary in the list of content items.
- Enhance the search and filter capabilities.
I was an early adopter of Dovetail, and I used it to develop and share research knowledge with my team.
Components
I broke down the design into smaller and reusable UI components. This helped the developers factor legacy pages from single monolithic files into shared components.
Subnav
I used tabs to show the content scopes the user has access to. The tabs allow the user to quickly switch content scope without reloading the whole page.
The tabs translate to a dropdown menu on mobile.
Card
The legacy pages showed four pieces of information for a content item: title, type, modified (date), and shared (status). To help users discover unfamiliar content, the new design needs to include significantly more details: thumbnail of the map, summary, content author, created date, view count, and special badges.
I designed a vertical card for grid view for users who focus on thumbnail and don’t need to read the summary (and a lot of content items don’t have summary).
For users who want to see all important details, I designed a horizontal card for list view.
With the card design, the user can perform multiple, type-specific actions on individual content items, whereas the legacy pages provide only one action (view item details).
Search
The legacy pages had one search box that did two things: search within a content scope and search globally across all content scopes, which made the user experience confusing and cumbersome.
Through user research, I realized that there are actually two distinct search patterns: scoped search and global search. Scoped search finds content within a specific scope, and users wanted it to be fast and up to date. Global search finds content across all available scopes, and users would reformulate keywords to discover relevant content (for example, from “water layers” to “US water layers”).
I designed a visually distinct pattern to help users understand the difference between these two search modes.
In the conceptual design stage, I developed the general layout and key components like filters, different views of content, actions on content, etc. Breaking down a design into meaningful components helped reduce the complexity and improve consistency.
Filters
Through user research I found that users wanted more refined filters to narrow down the content items from a huge list (even after a search). The team enhanced the legacy item type filters by adding subtypes. We also added a number of new filters, and I designed the pattern for showing filters and indicators of active filters.
Content categories
Content categories were a new way we introduced to organize content in a group or organization in ArcGIS Online. Content curators can establish hierarchical categories for content items by choosing from standard category templates (standard taxonomies), or by creating custom categories (domain-specific or project-specific taxonomies).
To support editing the hierarchical categories, I designed a simple tree editor in a full-screen dialog.
I designed another full-screen dialog for content curators to assign categories to one or multiple items.
At the time, I used the full-screen dialog as an experimental idea, so the user could complete a complex workflow without leaving the previous context. I did usability tests on creating categories and assigning categories to content items. The test results confirmed that the full-screen dialog was easily understandable for users.
Share
Sharing content in ArcGIS Online is not the common “share to social media” feature that you see everywhere, or the share dialog you see in Dropbox, Google Drive, or similar apps. Rather, in ArcGIS Online, a content item can be shared with its owner, within the organization, or with the public (everyone). Users can create groups and share content items to those groups. Therefore, a content item can have a complex sharing status.
I spent quite some time to understand the share logic and experimented visual representations for all the possible sharing status. Eventually, having the group sharing as an “add-on” to the share level simplified the concept, and I was able to apply the same concept to the share dialog design.
Using a drill in pattern, the share dialog allows the user to find groups, add or remove group sharing.
To allow content curators to share multiple items, I added more details on how the content items are shared and removing all group sharing.
Responsive
The legacy pages were based on a max-width of 960px. By applying a flexible-width grid, I made the design responsive across different screen sizes.
Accessibility
Accessibility was becoming a strong requirement from Esri’s customers and the public. I made sure the design used good color contrast and patterns supporting keyboard interactions. At the code level, I worked with the developers to make sure we used semantic HTML for the UI components. For every release, I did thorough accessibility tests to make sure the new features were accessible (WCAG 2.0 AA-compliant). We contributed the UI components to Esri’s design system and thus improved other Esri products.
Releases
Because of the scale of this project, we built and released the designs into multiple updates to ArcGIS Online (some of the designs were released after I left the team).