P4 — Flywheel Digital

Jamil Amurao
Sep 4, 2018 · 7 min read

Intro

Hello, my name is Jamil O’Brien Amurao, Jamil for short. I am currently studying at Red Academy in the Full Stack Design program, on the User Interface (UI) portion of the program.

In this article you will be reading about the process the User Interface team took in order to execute the creation of a responsive website for Flywheel Digital in 3 weeks.

https://invis.io/UYRR78EKAWD#/317197505_Desktop_HD_Copy_13

The Team

The team I worked with consisted of 4 designers, myself included. 2 User Experience Designers, Victor and Tim, and 2 User Interface Designers, Veronika and I. Victor had previously been in the same group, so we were well aware of each other’s work ethic, and ready to tackle the project.

The Process

The project started with our team meeting the owner of Flywheel Digital, Michael Steele. During this meeting we got to know Michael, Flywheel Digital and the scope of the project and established the following process:

  • Research
  • Planning
  • Design & Test

Flywheel had started in 2016, and had established a brand guideline. By having a preexisting guideline, Michael did not want us to stray too far from the current design.

Research

UI Gut Test

After our initial meeting with the Michael, Veronika and I planned a 20-second UI Gut Test. The goal of the test was to establish the aesthetic and layout of the website by showing images of preexisting website interfaces and layouts, the tester, Michael, would then rate the images from 1 to 5 (1 — Worst, 5 — Best) in 20 seconds.

Highest Scoring Screen

What Michael liked about this site is the fact that it does not look like a generic site. Michael commented that it “looks like an art piece” and enjoyed the geometric shapes with the non-linear layout of information.

Lowest Scoring Screen

Michael rated this site very low. He did not like the generic look of the website. The logo did not stand out the Michael and he did not like the banner with the stock prices listed at the bottom of the landing page.

Once we concluded the test we were able to establish that Michael liked the following:

  • Non-Generic Layout / Grid
  • Informative & Subtle headers
  • Abstract Shapes

With these findings and from the kick off meeting, we were ready to begin the the planning process.

Planning

During the initial interview, I asked the Michael to describe his brand in 3 key words:

  • Trustworthy
  • Reliable
  • Transparent

With these 3 traits in mind, Veronika and I began on our Design Inception Sheet, which is a tool we used to help map out the look of the website.

Design Inception

I’d like to draw your attention towards the centre of the Inception sheet, the “why” section. The “why” is the driving factor for our design, it gives Veronika and I the direction for where we want to take the design. Everything outside the “why” section will co-inside with the Why Statement.

Alongside the 3 keywords previously mentioned by the client, we wanted our users to feel the mood of:

  • Empower
  • Educate
  • Uplifting

With the direction in mind, Veronika and I began making mood boards to later to show to our client:

Mood Board

I aim to capture a feeling of empowerment while maintaining an abstract design. I want my users to feel welcomed and ready to dive their business into the deeper digital realms where Flywheel will help them thrive in.

During our kick off meeting, Michael told us of how the Digital Marketing industry, at the time, had a bad reputation. He noticed that clients felt short handed and did not reap the full benefits that they were entitled to when hiring a Digital Marketing agencies. Michael saw an opportunity for the job to be done right and better.

The other mood I wanted to capture was education. As mentioned above, clients were being slighted, because they did not have that transparency. Michael spoke about how he prefers to work with clients who know what Digital Marketing entails, but he would not mind taking on new clients in order to better their business.

Design

We began our design with a session of fast paced sketching of screens and interfaces, this session is called a “design studio.”

Low Fidelity Screens

We collaborated with the UX Team, Victor and Tim, to produce these low fidelity screens. Here we established the initial look of the website by drawing rough sketches of the screens. The site’s main purpose is to

  • To Deliver information in a clear concise fashion
  • Provide a contact form for clients and potential hires

Overall the website will be content heavy, our goal was to display Flywheel’s services and brand in the most effective manner.

This is the initial digitized look of the home page. Featuring a video of Michael telling the users what the Flywheel offers with supplementary info readily available below.

After testing, we noticed that users were not paying enough attention to the carousel, and it did not fit the direction that Michael had aimed for. The team and I reconvened and did another redesign.

First Wheel

Sticking closely to the Flywheel colours and logo, we applied the original logo and inverted the colours to contrast the icons.

We showed this wheel to Michael, he liked the idea but felt that it could show more of the services he offered.

With this feedback from Michael we reiterated the wheel and made this:

We maintained the colours and width of the wheel but changed the size and added the icons that have Michael’s entire list of services.

Case Studies

I’d like to draw your attention towards the bottom of this low-fi screen this was the initial way to show the case studies that accompany the clients Flywheel has worked with. One of the driving factors of hiring on a Digital Marketing Agency is who they have worked with and how they executed their services, which is detailed in a case study.

We dedicated a page to the case studies instead of displaying it as just a feature on the home page. This gives a more focused view on the case studies and allows the users to learn more about the Flywheel process.

We further digitized the final look of the case study portion of the site, adding the colours and images that pertain to the clients colours.

Style Guide

Above is the full style guide for the website. I’d like to draw your attention to the typography we utilized. Michael wanted headers that are clear and straight to the point, but do not scream the messages they hold. We decided to go with Karla, a San Serif font that fits the description of what Michael wanted, despite that Flywheels guidelines originally had Futura. We wanted to step out of that boundary, slightly. For our body font we went with PT Serif, easy to read and clear for users to distinguish characters as said through A/B testing.

Conclusion

This was the first time my design direction has been chosen by a client, which initially came as a surprise to me. I’m very proud of my design and happy to have collaborated with my team in order to polish it.

Though many sites like Crowd Digital and Major Tom offer a higher level of design, I am happy that from my early times as a designer, my client was happy with the website we made.

Thanks,

Jamil Amurao

Mobile — https://invis.io/Q8NT8E329NP

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade