CoPilot AI : Website Redesign

8 Months Internship August 2020 - April 2021

Context

CoPilot AI is a B2B SaaS start-up focusing on LinkedIn Lead Generation based in Vancouver, BC.

At CoPilot AI, I worked in Marketing as a Communications Designer. In the 8 months of working at CoPilot AI, I worked with the team to redesign the company’s website and led all things design related. Additionally, as the only graphic designer at the company I worked on a wide range of different projects including designing Facebook Ads, EBooks, Social Media Content, Internal Employee Material, and Website related projects.

Scope and Responsibilities

For this project, the team wanted to completely redesign the company website, which included the visuals, content, and site flow. As the only designer on the team, my responsibilities included developing a new look and feel for the website, and leading the design and implementation.

This project required me to design all the visual elements including the website graphics, gifs, general content and layout of the webpages.

The Problem

Although the previous CoPilot AI Website did it’s intended job of informing users of the company’s product, services, and generated leads, the Team felt that both the visual design, copy, and user journey could be improved.

Userflow

One of the main issues we wanted to address with the new redesign is the user flow of the site. For example, with the old homepage (See Figure 1), it wasn’t clear where we intended the user to navigate to. Our goal was to have the user click on the “Book a Demo” button, however, with the overwhelming amount of content on the homepage the user tends to get lost and lose internet - increasing bounce rate. The original homepage also provided the user with too many options; buttons telling them to Learn More, How it Works, Read More.

With the redesign, we addressed this by limiting the content of the homepage; a brief outline of what we can provide of the user. It also gave them clear direction of where to click and navigate to because the only button provided to them is the “Book a Demo” button. If the user wanted to learn more, they can find “Features” and How it Work” in the navigation bar.

Figure 1: Screenshots of the original site.

Goals
1.
Provide the user with a simple and frictionless user journey.
2.
Update the visual design to be more modern and clean.
3.
Increase leads.
New Website Art Direction

With the new website, the team wanted to follow the original branding colours and fonts of CoPilot AI but renew the site with a more modern and clean look.

Figure 2: Stylescape created for the new art direction of the site.

Website Design Process

Each webpage development process included an initial meeting with my team to discuss the goal and overall content. I then start each webpage with a low fidelity mockup on Figma to propose to my team. After recieving approval I’ll go ahead and develope the graphics and create a high fidelity mockup on Figma. Through a short cycle of feedback and iterations, I come up with a final version on Figma before implementing it on WordPress (See Figure 3).

Figure 3: Figma prototypes that I created before implementation to help the team visualize and test out ideas.

Visual and Graphic Designs

One of the challenges of designing the graphics was making sure they represented the copy accurately, easy to understand, and aligned with the new art direction.

With the first graphic ever created for the site, we went through a few cycles of feedback and iterations to come up with the style for the rest of the graphics.

My initial idea was to use illustrated icons (See Figure 4) as the main source for my visuals, however, my team informed me with that within marketing, utilizing images of real people makes it feel more personal to the user and is a lot more attention grabbing. I took this feedback and applied it to what became the final look and feel of the website graphics (See Figure 5).

Figure 4: Initial graphic that I designed using illustrated icons.

Figure 5: Finalized graphic based on the team’s feedback.

I then went on to create more gifs and graphics for the website throughout my 8 months there.

Figure 6: A few examples of the animated gifs I designed for the site, view the rest of them here.

Takeaways

This was the biggest and most rewarding project that I have worked on at CoPilot AI. I really want to thank the marketing team for teaching me how to design with a marketing mindset by considering aspects such as how to capture the user’s attention, keep them engaged, and provide the right amount of information for the user.

It was my first time designing something that would be viewed by many people and seeing the results was extremely rewarding.

Results (Updated!)

Based on the data collected early 2021, for the homepage alone...

View the website here! I redesigned the navigation bar, footer and all webpages except the pages under “By Industry”.