Designing the Flutter Dart DevTools Experience

Product Design, UX Strategy, and the Developer Experience

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. 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.

What is DevTools?

DevTools is a suite of performance and debugging tools for Dart and Flutter. It is currently in beta release and is under active development. I am working on the design of the DevTools and a primary focus on the developer experience.

Watch the June 2020 #FlutterDay DevTools Episode!

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.

Some of the things you can do with DevTools:

  • Inspect the UI layout and state of a Flutter app.
  • Diagnose UI jank performance issues in a Flutter app.
  • CPU profiling for a Flutter or Dart app.
  • Network profiling for a Flutter app.
  • Source-level debugging of a Flutter or Dart app.
  • Debug memory issues in a Flutter or Dart command-line app.
  • View general log and diagnostics information about a running Flutter or Dart command-line app.
flutter dart devtools design 2020
flutter dart devtools design 2020

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in beta release, but is under active development.

DevTools

Initial product launch was June 24, 2020.

I design the Product for video integration and special content

placeholder

The Challenge

Create a successful suite of tools for the developer experience with a fresh look, feel and user experience. The experience must explore new concepts and developer experiences that will expand and unite various developer tools into one robust suite of tools for Dart and Flutter.

This page is under active development - october 2020.

STAY TUNED!!!

placeholder
placeholder

Onboarding: Layout Explorer

The Process

process

Competitive Analysis & Market Research Overview

User Personas

targeted personas.

placeholder
placeholder

Wireframe & User Flow

Create

placeholder
placeholder

User Experience

placeholder

There are two

placeholder
placeholder
placeholder
placeholder
placeholder
placeholder
placeholder
placeholder
placeholder

User Feedback - User Generated Review - Results

Social Media reactions to DevTools :

Visual Design

placeholder
placeholder
placeholder
placeholder
placeholder
placeholder

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.