[This post was adapted from a recent presentation I gave on the topic of pattern libraries.]
One year ago, I joined a tech startup as the as the 6th employee and only designer. We built and designed a comprehensive SaaS web application that allowed clients to generate and deploy native mobile apps to any number of users.
Our initial criteria for roughing out a design was minimal:
- Software would be web based
- The interface would be composed of a basic CRUD (Create, Read, Update, Delete) bar, a panel to house navigation, and a canvas or working area
- Design needed to be conceived of as a system or assembly of pieces because our scope was not yet fully defined
The image above shows my initial sketch of our software and notes to consider such as light or dark interface, drag and drop support, responsiveness of panels, etc.
I love researching, especially conducting a competitive analysis. I looked at everything from desktop to web, productivity to design apps. Our target users were business analysts likely most familiar with a PC environment and Microsoft Office. I wanted to keep our interface light, organized and not tool-heavy.
An app that helps people perform a serious task can put the focus on the task by keeping decorative elements subtle and unobtrusive and by using standard controls and predictable behaviors. -Apple, Human Interface Guidelines
The logical jumping point was our newly minted brand. As I was designing our external software, I was also forming the internal brand standards and guidelines for our startup.
I wanted to utilize assets from our brand identity. We had a great mark and full color palette from our friends at Culture Pilot.
I began creating some fast initial mockups. The intention around theses was to focus on usablitily and be minimal, uncluttered and additive (meaning it had to be a system that would scale and grow).
Finally, we landed here. It is interesting to look back to previous iterations and see elements that were scrapped and brought back in. The mobile screen was previously a white box and later became housed in a high fidelity representation of an iPhone for context.
How did we get here?
There was more going on to arrive at the point of a resolved design system and the process along the way dictated a lot of key decisions.
No designer works in a bubble. The essence of any good designer is continuously being informed by the world around you. For me, I was lucky to work with a brilliant team that challenged me to be better. My day to day workflow was tied to ever-evolving conversations with our product manager and implementing assets with our developers.
Our UX team ascribed to agile methodology for development which provided for a lot of cross-over. Initially, we lived in the specifications guide and wireframes. My goal was to build our foundational components deceptively simple, though most, like the tiles below, housed complex metadata about a project.
We made the decision from the beginning to work in Sketch (brand new at the time) for all our UI design work. Sketch housed all of the design components in their static form.
Again, every solution had to be scalable and aggregate. Below is a detail illustrating an invisible grid and pieces of an interactive workflow builder.
Icons were kept uniform and minimal. On the left is a page from the specifications showing a menu for a form generator, and on the right is the completed icons set.
This screenshot very plainly breaks down thinking in components. For each highlighted region of the screen, there were fully explored states (hovers, dialogs, active, etc.)
In addition to the scalable system within our desktop software, all components had to sync up with our mobile end-product and maintain the brand’s consistency.
In the desktop version above, the use of color and detail was kept minimal on the rendered phone so as to focus on content. Our designs for the mobile apps were an expansion of our previously defined style guide.
I wanted the brand and all of our software to be intelligent, modern, user-centric, and a pleasure to interact with.
Bringing wireframes to life, thinking in components, building a scalable system, and developing the look of our brand was part of my last year, but to ensure cohesiveness and ease of implementation by the developers, I also merged all of our assets into a pattern library.