Redesigning the Frontastic studio: The why, the how, and the what

Over the last few months, we’ve been working on improving the look and feel of the Frontastic studio, the tool that all Frontastic customers work with. And we’re happy to say that the 1st phase has rolled out to our customers, and they can start seeing improvements to their day-to-day work.

We want to wow our customers, and we thought the design of our studio didn’t quite do that. We want the experience for our users to be consistent, and we believe that visual perception is a key factor in making a product feel memorable and reliable. We want to create an easy-to-use studio that our customers love using.

As we’re a start-up, there’s not always the necessary processes in place for such an epic task. So before we could even get started, we needed to define our design values and our visual requirements so we could incorporate our Frontastic principles into this new look and feel.

It was immediately obvious that if we wanted to get helpful improvements out to customers quickly, we’d need to phase the rollouts. The 1st phase would be the biggest change visually, and the 2nd phase would change workflows, but both would create substantial improvements in usability and customer happiness. And we decided we didn’t want to hotfix things that we’d have to adjust later, so that’s why we took this route.

Before we could even start, we needed to brainstorm what we wanted our principles to be from now on. A small group got together and did just that. They had a workshop to discuss the key attributes we want to represent and how our current branding could be shaped towards these attributes without losing our brand essence. So they defined our design values and our visual requirements that incorporated the Frontastic principles.

Then we needed a design system. Not only would it make this 1st phase easier, but it would help us evolve with speed and agility in the future. Our Lead UX Designer did a full UI inventory and broke down every element we had in our studio. Then she took the new design principles and transformed those elements. She started with the components like buttons, colors, and icons, which then grew into bigger components that created our pattern library. We also reworked our entire content style guide and the way we use tone of voice. So even though we weren’t quite at a full design system but we had our principles, our voice, and our pattern library, we thought it was enough to get to work on redesigning the Frontastic studio.

Our Lead UX Designer, Sofia Toso, got to work on creating full pages and user flows using all the components that she’d redesigned in the pattern library. She worked with 2 developers, Klaudija and Sanja, to make the improvements and get the new design in place.

Sofia explains a little of why we chose certain colors: “We use color with purpose. Each color has a consistent meaning across the interface and a hierarchy attached to them. We dialed down our usual brand pink as although it makes us stand out in marketing material, it gets in the way of usability. Instead, we introduced a new interactive blue color that we then applied our hierarchy to, along with fill styles.”

They also worked on small usability improvements that could help our users in their day-to-day work now, rather than waiting for phase 2. After all the rounds of feedback and co-working, they were ready to release it to the world.