UI/UX Design | Composable Design | Information Architecture

A place for all Android Developer needs.

Agency Background

Potato, Inc. is a digital design agency that partners with Google's Android Developer Team to manage DAC from promotional billboards, landing page creation, and design system maintenance.

Project Background

Developer.android.com (DAC) is a resource for Android developers to find the tools they need to build and maintain their applications. From the latest Android OS requirements to sample code to jumpstart development, DAC is the source for all Android developer needs.

The initiative for creating Developer Centers was brought to us so developers can have a centralized location for category specific content to find what they need to build android applications.

project scope
Developer tools
Role
Agency Product Designer
Topics covered
Information architecture
team
Editorial, tech writers, product, engineering
THE ASK

Create a space where developers can find everything they need to know about building an android application. With thousands of tools and libraries available, we must present that information in the most effective way.

Problem

Developer.android.com (DAC) is a resource for Android developers to find the tools they need to build applications. However, many of the resources, such as documentation, source code, API specifications, blogs, and videos, are scattered across the site with minimal organizational structure.

THE goal

Create market specific hubs for developers to access based on their product need.

Solution

Topics will be divided into three vertical markets: Games, Media, and Health & Fitness. Dev Centers provide a singular place for developers to locate relevant information for the type of app they are building. Categorizing dev centers into three verticals will improve the user experience on DAC and provide a consistent layout for all information.

Design process

The design process was unconventional as the research and planning took place on the client side. The proposal was brought to Potato to initiate designs based on the
Product Requirements Document (PRD).

Ticket created in Taskflow

Step 1

Taskflow

Taskflow is Google's internal project management system that allows teams to prioritize, document requirements, and reallocate based on progress.

Key takeaways

Project Kick-off

Step 2

Team Meetings

After the ticket is received in Taskflow, Potato's Product and Delivery Lead hosted a kick-off meeting with the project stakeholders along with the DAC Product Manager, DAC Designer, and Engineer to gain more context on the request, allow for questions to be answered, and to establish a launch deadline.

Key takeaways

Designs

Step 3

Initial Mocks

Mid-high fidelity mocks were designed based on the project vision in the PRD. Because DAC relied heavily on using components within the established design system, there was no need to begin with low-fidelity wireframes or sketches.

Composable layouts

Navigation

All dev centers have the same sub-nav which makes it easy for users to find helpful resources such as:

  • Detailed guides
  • Source code
  • Samples
  • Videos
  • Blogs

Hero Section

Each dev center has a unique "badge" in the hero section to signify what dev center page the user is on.

Also, it was established that dev center heroes would not be used for marketing promotions and is specifically for informational purposes about the dev center.

Core Workflow

The core workflow section provides the user with a high-level process for planning, designing, developing, and growing their app.

Feedback & Iterative Design

Step 4

Feedback Request & Iterations

Once initial designs were complete per the ticket assigned in the sprint, the ticket was updated with the latest Figma file and the primary stakeholders were tagged in the ticket to review and provide feedback either asynchronously, or if necessary, a quick meeting.

Key takeaways

Developer Hand-off

Step 5

Final Designs

Figma files would be refined and notes would be added for the developer to begin building the mocks for production.

summary

Composable designs will make future dev centers easier to deliver as they give stakeholders a specific layout to use for their content planning and review process.

Want to see more?

View all projects