flywheel-brand-refresh-large

Behind the scenes of the Flywheel brand refresh

Morgan Smith's Layout avatar

Flywheel has been around for four glorious, fast-paced years, and during that time, we’ve accomplished a whole lot of amazing things that we’re incredibly proud of. We’ve built a rock-solid hosting platform for WordPress sites to call home. We’ve created top-notch solutions that help designers and agencies improve their workflows and grow their businesses. We’ve even created a way for our customers to send us a beer for a job well-done! But in all seriousness, we’ve built something that’s so much larger than we ever imagined it would be.

Through all of this change and growth, there’s one thing we never did: alter our brand. Now, there’s no rule that says you have to rebrand your company just because you’re growing (that would just be silly), but we did feel that things could be a little more true to what we’ve become. A little more bright and beautiful. A little more Flywheel-y.

So, without further ado, we are so proud to unveil our fancy new visual identity! On paper (or, more accurately, on your screen) it looks like a colorful new coat of paint with a dash of whimsical design. This refresh spans across all of our company’s materials, from a sleek and stunning new user experience in our hosting app to confetti-filled event invitations for agencies across the country.


This refresh was all about revamping our brand in a bright and beautiful way, and of course a few practical things, too! Some of our specific goals included the increased ability to scale our product as we grow, creating consistent and intentional designs that span the entire company, and making everything easier and more enjoyable for our customers as they interact with Flywheel.

Interested in how we pulled it all off? Join us as we go behind the scenes to learn about all of the thought, process, meetings, sketches, puns, research, caffeine, and confetti that went into the Flywheel brand refresh.

The not-so-new, new logo

I’ll let you in on a little secret: When we started our refresh, it actually began as a much smaller project to polish up our logo (instead of, well, everything). We’ve always known that our brand would be a work in progress, and in a lot of ways, we simply never had the bandwidth to make major changes to it. Our team grew a lot this year, however, and once we realized we had the resources to make a full refresh happen, we took the opportunity and ran with it!

So, we started with our lovely Flywheel logo to create the first change in our brand refresh.

flywheel-brand-refresh-primary-logo

It’s simple, legible, and inherently readable while embodying our fun and friendly spirit. With a bold, yet soft appearance, the Flywheel logo invites our users to share in our culture and spend time with us!

flywheel-brand-refresh-primary-logo-before-after A little before and after, so you can see where we started.

Our old logo will always have a special place in our hearts (and on co-founder Tony’s left forearm), but we knew it could use a little polishing to reflect our values and energy. This was where our refresh started, and it involved staring at a whole lot of flywheels and different iterations to make sure we were on the right track.

“We didn’t want to depart too far away from the original logo, we just wanted it to be more versatile while working a little better in different environments, sizes small to large, digitally and printed. It’s not a reinvention of the ‘wheel’ – just a better design.” – Andrea Trew, Graphic Designer

By creating a hybrid of the Museo Sans Rounded font and rounding the corners, we made our logo feel even more friendly (just like Flywheel!). We also gave it a little more breathing room by increasing the space between the logomark and wordmark, and the characters within. Things were getting a little too confined with the old one, and we’re all about creating an open and welcoming environment.

Once we made these minor tweaks, there was one more thing we wanted to accomplish with our logo: increased flexibility. See, horizontal logos are great in a whole lot of situations, but every now and then they’re just too darn long. (Designers – I know you know the struggle.) So, we created a secondary logo that stands a little taller.

flywheel-brand-refresh-secondary-logo

With both a horizontal and vertical version taken care of, next we tackled the issue of scaling our logo into smaller sizes. Icons are great, until you start working with tiny little specs. We noticed things were getting a little lost in translation during the shrinking process, so we simplified our logomark and thickened it up to make sure every element (from the letters themselves to the “spinners” on the side) stay readable and beautiful at any size.

flywheel-brand-refresh-small-logos

To take that one step further, we also created an even more simplified logo (or as we like to call it, our bug). By removing a couple spokes from our logomark, increasing the space between elements, and thickening it up just a teeny bit more, our bug can be as small as 50 pixels wide! We’re pretty dang proud of it, and can’t wait to see all of the tiny, magical places it goes.

Our dazzling new color wheel

If you’re new around here, let me fill you in on a little secret – we love bright and beautiful and colorful and wonderful design! So instead of simply choosing a couple colors for our brand refresh, we went ahead and designed an entire Flywheel color wheel, complete with tints and shades.

flywheel-brand-refresh-color-wheel

We believe that one of the most delightful ways to spruce up a project and make someone’s day is to add a punch of bright color. (We have the same thought about confetti, but more on that later!) Don’t get us wrong, we think our new logo is truly the bee’s knees, but our happy hues are almost as important to us as the logo itself. That’s why we’ll even allow our logo to be used in one of these wonderful colors (for special occasions only, of course).

flywheel-brand-refresh-logo-colors

Prior to our refresh, we were really only working with two or three colors (and if we’re being honest, they weren’t always a consistent shade). We knew we wanted more flexibility to be creative while staying true to the Flywheel brand, so we set out to create a palette of bright and vibrant colors that would give us loads of room to experiment with in a robust and whimsical way. From email headers to social media graphics to icons in our application, you’ll spot these friendly pigments all throughout the Flywheel brand. And as you can see, we’re having lots of fun with it.

Our playful new fonts

Yep, that’s right, our brand refresh even includes four new fonts that are as whimsical and inviting as Flywheel itself! Typography may seem like a minor thing to change, but we believe it has a big impact on our users. That’s why we’ve chosen several fonts we can use in a variety of situations to create effective hierarchy and engaging headlines.

Our primary font is Museo Sans Rounded, a bolder, sans serif typeface that’s used for headings and subheads. Similar in look and feel to our Flywheel wordmark, this typeface is also highly legible, fairly geometric, and features friendly rounded corners.

flywheel-brand-refresh-museo-sans-rounded

In balanced contrast, the second typeface is Archer, a thinner, serif typeface that’s sweet and charming with an added bit of whimsy. We particularly adore this font in the semibold italics variation and most commonly use it for subheads.

flywheel-brand-refresh-archer

In true Flywheel fashion, we’ve also included two fancy fonts in our brand refresh to add a little something special to headlines and graphics! Heartwell is a bold typeface with a hand-crafted element that’s perfect for achieving that painted, brush-swept look.

flywheel-brand-refresh-heartwell

While just as fancy, Smoothy lies on the other side of the spectrum with an elegant, whimsical appearance that we just can’t get enough of.

flywheel-brand-refresh-smoothy

The human element

Despite the fact that we’re a digital company in a digital world, we think there’s something really special about using real-world elements in our work. That’s why you’ll commonly find a combination of stunning photography and flat design in the pieces we create, along with familiar faces! Flywheel has always set out to humanize the world of hosting, and what better way to do that than to show off our own superhuman employees? Take the photo below, for example. That’s Bryan, one of our Happiness Engineers, channeling his inner-Superman before saving the day for one of our customers.

flywheel-brand-refresh-human-element

Besides photography, every digital and physical piece we create is crafted with love and intentional design, no matter how small they may seem. We believe it’s the details that matter, so we go above and beyond to create exceptional experiences for our customers at every turn. Whether it’s an asset for a landing page or a hand-crafted swag box for our Agency Partners, we try to add the human element to everything we build. (That’s also the reason why you’ll find things like a bucket of confetti in our office. It makes sense, we promise.)

flywheel-brand-refresh-package

Now, it may look like this all came together pretty quickly, but we spent several months hammering out all of these decisions. From logo iterations to color tweaks to package experiments (where we learned way more about boxes than we ever thought we would), every move was deliberately and thoughtfully chosen to ensure we were making the right move for Flywheel.

Once we got it right, a few things started happening. The first was that we got a little excited about our new colors and icons and fonts, and started slowly sneaking them into ebook covers, social media graphics, and email designs. (Can you blame us? How could we wait?)

The second was that we could start implementing the new brand on a wider scale. First up, the Flywheel application!

