The Instapage team has done an outstanding job building our UI over many years. However, we noticed that it no longer serves our users’ needs and it was time for a change.
Przemek Cholewa, Instapage Design System Lead, outlines the team’s thinking during this process of updating the user interface:
We knew that a change of perception needed to happen to embrace productivity and performance while keeping everything easy to use. Our team understood how the UI can either distract or help the user to achieve their goal. The form should follow function, not the other way around. We wanted the Instapage Design System to be less eye-candy and more minimalistic and functional.
Historically, we didn’t have the luxury of time, resources and knowledge to properly implement a sophisticated design system. Now, we do, and today we highlight the biggest enhancements from the team behind it all.
(Note: this is not the final evolution of the UI and you can expect many updates over the next few weeks.)
De-noising the Instapage UI
At Instapage, we believe in iterative design and that work on design is never done — it’s constantly evolving. Our first UI Kit was inspired by Material Design and served our product well, but we realized over time the initial UI Kit didn’t have all the components we needed and was too limiting for what Instapage was building.
What you see today with the new Instapage UI is a beautiful story of iterative design in our effort to provide an always-improving user experience. It began by taking our implementation of Material Design and evolving it to a transitional (and temporary) design system. We called it “Crystal,” as it intended to provide more clarity.
Crystal was aimed at adapting Material Design to Instapage needs without changing the design language too much. It addressed the main challenge — have all design elements we need available, documented, and having an Angular code snippet. We began the work in mid-2019 and finished late last year, just to start working on the final step – our own visual language called “Crystal Clear.”
Crystal Clear is our final step of the transition, it’s our own UI, and our own visual language, tailored for the needs of Instapage, carefully crafted with the details we need.
Chief Design Officer, Uldis Leiterts, explains:
As an iterative process, the work is never done. We’re still fixing, improving, and updating. For example, some parts of the grid still need some work. But instead of keeping things under the hood we wanted to share our work because as much as we’re proud of our anticipated “final” version, we’re also proud of the iterative nature of design and how it serves the function.
We hope that the first release of Crystal Clear and subsequent updates will continuously improve our customer’s experience of Instapage, a product we love crafting.
What is new with the Instapage UI?
Overall, we de-noised the entire user interface so that the customer’s content is seen first, as you’ll see below.
UX Copy
Along with the transitional Crystal design, we introduced a UX writer to our talented design team. Instapage was built by engineers, so was the copy you saw. It served us well, but it also left space for improvement.
For instance, one empty-state message said “Your Dashboard is Lonely” — in itself nothing wrong, but it may not be the best language suited for serious business software we see ourselves. With Crystal Clear, Instapage’s UX/Content Writer, Mateusz Sochoń, established more consistency with tone and message. As Mateusz puts it:
We made all the empty states and user-directed communication feel cohesive by ironing out all the bumps. We modified the copy whenever there was room for improvement that was related strictly to syntax or messaging tone.
New style and colors
To find a balanced interface style that boosts user productivity, we updated our color palette and style to the neutral, grayscale tone. The new color palette is less decorative but much more functional. As an example, royal blue is reserved only for action, mostly CTA buttons:
That said, good design is invisible, and the team took inspiration from Dieter Rams, who created the rules for good design. From Rams’ principles, the team updated the interface to be more timeless.
Before: Crystal
Current: Crystal Clear
New levels hierarchy & removing shadows
The new Levels Convention allows us to introduce the idea of component and element hierarchy to the UI in a more purposeful and organized way. Different components found in the Crystal Design system are displayed at different levels to highlight some elements and group them in visually cohesive context groups.
Four main levels exist within our application:
- Level 0: Serves as the backdrop for all remaining content
- Level 1: The level in which the majority of components are displayed
- Level 2: Enables elements from lower levels to be scrolled underneath it
- Level 3: An overlay element displayed over all lower levels
(Note: The Intermediate 1.5 level is the level housing all components that are displayed over a part of a Level 1, 2 or 3 but are still going to hide under a higher level. Such components include tooltips, popovers, dropdowns. The new update removes the shadow from the intermediate state. It’s lighter and visually consistent regardless of the level being placed on.)
In addition, we learned that one of the factors that keeps UI clean is minimal usage of shadows. Material Design historically uses shadows for decoration, whereas Instapage uses shadows to separate major levels like overlay:
Consistent, outlined iconography
Throughout the app, you’ll notice iconography in menus, dropdowns, etc. The new iconography is cleaner and simpler:
A different spacing grid
Behind every interface lies a solid foundation, both structure and grid. Improving a new structure grid was necessary, and with Crystal Clear, the interface has more room to breathe and helps users scan more easily:
Eliminating rounded corners
This update is more subtle, but worth pointing out because the design team believes that eliminating rounded corners is more cutting-edge:
Builder UI
You can see how the new Crystal Clear update is implemented into the builder. Notice the grayscale palette, except for images, CTA buttons, and logos:
What we learned
Head of UI Development, Łukasz Grądzki, highlights how the team and technology improved. Plus, how the investment we made in 2016 paid off now:
Over the past four years, we have transformed from being a loosely put together common components to something that today we can call a full-blown design system. A system that is shared throughout all of our products and internal tools.
For reference, in 2016, we were rewriting the entire application on the frontend side and were implementing the first version of the UI Kit. It took more than three months to complete the task and involved around a dozen team members. It’s also worth mentioning that the application itself was relatively small in comparison to the present day. Now, we were able to deploy a full Instapage application redesign with no major issues in one development cycle.
Check out the new UI for yourself
The new Crystal Clear design system brings you clarity on what matters most — the essence of why you are using the Instapage application. We want to empower you to focus on the task, on your daily Instapage usage.
We’re happy to hear from you if you have suggestions on how we can improve, or feedback using our new UI. Sign in here to experience it for yourself and check out our open positions if you’re interested in joining the team.