Dietro le quinte del rinnovamento del marchio Flywheel

Questo aggiornamento riguardava il rinnovamento del nostro marchio in un modo luminoso e bello e, naturalmente, anche alcune cose pratiche! Alcuni dei nostri obiettivi specifici includevano la maggiore capacità di scalare il nostro prodotto man mano che cresciamo, creando design coerenti e intenzionali che abbracciano l'intera azienda e rendendo tutto più semplice e divertente per i nostri clienti mentre interagiscono con Flywheel.

Interessato a come abbiamo tirato fuori tutto? Unisciti a noi mentre andiamo dietro le quinte per conoscere tutto il pensiero, il processo, gli incontri, gli schizzi, i giochi di parole, la ricerca, la caffeina e i coriandoli che sono andati all'aggiornamento del marchio Flywheel.

Il non nuovo, nuovo logo

Ti svelo un piccolo segreto: quando abbiamo iniziato il nostro aggiornamento, in realtà è iniziato come un progetto molto più piccolo per perfezionare il nostro logo (anziché, beh, tutto). Abbiamo sempre saputo che il nostro marchio sarebbe stato un work in progress e, per molti versi, semplicemente non abbiamo mai avuto la larghezza di banda per apportare modifiche sostanziali ad esso. Il nostro team è cresciuto molto quest'anno, tuttavia, e una volta che ci siamo resi conto di avere le risorse per realizzare un aggiornamento completo, abbiamo colto l'occasione e l'abbiamo sfruttata!

Quindi, abbiamo iniziato con il nostro adorabile logo Flywheel per creare il primo cambiamento nel rinnovamento del nostro marchio.

È semplice, leggibile e intrinsecamente leggibile mentre incarna il nostro spirito divertente e amichevole. Con un aspetto audace ma morbido, il logo Flywheel invita i nostri utenti a condividere la nostra cultura e trascorrere del tempo con noi!

Un po' prima e dopo, così puoi vedere da dove siamo partiti.