The amazing new Flywheel app

Armed with delightful new fonts and beautiful, bright colors, we turned our eyes towards the Flywheel app. We’ve always gotten a lot of really positive feedback about our interface and Flywheel dashboard, so we wanted to be sure to keep the things that worked and only change the elements that could be improved. From a client’s very first interaction with the sign-up page to the moment they take their site live, we set out to make the Flywheel experience simpler, smoother, and just a joy to use!

flywheel-brand-refresh-app-login

Redesigning the Flywheel app wasn’t just about the front-end, however. Our developers also set out to modernize the code and build a solid foundation to set us up for an incredible future. By gutting the JavaScript and overhauling the code, we’ve been able to make our app cleaner, clearer, and much more modern. We used a lot of new technologies to help get the code to the browser as fast as possible, resulting in a better experience for our customers.

Everyone’s favorite part about the refresh is that it was kind of like a clean slate – it gave us the opportunity to make decisions and changes across the board. From how we treat animations to the way color is used, everything is now consistent across all of our company’s materials in a way that’s still flexible and extendable.

flywheel-brand-refresh-dashboard

Take drop-down menus, for example. Usually, no one really thinks about them, except for when you’re trying to select a secondary item and you move the mouse too fast and accidentally leave the menu altogether. This refresh gave our designers and developers time to think about little problems like that and polish them up to create a better experience for our users. So instead of accidentally leaving a drop-down menu in the Flywheel app, it supports you being clumsy and adjusts if you overcorrect your mouse.

“It’s a subtle change that no one’s going to pay attention to or even necessarily notice, but it’s that kind of invisible design experience that really, really matters and makes people fall in love with Flywheel.” – Will Riley, Front end engineer

We could list out each and every little change we made to the app, but that’s not really the point (and a lot less magical than finding them on your own). It’s not about a specific button or interaction; it’s about the refresh as a whole, and all of the changes that went into it. Every little change we’ve made has a clear purpose.

“This refresh involved a lot of experimentation to make sure we weren’t just changing things for the sake of changing them. We paid very close attention to our values and our customers’ needs to improve how they interact with Flywheel.” – Adam Trabold, Lead Product Designer

flywheel-brand-refresh-plans

Our happy new homepage

Last, but certainly not least, we set out to freshen up the entire Flywheel site. The first step, as you can probably guess, was to implement the new brand guidelines. We updated all the font styles, painted the site with the new brand colors, and fixed some consistency issues between pages. While we could’ve stopped there, we decided to take this refresh one step further with a brand spankin’ new homepage!

flywheel-brand-refresh-homepage

With everything else getting a makeover, it just felt wrong to exclude the homepage. It’s an essential part of the Flywheel experience, so we wanted to put our best foot forward and give our customers (and soon-to-be customers) something that really stands out. It also gave us a chance to revisit the strategy behind the homepage to make sure the most important information is easy to find and easy to understand.

“At Flywheel, we’re for designers and we’re for agencies, so we have a responsibility to make sure the brand and product speaks to them. That’s what most excites me about the refresh – we’ve made great strides in the right direction and we now have a foundation for anything we want to do going forward.” – Nick Chickinelli, Product Designer

Some final thoughts

At the core of our brand, we didn’t actually change much. We’re still the same Flywheel you’ve always known and love; our business is the same, our values are the same, even our logo is (mostly) the same. This refresh means that we took a good hard look at the Flywheel brand and polished it up to reflect who we’ve become and still strive to be. It’s the groundwork that will allow us to continue pushing forward with even faster momentum.

“Without a solid brand, everything tends to fall apart. Having a cohesive, recognizable brand is the glue that keeps every piece of a company together. The guidelines we’ve created will help us solve better problems with better solutions that make our clients’ lives easier.” – Andrea Trew, Graphic Designer

flywheel-brand-refresh-final-thoughts

Whether it’s the way a button subtly animates when clicked or the layout of a landing page, we truly and deeply believe that design matters. It’s one of the seven values that keep Flywheel spinning, and it’s one of the reasons we’ve built our platform with designers and agencies in mind.

