Project FLYWHEEL Digital
UI Design — Responsive website

1.1 Background
Flywheel Digital is a digital marketing company providing 6 services include SEO, CRO and Analytics. This company is founded by Michael Steele whom has been in digital marketing field for 10 years and has a huge passion for it. As a start up company, Flywheel doesn’t have its own website yet, so Michael came to RED hoping to have responsive website designed for both desktop and mobile.
1.2 The Team

The team is formed by 2 UX design students and 2 UI design students, for the 3 weeks span we need to put together our thoughts and visions and deliver a final prototype.
2.1 The Research
Client Kick-off Meeting
When we first met Michael, we immediately realised that he’s a very confident and professional individual: he came prepared and he knew exactly what he wanted, he was looking for capable people to translate he’s vision into an actual website that delivers all the right information and passion to the targeted audience.
He explained the story behind the company name, what digital marketing agency does and why he’s company is different from other agencies in the industry. The name Flywheel came from the actual concept of a mechanical device for which the flywheels are used to provide continuous power output in systems where the energy source is not continuous. This is a perfect representation of Michael’s concept as the professional service he provides to the clients will keep the flow going continuously and make sure the clients are satisfied for the result right away and in long run too.
The Gut Test
To start the design process, we conducted a gut test with Michael. A gut test is a collection of various interface images of existing websites being put into a keynote presentation for him to score each screenshot, then we can design the layout and aesthetic for the website from what’s preferred by Michael. We put 10 images and Michael shall rate them from 1 to 5 with 1 being not fond of it at all, to 5 being really fond of it.
The Result
Below is the image that Michael rated 5. He’s very fond of that abstract and clean vibe this website provides, that almost artist portfolio feel this image gives out really caught he’s attention.

And this is he’s least favourite image. He doesn’t like the style of website and it’s too technical to him too.

After the gut test, he gave us the original logo and colour preference for the website. He wanted to continue to use the logo and the colour orange and dark blue shall be the main colours. With the result of gut test, we knew that he likes very subtle design, something that’s loud but not too shouting, he wants the design to stand out from the crowd and doesn’t have that traditional agency vibe.
2.2 The Design Process
2.2.1 My Design Direction - The Why
During the kick off meeting, Michael mentioned that he’s all about building the strong and reliable relationship with the clients. When Jamil and I talked about the why for our design, we decided to go for 2 different directions with 2 whys. For me, building a strong and reliable relationship is a very heavy and serious goal, but it doesn’t have to look heavy in design.
The why I came up with is very straight forward: to help enhance the client’s appearance in real world.
My point of view is that delivering very solid first marketing campaign work for new clients should come first, then the trust and reliability could easily be build from that particular success.
The Design Inception
With our own why in mind, we came up with 2 very different designs. Below is my design inception sheet:

My intention is to catch the potential client’s attention right away, so the colour scheme is to have 4 pairs of colours and gradients. I want the design to be vibrant, fun and playful, let that sense of trust and reliability be reflected by the geometric and beehive shape as beehive is known to be very strong in structure and reliable. Having rectangle with round edges shall appear to be approachable and friendly, with enough open space and gradual movement, the website would appear to be simple yet attention grabbing.
The Moodboard
In order to capture the essence of what our client wants, I actually came up with 2 moodboards initially.
This is my first moodboard, I call it Moodboard Discovery, with the concept of art in mind and it includes all the colour the clients preferred: orange, dark blue and grey.

After having a second thought, I felt like I should be a bit bolder and try something that’s a little different. During my research phase, I checked out a lot of existing websites from digital marketing agencies out there, a lot of them look very different: Major Tom has that flowy space feel to the landing page, Mailchimp has lots of abstract shapes and bright colours, Croud looks very geometrical. I took a risk in my final version of moodboard and came up with this:

In this moodboard, I want to emphasis on the people and the bonding between them. It’s the people at Flywheel that’s making a difference for the client, they’re very young yet very professional and experienced, they’re confident with their work and stay true to their personal philosophies. With bright colours and the using of gradients, the interface should appear to be modern and vibrant.
The Style Tile

This is the style tile I designed for Flywheel. The buttons all have round edges, and if you zoom in closely, the beehive shape is composed with hexagons with round edges to look less sharp yet have that strong bonding feel. These 6 hexagons represent the 6 services Flywheel provides. I tested a lot of font pairings and asked a lot of people of their thoughts on the fonts, I ended up with Phosphate Inline as header 1, Gill Sans as headline 2 and content in different sizes and weights.
2.2.2 Jamil’s Design Direction
The Why

The why Jamil came up with is: to build & empower a lasting relationships with clients.
The Design Inception Sheet

The mood for Jamil’s design is to provide that empowerment, trust, uplifting and educate vibe. The visual language for he’s direction is above: to have that dissolve and fade movement, with 3 main colours just as client wanted, that rounded and curved shapes to provide friendly and approachable feeling. In order to provide that abstract and portfolio vibe, content will be spaced out.
The Moodboard

The Style Tile


2.3 The Final Design
After presenting both directions, Michael decided to go with Jamil’s direction below. He stayed very closely and truly to what the client wanted and the final result is good.

3. The Prototype
Since we don’t have to design new logo for our client, the remaining process is a lot easier. Please see clickable protytopes.
Clickable for Desktop:
Clickable for Mobile:
4. The Conclusion
We delivered a solid prototype to our client Michael, this is a professional website that is different and we believe it represents who Flywheel Digital is as an digital marketing agency.
