Laptop_mockup.jpg

Visual Design Strategy

Defining a Design Vision at Forecast

Visual design strategy at Forecast

 

My role

  • UX Designer

  • Visual Designer

  • Joint Product Manager

 

Introduction

In Lean product design, I explained how I used insights from user research to drive our product strategy. Part of that strategy is crafting a visual identity and direction for the product. This chapter is about how I lead the design vision at the startup, helping realising the CEO's vision. As the only designer I was in charge of defining the visual direction in accordance with the branding guidelines.

 

1. Information Architecture

A revision of the Information Architecture of the old product, provided us with the major blocks of content and initial indications of flow.

Card Sorting

I collected all the data elements from the initial version of the product and performed open card sorting exercises with stakeholders and users. From them, it emerged that the main, top-level features of the app should be Projects, Time, Scheduling and Reports.

Mock-ups

wireframe_sprint.jpg

Few rounds of card sorting with key stakeholders yielded clear primary themes, and several levels of information below them. I built few mockups by hand and then in Sketch to define different options for navigation and page organisation. Low-fi Sketch prototypes of the different flows were taken to usability tests and the one that felt most natural to our target users was adopted.


2. Building a Design System

 Categorising elements in my sketchbook

Categorising elements in my sketchbook

Once the basic pages and flow were identified and an initial information hierarchy was applied, I delved into a bottom-up process of categorising the components. This was driven by the methodical mindset from my front-end developer experience, and inspired by the Atomic Design approach of Brad Frost. The final goal was to start creating a visual library that could be used by the front-end developers, whilst at the same time revising the existing elements so that they’d fit to the latest branding exercise and standardising the interactions patterns.

 A Styleguide in Sketch quickly evolved into a design system

A Styleguide in Sketch quickly evolved into a design system

Insights+projects_designsystem.png

Categorising the components had to be done in collaboration with the Front-End Developers so that we would develop a common language and a series of constraints for our design - without it, every component had many different looks. 


Google Material Design

Working for a startup, one has to be pragmatic. With no time to create a design stylesheet from scratch, we decided to apply the principles of Material Design on top of our branding guidelines. In particular we used card-based reporting dashboards, produced clear, full-screen flows and created clean forms.


3. Visual Principles

Minimal Visual Design

Since Forecast was an information-heavy app, with a lot of advanced options, I opted for keeping the visual design simple, using only accent colours in selected places, communicating visual hierarchy with type as much as possible.

Progressive Disclosure

Our main principle here was to keep the app as uncluttered as possible, since we were positioning ourselves as an alternative to clunky PM tools. In order to keep the complexity needed for expert users, without compromising the uncluttered design, progressive disclosure was used in many places.

Agnostic Language

We decided not to anchor ourselves to any particular PM methodology, and so, keeping the language clear and PM agnostic was a priority. To this purpose, we elaborated a dictionary of our terms and tested it with Project Managers working for different organisations, to see if they all understood what they meant.

 


Results

After the redesign, both old customers and new acquisitions praised the intuitiveness and simplicity of the interface. This was manifested through comments in our Customer Service tool, surveys and direct messages.