We hit two challenges when using the low fidelity approach from Shape Up:
So, now we go deep in design ahead of a build. And collaborate heaps during this process. We ensure there is a clear path for the work to be done as efficiently as possible at build time, without being held up by design.
When it comes to our design language we don't try to reinvent the wheel. Instead we use Material Design and customise it to our brand.
We use Figma as our design tool. Inside of Figma we have a defined structure for our design system, projects and files.
Figure 13 The Joyful Design System - Atomic Design Pages
This version of Joyous involves a full UI overhaul. So we have created a new design system as part of this project.
We build components with a 1-1 mapping to engineering components and use Figma Variants for different styles and states.
Figure 14 Atoms with variants inside our design system.
Figure 15 - Our V3.0 Project Structure
For most of our chunks we will frame up the features in Figma. We mean this quite literally. We have a Figma File Design Template which is the starting point for each chunk.
Figure 16 Our Design File Template
We create a Work in Progress (WIP) page in each file. Within the page there are two swim lanes. The top lane contains a series of frames defining the first release features. The bottom lane contains a series of frames defining the features that can wait.
Each frame has a feature name. We will map out all the frames before we begin to do the visual designs. This is what we mean by framing the feature.
At the end of each lane we will show final composed desktop and mobile views. We create another page in which we build a prototype demonstrating the UX of all the features (now so much easier to do using Figma Flows).
Figure 17 The lanes of the Insights chunk
For each major revision we will create a new WIP page, and rename the previous WIP page with a version number. Once we reach a point of readiness we will create a For Dev page into which we place the final frames ready for review.