Product & User Experience Design: Flutter DevTools Layout Explorer

This page is under active construction. Content is being added and updated during *October 2020*

Flutter DevTools is a suite of performance development tools for both Flutter and Dart. The Flutter Inspector and Layout Explorer are included in the new Flutter DevTools released June 2020.

The Layout Explorer is a new addition to the Flutter Inspector. It is a tool to help quickly visualize layout issues within Flexible Widgets. It shows layout constraint violations and any render overflow errors.

Flutter is a UI framework for building beautiful, fluid, and interactive cross-platform native apps on iOS, Android and the Web using the Dart language.

Dart is a client-optimized language for fast apps on any platform.

Product Design

Research shows the most common issue for Flutter developers is understanding their runtime UI layout errors. To improve adoption of the Flutter framework, design a successful product for developers to visualize and resolve rendered flex layout runtime errors. Integrate this product into both DevTools and the IDE Developer Experience of IntelliJ and Visual Studio Code.

Key Deliverables

  • Create prototype and research plan for new product design and workflow
  • Design icons, symbols for tools and product integration into the new Flutter Inspector
  • Product design and prototype for integration into third-party IDEs

Overview

Again, research shows the most common issue for Flutter developers is understanding their runtime UI layout errors. This impacts the adoption of the new Flutter framework.

To improve adoption of the Flutter framework, design a successful product for developers to visualize and resolve flex layout runtime errors. Integrate this product into both DevTools and the IDE developer experience of IntelliJ and Visual Studio Code.

The goal was to present a working concept prototype in 3 weeks for Flutter Interact 2019 and to then develop the full product design and prototype to determine the workflow, onboarding, critical features, any usability issues, and custom integration with IDEs and the new Flutter DevTools.

The prototype is key to next steps in User Research studies and to prioritize the next iterations of the product as it matures from its alpha stage.

The alpha version of the Layout Explorer was released and demoed at Flutter Day 2020 at the end of June 2020. It is currently in active development within the Flutter Inspector of Flutter DevTools. It is Open Source and PRs can be found on github. Covid-19 has slowed its progress as priorities adjust to this fluid situation and ongoing pandemic.

Flutter DevTools is currently in alpha/beta release and under active development. I am working on the design of DevTools with a primary focus on the developer experience.

The Flutter Inspector is a powerful tool for visualizing and exploring Flutter widget trees. The Flutter framework uses widgets as the core building block for anything from controls (ie: text, buttons, toggles), to layout (ie: centering, padding, rows, columns). The Layout Explorer helps users visualize and explore Flutter widget trees, and can be used for understanding existing layouts and diagnosing layout issues.

Project Goals

  • Identify usability issues on resolving Flexible errors with Dart
  • Determine the critical features needed to resolve runtime UI issues caused within Flexible Widgets.
  • Design a new product to visualize the flexbox implementation in the Flutter framework
  • Design a new product to visualize the flexbox implementation in the Flutter framework
  • Create prototype and research plan for new product design and workflow
  • Design icons, symbols for tools and product integration into the new Flutter Inspector
  • Product design and prototype for integration into third-party IDEs

Project Role

  • Research
  • Product Design
  • Visual Design
  • Icon Design
  • Illustration
  • User Studies
  • Interaction
  • Prototyping
  • Developer's Workflow
  • Usability Testing
  • Wireframing
  • User Journey + Onboarding

design nav | top

Challenge

Flutter developers have issue writing their UI layout and need a way to visualize and resolve layout errors in Flutter DevTools. A recent google search shows 618,000 results on StackOverflow discussing this issue.

A runtime error makes it harder to understand and resolve issue. The IDE doesn't find these UI layout issues because there's no coding issue to call out. It can be a frustrating mystery as to why the content is not rendering on the screen as it's programmed.

This whiteboard image is drawn by a Google Software Engineer as we discussed how the Flutter framework renders Flexible Widgets and the common patterns that create the runtime errors frustrating most users as they use Flutter.

    Developer Experience Challenge Breakdown

  • Inspect the UI layout and state of a Flutter app.
  • Diagnose layout issues in a Flutter app.
  • Fix layout issues in a Flutter app.
  • Resolve common layout issues in a Flutter app, learning widget patterns and flex factor paradigm of Dart.
  • Debug layout issues in a Flutter app.
  • Visualize layout issues in a Flutter app.
  • View general log and diagnostics information about layout issues in a Flutter app.

design nav | top

Timeline

Within four weeks, create a working prototype of to visualize and resolve common layout issues in Flutter within the DevTools suite of tools for Flutter Interact 2019.

Within six months, launch Layout Explorer within the DevTools Flutter Inspector as part of Flutter 1.12.16 release. Create compelling UX/UI for Flutter Day 2020 Demos.

First Deliverable

Within 2.5 weeks of being assigned the problem, the working prototype to visualize and resolve common layout issues in Flutter was featured in the Keynote on December 11, 2019 at Flutter Interact 2019.

First Launch: Flutter Day 2020

Watch Filip Hráček and Kenzie Schmoll from the Dart Language tooling team use DevTools to improve performance and speed! Dart is a client-optimized language for fast apps on any platform.

design nav | top

User Research

Research, analyzing data, reviewing the top issues on all popular platforms where users seek help or file issues, and asking why the issue is common and what is the root cause of the relationship of the code, framework paradigms,and UI helped me understand the major frictions points and how to design for them. Usability testing, interviewing, observing and engaging in social outreach honed the solutions direction.

Every quarter, the Flutter team hosts a survey to collect feedback on Flutter. Each survey combines recurring questions to help the team monitor longitudinal trends of various measures and new questions that collect actionable feedback. It helps maintain focus on the important areas to address.

In the May 2020 survey, 8,000 responses were received over ten days, despite all the challenges of the current world situation.

design nav | top

Workflow

The experience must explore new concepts and developer experiences that will expand and unite various developer ... suite of tools for Dart and Flutter.

design nav | top

Ideation

Design

flutter dart devtools design 2020

design nav | top

Final Design: Version 1.0

process process

User Journey

User Validation

design nav | top

I’m open to new opportunities.

If you're looking to connect, let's grab a coffee and chat!

crosswalk shot across from the sfmoma with painting that reads think outside the building.