“We aspire to be an incredible company beyond the hosting space, so having a brand that really speaks to who we are and reflects the quality of our products was really critical, and I think that’s what we’ve achieved with this refresh.” – Dusty Davidson, CEO and Co-Founder

This is only the beginning, and we can’t wait to expand upon this refresh to improve Flywheel even further.

Want to dive into our brand guidelines or download some sweet assets? We’ve got everything you could ever need (and so much more!) right here.

So now that you’ve gotten a behind-the-scenes look at our refresh, what do you think? We’d love to hear your thoughts in the comments so we can continue to improve and build something wonderful!

Comments ( 11 )

  1. Jeffo Granetto

    March 1, 2017

    Amazing job! Looks great! I loved! :D

  2. Elliot

    November 29, 2016

    Looks great! Good job guys.

    One thing I noticed and still not fixed, is there is no logo on any of the pages so hard to redirect to home. See screenshot: https://gyazo.com/a8e23011ec215ee101bdcd364405f0f5

    Also, how does an agency partner get their own swag box? :)

    • Morgan Smith

      November 29, 2016

      Hey Elliot, thanks for the screenshot. That's definitely not quite right. Any chance you could tell us what browser and OS you're using? That'll help us get to the bottom of this.

      As for the swag box, we can hook you up! Someone from the team will reach out to you shortly :)

      • Elliot

        December 3, 2016

        Yep, it's fixed now! :)

      • Elliot

        November 29, 2016

        Hi Morgan

        No problem. I'm using Firefox and Windows 10.

        I go the email regarding the swag box, thanks a lot!

        • Morgan Smith

          November 29, 2016

          Perfect - that did the trick! Everything should be all patched up now. Thanks for helping us catch that :)

  3. Dave Bell

    November 28, 2016

    This refresh is truly what a refresh is supposed to be. Practically iconic :) Now, could you please help me refresh my site? LOL!

    Seriously, awesome job and thanks for sharing the details. Fascinating.

    Dave

  4. Meg Delagrange

    November 28, 2016

    I love the redesign. Honestly, it's what made me finally settle on a new host. I've liked you since I meet some of the team at a WordCamp a couple years ago, but I never got serious with my personal website until now. When I saw the redesign, it meant so much to me that you care about the look and feel of your platform for your users enough to keep improving it. I know that improvement process is a bear. It's fun and it makes me feel good. I'm so happy to be here.

  5. Stephanie

    November 18, 2016

    Love the new look.. Well done! And thanks for the story behind it...

    Makes me so happy I found you guys.

    steff

  6. Kronda

    November 18, 2016

    Love it! I was always a little sad with how bland the app was and the new colors are great and really match the friendliness and personality I associate with your team. Great job!

  7. Stavros

    November 18, 2016

    Great redesign, clean and clear, nice work.

    The only thing that looks a bit weird to me is that there is no logo at the top left or an menu option "Home" so the user cannot go back to homepage easily.

    • Morgan Smith

      November 21, 2016

      Hmmmm...there should be a logo up there! If you could let me know what page you're not seeing it on, we'll look into that ASAP.

  8. David

    November 18, 2016

    So nice! Great job guys! Love it!

  9. Cath

    November 17, 2016

    It's all in the subtleties and the reaffirmation of consistency. Nice tweaks folks!

  10. James Cartwright

    November 17, 2016

    I'm loving the brand refresh. What a beautifully designed brand guidelines too. I've enjoyed readying the story of your refresh.

    I'm very happy that I went with you guys rather than the your big competitor.

    Take it easy!

    • Morgan Smith

      November 17, 2016

      So glad to hear that, James! Thanks for the kind words :)

  11. Steve Hemmer

    November 17, 2016

    Amazing job of updating the site. It really shows the thought that has gone into it.
    I appreciate the well written article detailing all the changes and why. Keep up the fantastic work.

    Steve

    • Morgan Smith

      November 17, 2016

      Thanks so much, Steve! We're thrilled to finally share our refresh and the story behind it :)

Join the discussion