WorkFlowy

Desktop + Mobile App

Project Background

Role
UI + Visual Designer

Company
WorkFlowy

Tools
Figma, Illustrator, After Effects

Team
Product Manager, UX Designer, UX/UI Designer (Me)

At its core, WorkFlowy is a web-based productivity app. The central feature of the app is a text-based nested list and its main purpose is to help keep you organized.

Since its launch, WorkFlowy has developed what the Geek Wire describes as "a cult-like following". I was hired to help improve the visual brand and redesign the mobile and desktop apps.

Responsibilities — I redesigned the logo and explored multiple directions for the mobile and desktop apps.

WORKFLOWY

Logo Redesign

The existing WorkFlowy logo and app badge was dated and didn't match the more modern and simple vibe of the app and company.

At the heart of the app is the bulleted list. I explored a ton of different ways to express the dots and we landed on an updated, cleaner look.

Responsibilities — Without making drastic changes, I explored a variety of different icons ideas and styles and updated the look and feel of the icon and type. I also created multiple lockup options for maximum flexibility.

WorkFlowy-logo-specs-1a
WorkFlowy-logo-specs-2b
WorkFlowy-logo-comparison

Explorations

WorkFlowy_Logos_01b
Early explorations
WorkFlowy-Logo-Explorations-1b
WorkFlowy-Logo-Explorations-01a
Square-style color explorations
WorkFlowy-Logo-Explorations-1
Responsive sizing

WORKFLOWY

Mobile App Redesign

WorkFlowy-comparison-2
Before and after comparison
Workflowy-2
Workflowy-3
Workflowy-4
Workflowy-12
Workflowy-5
Workflowy-6
Workflowy-7
Workflowy-8
Workflowy-9
Workflowy-10
Workflowy-13
Workflowy-14

Splash screen build explorations

WORKFLOWY

Desktop App Redesign

WorkFlowy-desktop-app-comparison
Before and after comparison
WorkFlowy-Desktop-3
Tabs explorer
WorkFlowy-Desktop-02
Options menu
WorkFlowy-Desktop-01
Closed side-panel

UI Explorations

This mood board was inspired by both the interior design of the space and the exterior of the tower. Gensler's interior design used geometric shapes and tessellated triangles throughout. The images in the mood board were chosen to serve as inspiration for the UI and background landscape of the interface.

WorkFlowy-Color-Palettes-2
Color picker variations
WorkFlowy-Tag-Styles
WorkFlowy-Color-Palettes
Tags and color palette UI explorations