Minor changes with major consequences
A path of constant changes that changed a product and a company
All mockups were in complete disarray when we started working on the project. Meanwhile, the product wasn't stabilized and changed (sometimes significantly) every week (typical for an early-stage startup).
Cleaning Figma
The first challenge was to structure mockups. Some were grouped, and some weren't. Many features had several versions that needed to be sorted by which was the latest and whether it was implemented. Also, mockups were mixed with drafts.
We started by checking all mockups, comparing different versions, and reviewing the current implementation. We created a few projects:
Two projects for both major parts of the system
General project for all-system features
Sandboxes for personal experiments
Archive
The next step was to clean the mockup structure inside the files. Tile mockup organization created a lot of problems:
It's hard to read (every time you need to compare neighbor mockups to spot differences)
It tells nothing about user-flows
It's impossible to maintain (every change would trigger changes in multiple mockups)
We got rid of useless duplications and arranged mockups into flows. This allowed us to easily visualize even the most complicated logic.
The next step was to clean the production interface.
Production cleaning
Almost everything was misaligned at the start, with wrong gaps, too many styles, wrong accents, and a lack of visual hierarchy. Meanwhile, it wasn't possible to fix everything straight away because:
Too many small imperfections
Every week, some part(s) of the system changed (there is no point in fixing something that will be changed soon anyway)
The primary focus was on adding new or updating existing functionality
In other words, this cleaning was a long-lasting background process.
Every task we created had a second hidden purpose. We added an explanation to every problem we highlighted. Meanwhile, understanding how not to do is one of the powerful learning techniques. In other words, through explaining ourself, we were also trained engineers in design.
We created many cleaning tasks, but despite looking chaotic, all of them were carefully prioritized. We started with the most influential issues and moved to the least influential. Every issue was evaluated and sent to the backlog according to its importance.
Although we didn't like UI components, we knew it was too early for a proper redesign, so we made just a few minor changes to the UI kit.
At the start, the main screen of the system looked like this:
Our last mockup you can see below.
Results
The updates described here changed users' impressions of the product from "raw, unfinished, and experimental" to "professional and reliable."
There always was an extra task we wanted to accomplish. The cleaning not only simplified designers' lives but also affected the whole team's performance and approaches. For instance, engineers learned the 8-point grid system on their own. They actually started to pay more attention to how they implement design.
The system implementation cleaning not only improved its visual appearance but raised the bar for all new features.
