Improving Android Developer guidance with scalable design and strategic solutions.
Android for Developers is the first place Android Developers go to learn; providing all the content elements developers need from descriptive tutorials to perspective guidance. These resources must remain robust and up-to-date for developers.
We improved the site’s information architecture to make it easier for both professional and non-professional developers to discover new technologies, learn and develop for Android, and solve coding problems.
Role
Lead Visual & Interaction Designer (See details)
Skills
UX Strategy
UX Design
Visual Design
Problem Solving
Know the User
Professional and
non-professional developers
Goals
Make it easier for users to discover new technologies, relate information, absorb, learn, and develop for Android, solve coding problems.
Approach
Based on critical user journeys, design and deliver a UX and design system that scales to meet user goals, marketing needs, and content author needs while allowing marketing and product teams to independently deliver new content.
Problem
With the ever-growing number of resources and the diverse use cases of Android developers, the team at Android approached us with the task of reimagining the site’s information architecture and strategic approach to navigating the site.
Through Critical User Journeys, we set out on driving awareness to key Android technologies, elevating entry points to common developer use cases, decreasing time-to-find desired content, and improving the experience of the site’s complex and rich content. The system not only has to scale to meet user goals but also has to optimize for marketing and content author needs.
Solution
Working in close collaboration with our clients, we proposed a new site information architecture based on clear user intentions and delivered a design system that streamlines the visual language and improves the site experience.
We established and designed six key page templates that were flexible enough to scale across vast content teams and the copious page intents. Additionally, we proposed novel layouts and strategic solutions for navigating between the different levels and detail of information.
Designing Templates
Following the information architecture phase, we had to identify the types of pages we are designing for and whether the current pages still make sense for the site. These templates have to flex and scale for the ever-growing 100,000+ page site.
This is vetted through critical user journeys on the site. We outlined the objectives, intent, and goal of 6 pages to guide proper usage: the homepage, index pages, product/solution pages, resource pages, topic overview pages, and topic detail pages.
Component system
For a clear information hierarchy and to avoid rows of content, we created layout variations for different content types. The various sizes and use of color strengthen the scanability and content hierarchy. The cards are designed to maintain a clear visual connection when featured in other contexts and sizes. These include featured modules, pathways to main pages and external pages, resource cards,
Index page
A page type we defined and flushed out is an index page that gives users an overall view into a key section of the site, such as the ‘Developer guidance’ page. It is reserved for navigational-level landing pages with the intention for these pages is to help users discover and explore.
The index page provides an introduction to the section, some additional context or key features, link to various resources, and then secondary resources and links where relevant. These screens show the types of content within ‘Developer guidance’ and link the user to a resource page or specific resource.
Product or Solution pages
These pages introduce technology or products to the user. It is a non-high level page that uses marketing material to promote a capability or feature, in turn, surfaces and links users to the right resources. The intent of the product page is to help users discover and explore.
Product or solution pages start with an introduction and key CTAs. We introduced jump links on the right for the ability to quickly scan and navigate down the page. After key high-level features or announcements, the bulk of the content can be grouped by themes, where resources are served as examples.
Grouping by topic and theme
As we were auditing existing content to design components, we quickly realize the need for a flexible way of grouping sub-content within a topic or group. They are differentiated through background color use and are easily stackable while maintaining a clear connection to the parent content.
Android TV’s product page has content with clear topic groupings and is flexible to contain multiple child resources and links. Additional resources and links are lower in hierarchy and deemphasized with a gray background.
Resources page
A resource-focused page gives users all resources under a single resource type or topic, ie, guides, samples, or news articles. Filters and sort help users find the exact resources they are looking for. Out-of-container cards allow for easy digestion of content and scanability.
Global wayfinding
The project’s most exciting task is exploring unconventional ways to solve the core issue of navigating through the site. It is easy to get lost within the intertwining content and deep sub-subpages. We want to improve the experience of understanding where you are on the site and allow you to jump between parent pages, related content, and revisit recently viewed pages.