Il nostro vecchio logo avrà sempre un posto speciale nei nostri cuori (e sull'avambraccio sinistro del co-fondatore Tony), ma sapevamo che avrebbe potuto essere lucidato un po' per riflettere i nostri valori e la nostra energia. È qui che è iniziato il nostro aggiornamento e si è trattato di fissare un sacco di volani e diverse iterazioni per assicurarci di essere sulla strada giusta.

“Non volevamo allontanarci troppo dal logo originale, volevamo solo che fosse più versatile mentre funzionava un po' meglio in ambienti diversi, dimensioni piccole e grandi, in digitale e stampato. Non è una reinvenzione della "ruota", solo un design migliore". – Andrea Trew, Grafico

Creando un ibrido del font Museo Sans Rounded e arrotondando gli angoli, abbiamo reso il nostro logo ancora più amichevole (proprio come Flywheel!). Abbiamo anche dato un po' più di respiro aumentando lo spazio tra il logomark e il wordmark e i caratteri all'interno. Le cose stavano diventando un po' troppo confinate con il vecchio e stiamo tutti creando un ambiente aperto e accogliente.

Dopo aver apportato queste piccole modifiche, c'era un'altra cosa che volevamo ottenere con il nostro logo: maggiore flessibilità. Vedi, i loghi orizzontali sono fantastici in molte situazioni, ma ogni tanto sono troppo lunghi. (Designer – so che conosci la lotta.) Quindi, abbiamo creato un logo secondario che è un po' più alto.

Dopo aver curato sia una versione orizzontale che verticale, abbiamo affrontato il problema del ridimensionamento del nostro logo in dimensioni più piccole. Le icone sono fantastiche, finché non inizi a lavorare con piccolissime specifiche. Abbiamo notato che le cose si perdevano un po' nella traduzione durante il processo di restringimento, quindi abbiamo semplificato il nostro logomark e lo abbiamo addensato per assicurarci che ogni elemento (dalle lettere stesse alle "filatrici" sul lato) rimanesse leggibile e bello a qualsiasi dimensione .

Per fare un ulteriore passo avanti, abbiamo anche creato un logo ancora più semplificato (o come ci piace chiamarlo, il nostro bug). Rimuovendo un paio di raggi dal nostro logomark, aumentando lo spazio tra gli elementi e ispessindolo un pochino di più, il nostro bug può essere largo fino a 50 pixel! Ne siamo dannatamente orgogliosi e non vediamo l'ora di vedere tutti i posti minuscoli e magici in cui va.

La nostra nuova abbagliante ruota dei colori

Se sei nuovo da queste parti, lascia che ti spieghi un piccolo segreto: amiamo il design luminoso, bello, colorato e meraviglioso! Quindi, invece di scegliere semplicemente un paio di colori per l'aggiornamento del nostro marchio, siamo andati avanti e abbiamo progettato un'intera ruota dei colori del volano, completa di tinte e sfumature.

Crediamo che uno dei modi più deliziosi per abbellire un progetto e rendere la giornata di qualcuno sia aggiungere un tocco di colore brillante. (Abbiamo lo stesso pensiero sui coriandoli, ma ne parleremo più avanti!) Non fraintenderci, pensiamo che il nostro nuovo logo sia davvero le ginocchia dell'ape, ma i nostri colori allegri sono per noi importanti quasi quanto il logo stesso. Ecco perché consentiremo anche al nostro logo di essere utilizzato in uno di questi meravigliosi colori (solo per occasioni speciali, ovviamente).

Prima del nostro aggiornamento, in realtà stavamo lavorando solo con due o tre colori (e se siamo onesti, non erano sempre una tonalità coerente). Sapevamo di volere una maggiore flessibilità per essere creativi rimanendo fedeli al marchio Flywheel, quindi abbiamo deciso di creare una tavolozza di colori brillanti e vivaci che ci desse molto spazio per sperimentare in modo robusto e stravagante. Dalle intestazioni delle e-mail alla grafica dei social media alle icone nella nostra applicazione, individuerai questi pigmenti amichevoli in tutto il marchio Flywheel. E come puoi vedere, ci stiamo divertendo molto.

I nostri nuovi font divertenti

Sì, è vero, il nostro aggiornamento del marchio include anche quattro nuovi caratteri stravaganti e invitanti come Flywheel stesso! La tipografia può sembrare una cosa minore da cambiare, ma riteniamo che abbia un grande impatto sui nostri utenti. Ecco perché abbiamo scelto diversi tipi di carattere che possiamo utilizzare in una varietà di situazioni per creare una gerarchia efficace e titoli accattivanti.

Il nostro carattere principale è Museo Sans Rounded, un carattere tipografico sans serif più audace che viene utilizzato per intestazioni e sottotitoli. Simile nell'aspetto e nella sensazione al nostro marchio denominativo Flywheel, questo carattere tipografico è anche altamente leggibile, abbastanza geometrico e presenta angoli arrotondati amichevoli.

In contrasto equilibrato, il secondo carattere tipografico è Archer, un carattere tipografico serif più sottile, dolce e affascinante con un tocco di fantasia in più. Adoriamo particolarmente questo carattere nella variante corsivo semigrassetto e più comunemente lo usiamo per i sottotitoli.

In vero stile Flywheel, abbiamo anche incluso due caratteri stravaganti nel nostro aggiornamento del marchio per aggiungere qualcosa di speciale ai titoli e alla grafica! Heartwell è un carattere tipografico audace con un elemento artigianale perfetto per ottenere quell'aspetto dipinto e spazzolato.

Anche se altrettanto elegante, Smoothy si trova dall'altra parte dello spettro con un aspetto elegante e stravagante di cui non ne abbiamo mai abbastanza.

L'elemento umano

Nonostante il fatto che siamo un'azienda digitale in un mondo digitale, pensiamo che ci sia qualcosa di veramente speciale nell'usare elementi del mondo reale nel nostro lavoro. Ecco perché troverai comunemente una combinazione di fotografie straordinarie e design piatto nei pezzi che creiamo, insieme a volti familiari! Flywheel ha sempre cercato di umanizzare il mondo dell'hosting e quale modo migliore per farlo se non mostrare i nostri dipendenti sovrumani? Prendi la foto qui sotto, per esempio. Quello è Bryan, uno dei nostri ingegneri della felicità, che incanala il suo Superuomo interiore prima di salvare la situazione per uno dei nostri clienti.

Oltre alla fotografia, ogni pezzo digitale e fisico che creiamo è realizzato con amore e design intenzionale, non importa quanto piccolo possa sembrare. Crediamo che siano i dettagli che contano, quindi facciamo di tutto per creare esperienze eccezionali per i nostri clienti in ogni momento. Che si tratti di una risorsa per una pagina di destinazione o di una scatola regalo artigianale per i nostri partner di agenzia, cerchiamo di aggiungere l'elemento umano a tutto ciò che costruiamo. (Questo è anche il motivo per cui troverai cose come un secchio di coriandoli nel nostro ufficio. Ha senso, lo promettiamo.)

Ora, può sembrare che tutto ciò si sia riunito abbastanza rapidamente, ma abbiamo passato diversi mesi a elaborare tutte queste decisioni. Dalle iterazioni del logo alle modifiche del colore agli esperimenti sui pacchetti (in cui abbiamo imparato molto di più sulle scatole di quanto avremmo mai pensato), ogni mossa è stata scelta deliberatamente e ponderata per assicurarci di fare la mossa giusta per Flywheel.

Una volta che abbiamo capito bene, alcune cose hanno iniziato a succedere. Il primo è stato che ci siamo un po' eccitati per i nostri nuovi colori, icone e font, e abbiamo iniziato lentamente a introdurli di nascosto nelle copertine degli ebook, nella grafica dei social media e nei design delle e-mail. (Puoi biasimarci? Come potremmo aspettare?)

La seconda era che potevamo iniziare a implementare il nuovo marchio su scala più ampia. Innanzitutto, l'applicazione Flywheel!

La nuova fantastica app Flywheel

Armati di nuovi deliziosi caratteri e splendidi colori vivaci, abbiamo rivolto lo sguardo verso l'app Flywheel. Abbiamo sempre ricevuto molti feedback molto positivi sulla nostra interfaccia e sulla dashboard di Flywheel, quindi volevamo essere sicuri di mantenere le cose che funzionavano e cambiare solo gli elementi che potevano essere migliorati. Dalla prima interazione di un cliente con la pagina di registrazione al momento in cui pubblica il suo sito, abbiamo deciso di rendere l'esperienza Flywheel più semplice, fluida e divertente da usare!

Tuttavia, la riprogettazione dell'app Flywheel non riguardava solo il front-end. I nostri sviluppatori hanno anche deciso di modernizzare il codice e costruire una solida base per prepararci a un futuro incredibile. Eliminando JavaScript e revisionando il codice, siamo stati in grado di rendere la nostra app più pulita, chiara e molto più moderna. Abbiamo utilizzato molte nuove tecnologie per ottenere il codice nel browser il più velocemente possibile, offrendo ai nostri clienti un'esperienza migliore.

La parte preferita di tutti dell'aggiornamento è che è stato un po' come una tabula rasa: ci ha dato l'opportunità di prendere decisioni e apportare modifiche su tutta la linea. Dal modo in cui trattiamo le animazioni al modo in cui viene utilizzato il colore, ora tutto è coerente in tutti i materiali della nostra azienda in un modo che è ancora flessibile ed estensibile.

Prendi i menu a discesa, ad esempio. Di solito, nessuno ci pensa davvero, tranne quando stai cercando di selezionare un elemento secondario e muovi il mouse troppo velocemente e per sbaglio esci del tutto dal menu. Questo aggiornamento ha dato ai nostri designer e sviluppatori il tempo di pensare a piccoli problemi del genere e di perfezionarli per creare un'esperienza migliore per i nostri utenti. Quindi, invece di lasciare accidentalmente un menu a discesa nell'app Flywheel, ti aiuta a essere goffo e si adatta se correggi eccessivamente il mouse.

"È un cambiamento sottile a cui nessuno presterà attenzione o addirittura noterà necessariamente, ma è quel tipo di esperienza di progettazione invisibile che conta davvero, davvero e fa innamorare le persone di Flywheel". – Will Riley, ingegnere front-end

Potremmo elencare ogni piccola modifica che abbiamo apportato all'app, ma non è proprio questo il punto (e molto meno magico che trovarli da soli). Non si tratta di un pulsante o di un'interazione specifici; si tratta dell'aggiornamento nel suo insieme e di tutte le modifiche che sono state apportate. Ogni piccolo cambiamento che abbiamo fatto ha uno scopo chiaro.

“Questo aggiornamento ha comportato molte sperimentazioni per assicurarci che non stessimo solo cambiando le cose per il gusto di cambiarle. Abbiamo prestato molta attenzione ai nostri valori e alle esigenze dei nostri clienti per migliorare il modo in cui interagiscono con Flywheel”. – Adam Trabold, Lead Product Designer

La nostra felice nuova homepage

Ultimo, ma certamente non meno importante, abbiamo deciso di rinfrescare l'intero sito di Flywheel. Il primo passo, come probabilmente si può intuire, è stato quello di implementare le nuove linee guida del marchio. Abbiamo aggiornato tutti gli stili dei caratteri, dipinto il sito con i nuovi colori del marchio e risolto alcuni problemi di coerenza tra le pagine. Anche se avremmo potuto fermarci qui, abbiamo deciso di fare un ulteriore passo avanti con questo aggiornamento con una nuova homepage di zecca!

Con tutto il resto che è stato rinnovato, sembrava sbagliato escludere la home page. È una parte essenziale dell'esperienza Flywheel, quindi volevamo fare del nostro meglio e offrire ai nostri clienti (e futuri clienti) qualcosa che si distinguesse davvero. Ci ha anche dato la possibilità di rivedere la strategia alla base della home page per assicurarci che le informazioni più importanti siano facili da trovare e da capire.

“In Flywheel, siamo per i designer e siamo per le agenzie, quindi abbiamo la responsabilità di assicurarci che il marchio e il prodotto parlino loro. Questo è ciò che più mi entusiasma dell'aggiornamento: abbiamo fatto grandi passi avanti nella giusta direzione e ora abbiamo le basi per tutto ciò che vogliamo fare in futuro". – Nick Chickinelli, Product Designer

Alcuni pensieri finali

Al centro del nostro marchio, in realtà non siamo cambiati molto. Siamo sempre lo stesso Volano che hai sempre conosciuto e amato; la nostra attività è la stessa, i nostri valori sono gli stessi, anche il nostro logo è (per lo più) lo stesso. Questo aggiornamento significa che abbiamo esaminato attentamente il marchio Flywheel e lo abbiamo perfezionato per riflettere chi siamo diventati e ci sforziamo ancora di essere. È il lavoro di base che ci consentirà di continuare ad andare avanti con uno slancio ancora più rapido.

“Senza un marchio solido, tutto tende a sgretolarsi. Avere un marchio coeso e riconoscibile è il collante che tiene insieme ogni pezzo di un'azienda. Le linee guida che abbiamo creato ci aiuteranno a risolvere problemi migliori con soluzioni migliori che semplificheranno la vita dei nostri clienti”. – Andrea Trew, Grafico

Che si tratti del modo in cui un pulsante si anima sottilmente quando viene cliccato o del layout di una pagina di destinazione, crediamo sinceramente e profondamente che il design sia importante. È uno dei sette valori che fanno girare Flywheel ed è uno dei motivi per cui abbiamo costruito la nostra piattaforma pensando a designer e agenzie.

"Aspiriamo a essere un'azienda incredibile al di là dello spazio di hosting, quindi avere un marchio che parla davvero di chi siamo e riflette la qualità dei nostri prodotti è stato davvero fondamentale, e penso che sia quello che abbiamo ottenuto con questo aggiornamento". – Dusty Davidson, CEO e co-fondatore

Questo è solo l'inizio e non vediamo l'ora di espandere questo aggiornamento per migliorare ulteriormente Flywheel.

Quindi ora che hai dato un'occhiata dietro le quinte al nostro aggiornamento, cosa ne pensi? Ci piacerebbe sentire i tuoi pensieri nei commenti in modo da poter continuare a migliorare e costruire qualcosa di meraviglioso!