Flywheel Digital — UX Case Study
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
Domain Research

What is 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.
Where does Flywheel Stand as a Digital Marketing Agency?
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.
What Flywheel Offers

“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.
Survey Questions
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
Interviews allow for more in-depth questioning of survey questions. From our interviews, we have grouped it into four major categories.
1. Client factors of choosing agency
- 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
2. Client frustrations
- 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
3. Feature requests
- 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.
Competitors
Now that we know more about the frustrations of clients with various digital marketing agencies, we dived into functionality of other digital marketing sites.

We first explored various competitors website to see how information is broken down on each website:
At first we explored various competitors website to see how information is broken down on each website.
1. Brightweb
Functionality-Abstract, Interactive Scrolling
Navigation- Drop down menu on top
2. Croud
Functionality — Section based
Navigation — Side navigation bar, no drop down menu
3. Thrivedigital
Functionality — Full screen slide based
Navigation — Hamburger Menu
4. Major Tom
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:
Project Goal
To establish a digital marketing site to display our services
Business Goal
Build out client base and network, emphasis on trust and reliableness and being able to get things done
The Minimum Viable Product
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
Card Sort
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.

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.

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.
Affinity Diagram
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.
User Persona & Storyboard
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— Potential Client of Flywheel

- 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 — Potential Freelance Worker of Flywheel

- 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
Userflow
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.

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.
Design Studio
A design studio is a workplace for designers and artisans engaged in conceiving, designing and developing new products or object.

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.
Mid-Fi Sketches
We focused on incorporating the changes that we have agreed on and started consolidating them into our Mi-Fi sketches on the computer.


Key Changes after testing Mid-Fi
- 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.

- 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.

- 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.
High-Fi Sketches


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.

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.

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.

Overview
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.
Your Team
Employees can also add team members to each project, so clients are able to see who is on the team.
Your Documents
Documents can also be uploaded for clients and agency to quickly view all documents all in one place.
Goals / Deliverables
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.
Client Specific Project Page
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

