no_face.png

Visual Design Collection

Visual Design Principles at Forecast

This chapter is about how I led the design vision at Forecast, 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 with the tean

Card Sorting with the tean

2. Mock-ups

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.

Initial paper sketch for a component

Initial paper sketch for a component

3. Design System

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.

Initial paper inventories of elements turned into…

Initial paper inventories of elements turned into…

A digital inventory of elements

A digital inventory of elements

4. Design 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.

Sprints and Milestones.png
Aurora Suriel