“flat lay photo of four person holding smartphone and book” by rawpixel on Unsplash

Flywheel Digital — UX Case Study

Timothy Chan
Sep 4, 2018 · 10 min read

A Website for Flywheel Digital Marketing Agency

Meet the Team

Before we get started with the case study, I would like to thank everyone on the team for the three weeks of hard work that we have put into this project. It was indeed a challenging one, but we got through it together!


1. Research

Topics Covered in a Digital Marketing Agency

At the beginning of the project, we started by researching about how a digital marketing agency works. Digital marketing is a way to promote brands and products online and through other digital channels. Most businesses have a target audience it wants to reach. The goal of digital marketing is to attract, engage, and convert your leads.

A “decentralized” agency with a focus on technical digital marketing (SEO, Google Analytics, CRO, Paid). Decentralized meaning using a network of freelancers to expand or contract the company based on the projects we take on.

Services Offered by Flywheel

“We provide technical, project-based digital marketing services for eCommerce, SaaS, and Lead Generation businesses.” — Flywheel Founder Michael

After we had an in-depth understanding of what a digital marketing agency is we started with our research phase.

We started with survey questions that are targeted to previous clients who had worked with a digital marketing agency.

For our questions we touch on the following topics:

  • What services client’s used when working with a digital marketing agency?
  • What problems did the client’s business had that led to them approaching a digital marketing agency?
  • What are some of the determinant factors of hiring a digital marketing agency?
  • How was a client’s experience with a digital marketing agency?
  • Were there any specific frustrations that the client has experienced when working with its chosen digital marketing agency?

Interviews allow for more in-depth questioning of survey questions. From our interviews, we have grouped it into four major categories.

  • Agencies that are good at getting the guesswork out of the equation
  • Clients’ hear about agencies through referrals
  • Branding is vital in giving an excellent personal identity to a potential client
  • Clients want credible & accountable client case studies
  • Ability to contact previous clients for reviews
  • Open communication
  • Transparent communication
  • Lack of context from initial meetings -> Led to ads being not aligned with client goals
  • If clients can afford it, they would do it in-house
  • An improved brief template on the website optimized for gaining more of the why and the context of why the client wants to hire a digital marketing agency like Flywheel
  • A sample proposal for clients to download and read through beforehand
  • Ability to have a status tracking page to view overall progress of a project

“We wanted to improve the initial process of flywheel’s collection of data to help improve its client experience.”

— UX Team

4. Testimonials

One constant problem we ran into is the topic of testimonials. People, in general, think testimonials lack accountability as it can be made up or filtered by a digital marketing agency. There is no real verification on whether the testimony is indeed verified and authentic. Although this is a business goal, it informs us of the prioritization of information later on in the design.

Now that we know more about the frustrations of clients with various digital marketing agencies, we dived into functionality of other digital marketing sites.

Competitor Navigation Analysis

We first explored various competitors website to see how information is broken down on each website:

Functionality-Abstract, Interactive Scrolling

Navigation- Drop down menu on top

Functionality — Section based

Navigation — Side navigation bar, no drop down menu

Functionality — Full screen slide based

Navigation — Hamburger Menu

Functionality — Abstract, Parallax Scrolling

Navigation — Navigation on top , No Drop Down


2. Planning

With our research completed we started collating data from our surveys, interviews and competitor analysis together.

Below are the initial goals the client has set for the website:

To establish a digital marketing site to display our services

Build out client base and network, emphasis on trust and reliableness and being able to get things done

A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development.

Flywheels MVP is to:

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

Cart sorting is a technique in user experience design in which a person tests a group of subject experts or users to generate a category tree. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths.

By understanding how competitors layouts their navigation and how they structured their content, we are able to combine what we have collected from our client to produce our own card sort.

Hunter — One of Our Card Sort Testers

We went with an open card sort, where only content headings are shown. Testers are allowed to use existing cards as headings if they want or create their own heading if they wish so. This will enable us to see how different potential users expect specific information to be ordered in a certain way. During the process, we will only give a brief what the website is for, and ask them to sort it to their liking. We then gave the tester space so they can complete their task and allow us to avoid any psychological priming that would otherwise hinder the results of the card sort.

Hunter’s Completed Card Sort

Once the card sort is completed by the tester, we had a brief conversation on why they sorted it in the way they did. We also asked if there is any confusion thought-out the process.

An Affinity Diagram is a tool that gathers large amounts of language data (ideas, opinions, issues) and organizes them into groupings based on their natural relationships

With the MVP clear in our minds, we started making an affinity diagram to help de-clutter the information we collected. As this project has more qualitative data, we had more challenges in assuring that there were no repetitive data points before we sorted it.

An User Persona, is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.

We have created two user personas. One is for potential clients of Flywheel and another for potential digital marketing freelancers. We have created a storyboard for each user persona as well to give perspective on how a persona is able to utilize the website.

Persona 1 — Flywheel Potential Client
  • Hunter is looking for a digital agency for his business
  • Hunter got an recommendation from one of his trusted connections
  • Hunter went on and researched about Flywheel online
  • Hunter is satisfied about his research and got in touch with Flywheel
Persona 2 — Flywheel Potential Freelance Worker
  • John is looking for a digital marketing job
  • John does not want to work full time
  • He stumbled upon Flywheel’s website
  • John thinks Flywheel is a right fit for him, so he got in touch with Flywheel

User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.

With our personas in mind, we started sketching out the user flow to help us imagine how a user would navigate the website. It will also assist us in determining what the final goal is when a user is on the site. One of the challenges is identifying a final goal for a user as the website is content heavy. In the end, we determined that the goal for each persona is to land on either Contact Us page or Join Us page.

Final User Flow

3. Design & Testing

With our planning phase complete we started brainstorming ideas. One of our challenges for this project is the lack of initial content to play with. Without content, it was hard for us to really visualizes ideas during our design process.

A design studio is a workplace for designers and artisans engaged in conceiving, designing and developing new products or object.

Initial Sketches During Design Studio

For our design studio, we started by focusing on one specific screen. For each screen, we have two-minute sketches. With the four of us, we then discussed our take on each screen, so we are able to combine the best ideas together.

We focused on incorporating the changes that we have agreed on and started consolidating them into our Mi-Fi sketches on the computer.

Initial Sketches for Testing
Finalized Mid-Fi Sketches (Mobile & Desktop)
  • A head banner was used initially, a video was later introduced after talking with the client. This promotes higher trust when users land on the page.
  • The mute button was added after testing, subtitles and autoplay are also implemented for the video.
  • The case study page initially had two call to actions, it was later reduced to one call to action as users were confused and hesitating on which button to click.
Case Study reduced from 2 CTA to 1 CTA to avoid confusion
  • For our mobile screens, we started by condensing information from our desktop screens. The most common question we ask ourselves is: Does both persona need this when they are on the phone? After testing, we determined that improvements can be made in an environment where users are less likely to focus on a mobile device. Below is an example where we redesigned the services section of the home page. The use of the flywheel follows the Flywheel logo brand. Users will also be able to have an overview of the services, unlike the previous design.
Optimized Experience on Mobile Experience
  • The footer on the mobile version was removed, social media was moved to the navigation menu. The reason for such a change was because users are already scrolling a lot on a mobile screen and a footer is not required when there is a floating hamburger menu.
  • Testimonials are based on case study and are moved near the bottom. Testimonials are not as honest or effective as we found from our interviews.
Hi-Fi Mobile Screens
Hi-Fi Desktop Screens


5. Future Considerations

We have also given some future ideas that can be used in the future. Due to the scope and time of the project, we are unable to implement or adequately test the following ideas. More testing is needed to determine the feasibility of these ideas. Below are a few Mi-Fi sketches of our initial thoughts that can help Flywheel improve its processes of collecting enough information for both potential clients and potential freelancers.

Agency / Client — Login Screen

This is a login screen for clients. The idea behind it is Flywheel will provide login details to each client. The agency will also be able to log in, by adding agency privilege in the backend of the website.

Agency — Client Page

This is an agency landing page after log in. Here the agency will have the ability to see what ongoing projects they are working on. Flywheel can add, remove or achieve projects.

Agency View — Project page

On this page, employees are able to scroll left and right on the slider to update clients on project progress. The goal name, Last worked on by who and Time & Date can be added. This gives a brief overview for clients of the overall progress of the project.

Employees can also add team members to each project, so clients are able to see who is on the team.

Documents can also be uploaded for clients and agency to quickly view all documents all in one place.

Employees will be able to edit and modify different goals. A full orange circle means the goal /deliverable 0% completed, while a full green circle would indicate the goal/deliverable is 100% completed.

Note that the client-specific page will be near identical of the agency project page. Clients users will not be able to edit any sections besides uploading new documents or downloading documents.


Challenges & Learnings

  • Designing a website without content can be challenging
  • There are more factors to consider when designing for a responsive website
  • A well synchronized group makes a difference when faced with multiple hurdles and challenges within the project

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

Timothy Chan

Written by

Dyslexic, The bridge between Technology and Design is my passion and who doesn't like Food & Mini Adventures? I Vancouver, Canada

NYC Design

A publication for designers in New York and followers all around the world. Design thinking is what makes us write here on Medium to share with the designers of the world.

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