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