[This is part two of a three-part series highlighting our redesign journey. Check out the first post here!]
To celebrate the launch of the new redesign, we’ve outlined the process right here to give you the inside scoop of what the design team’s been brewing!
So, why a redesign? What inspired the change?
The design team wanted a completely new look for FormAssembly — something modern, mobile-friendly, and clean. The idea was to go with a minimalist design that was both easy to use and aesthetically friendly.
And when we say “change,” we mean a BIG change.
To see just what we mean, check out this sneak peak of the new design below. Right now it’s in beta, and it’ll be open to all users in 2016:
To see the difference, here’s a screenshot of the old design:
Big difference, huh?
The UI/UX team uses three words to define the redesign: Clean, modern, and simple.
Even though the old design appears to be busier in general, the redesign itself is actually quite complex. Every feature, no matter how advanced, is rendered with smooth, minimalist design.
And you can bet that behind each button, icon, notification, and color, there was a discussion.
The Journey
When Ben, Katya and Deborah set out on the redesign journey, they drew up some basic mockups and a handful of different variations of their vision. Each one of the mockups had its own sort of allure, but at the same time, they knew that only one would win.
So, they turned to Cedric Savarese, FormAssembly’s CEO, to get his take on the matter.
When looking at the the vast selection of modern mockups, he chose the one that is now what we call the Gemini update (in other words, the redesign)!
Below you’ll find a picture of the initial mockups.
Which one would you have chosen?
“We wanted to make the web app look better on high-resolution screens. All of our designers have Retina MacBook Pros and they thought everything looked outdated and pixelated,” said Ben Wasser, a software developer and designer at FormAssembly.
To make the new design more user-friendly, Ben said they knew they would need to remove the nested tabs within the app.
In essence, nothing should be tough to find. The app needed to be easy to navigate. After all, users have limited time, and they want everything out in the open and easy to find. “People don’t like nested designs — they prefer to see things in a more flat organizational structure,” Ben added.
FormAssembly’s mascot, the robot, also appears multiple times throughout the redesign. The robot appears in messages, as well as next to people’s usernames.
“We’d discussed different styles of user avatars, but we settled on the robot because it adds a little friendly touch to the app (plus, he’s our mascot and the face of the company!). We might add more avatar options in the future,” said Deborah Kim, FormAssembly’s Former Creative Director.
The Inspiration
A lot of people think that the redesign was inspired by Salesforce Lightning, but the funny thing is that our designers hadn’t even been exposed to the framework!
Instead, they drew inspiration from other minimalist, modern designs and also give a lot of credit to the Dribbble community. On top of that, they held user testing sessions to see what changes needed to be made for the sake of usability.
FormAssembly has also been working on a style guide to help guide design decisions:
This style guide was a huge help throughout the design process, and the team added plenty of content to the style guide during the redesign.
“We’ve found other product frameworks and style guides useful (Salesforce, H&R, MailChimp) and we hope our style guide is useful, too,” said Deborah Kim.
She also pointed out that it’s a great way for the team’s creatives to stay on the same page. “Cedric asked the UI/UX team to create a style guide when we started working on the redesign, with the idea that it would help our entire team create cohesiveness and consistency.”
“It’s helpful to have a primer when you’re creating or refreshing content and interfaces, especially since there’s so many people working together on the product. It’s also great for onboarding new hires who need to get familiar with how we build and write things,” added Deborah.
So, what sort of work goes into a style guide, anyway?
“Ben set up the style guide and framework, and Katya and I worked with the UI/UX team to add elements and content. The guide’s taking shape as we refine the app interface. For tools, we use Git to commit our changes and iterate collaboratively, Gulp to process the Sass files, and Google Hangout to discuss changes and next steps. And each person has their code editor of choice! Mine’s Coda.”
The Reaction
Of course, with any redesign, every company hopes that their users will like the change. With the help of our beta testers, we’ve been able to discover what works and what doesn’t (and then make the necessary changes).
So far, the reaction has luckily been very positive. We’re super excited to open up the redesign to the public in 2016 and to hear what everyone thinks!
Know of another great redesign?
Do you know of a company who has gone through an awesome redesign? We’d love to hear about it — feel free to share it with us in the comments!
