Redesigning the Frontastic Editor: 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 Editor, 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 Editor 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 Editor 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 Editor 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 two 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.
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 hot fix 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 Editor. Then she took the new design principles and transformed those elements. She started with the components like buttons, colors, and icons, that then grew into bigger components, which 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 Editor.
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 two 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 the impact as a brand as soon as you open the Editor. And it’s not about applying makeup on top of the Editor, 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 Editor and horrible 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.
Catherine’s the Technical Writer 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.
Anyone in retail now needs to be much more targeted and creative to motivate customers to spend at a time when global economies are sluggish and unpredictable. Find out how to re-adjust your strategy for peak season in this guest post from our parter Attraqt.
https://www.frontastic.cloud/wp-content/uploads/2020/12/Peak-season-Li.png12602400Helenhttps://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svgHelen2020-12-01 14:07:312020-12-03 11:35:28How to Re-adjust your Strategy for Peak Season
When you launch a personalization campaign to optimize your visitors’ digital experience, you aim to achieve the best possible return on investment (ROI). The quality of your visitor targeting is crucial to ensuring this: the more refined and accurate the targeting is, the more effective your campaign will be. Get deep insights in this gues post from Kameleoon.
https://www.frontastic.cloud/wp-content/uploads/2020/11/Personalised-experiences-Li-1.png12602400Helenhttps://www.frontastic.cloud/wp-content/uploads/svg/Frontastic-Logo-Gradient.svgHelen2020-11-26 13:24:052020-11-26 13:24:05Design personalized digital experiences using custom data