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

The Frontastic Editor: Old versus new

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.

Seeing the issues

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.

Setting the goals

We wanted to redesign the Frontastic studio so it looked more mature but at the same time, we wanted to fix some usability issues. And we wanted to do it quickly. We knew we didn’t have the time within our development team to be able to work on all the problems straight away, so we put 2 developers on the project, along with our Lead UX Designer, and our Product Lead. Together, they set the scope for the project and how we could release it in a meaningful but quick way.

Frontastic Editor

Phasing the rollouts

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.

Getting started

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.

Designing and developing

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.

Letting it loose

After releasing the 1st phase internally, and getting feedback from the team, we rolled it out to our customers. Although it’s mainly style updates, it helps us look like Frontastic and create an impact as a brand as soon as you open the studio. And it’s not about applying makeup on top of the studio, these updates really impact the usability for the better. It’s cleaner, it shows feedback at the right time, we’ve improved error messages, and we’ve really improved accessibility.

Working on the future

So now phase 1 is out the door, what’s next? Getting to work on phase 2, of course! It’s going to be a huge project, and we don’t have the full timelines just yet. But we’ve got a plan, and that’s what matters. We’re going to do a full inventory of every user journey in the new design, and then we’ll improve them where it’s needed. We don’t want to have one amazing experience in a part of the studio and a horrible one in another. We want to create a coherent solution that improves usability for all our users. We also need to keep working on our design system to get it fully functional so that all teams can easily use it. We’ll also be testing what works in the new design and what doesn’t, and improving it as we go. Feedback from our users is critical to giving them the best experience possible.

Visit our knowledge base for more information on the updates we made.

Portrait Catherine Jones

Catherine Jones

Catherine’s the Lead Editor at Frontastic. She’s worked in many different positions at different levels but always with a customer focus and is always looking to create the best experience for users.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.