Project

01

Expanding out the Fearless brand materials.

As our company grew, we received numerous requests to update our form landing page designs. I was tasked with redesigning our landing pages to align them more consistently with our brand visuals and main website.

Info

02

Role

Web Designer & Project Lead

Project duration

1 month (2023)

Tools

Hubspot (CMR), HTML, CSS, Javascript, JSON (Fields), Figma

Skills

Web Design, Project Management, UI/UX, HTML/CSS

Project

01

Expanding out the Fearless brand materials.

As our company grew, we received numerous requests to update our form landing page designs. I was tasked with redesigning our landing pages to align them more consistently with our brand visuals and main website.

Info

02

Role

Web Designer & Project Lead

Project duration

1 month (2023)

Tools

Hubspot (CMR), HTML, CSS, Javascript, JSON (Fields), Figma

Skills

Web Design, Project Management, UI/UX, HTML/CSS

Project

01

Expanding out the Fearless brand materials.

As our company grew, we received numerous requests to update our form landing page designs. I was tasked with redesigning our landing pages to align them more consistently with our brand visuals and main website.

Info

02

Role

Web Designer & Project Lead

Project duration

1 month (2023)

Tools

Hubspot (CMR), HTML, CSS, Javascript, JSON (Fields), Figma

Skills

Web Design, Project Management, UI/UX, HTML/CSS

Problem

03

The landing page design lacks visual appeal and user-friendly elements, which likely causes high bounce rates and low conversion rates in data metrics.

The landing page design lacks visual appeal and user-friendly elements, which likely causes high bounce rates and low conversion rates in data metrics.

The landing page design lacks visual appeal and user-friendly elements, which likely causes high bounce rates and low conversion rates in data metrics.

Users pointed out that the company's landing page designs lacked human-centered design principles and did not align with the company's brand identity. It was also noted that the landing pages had low user traction (low page views, form submissions, etc.).

In response to these concerns, I was tasked with updating the landing page designs that are more user-focused and flexible to customize.

Goal

04

Update landing page designs to increase user engagement and improve the team's workflow efficiency.

Update landing page designs to increase user engagement and improve the team's workflow efficiency.

Pre-research

05

Understanding the tools

Before starting this project, the communication team had already deployed some landing pages through Hubspot. They wanted to continue using HubSpot to track metrics on audience reach and other marketing data. Upon researching HubSpot, I discovered they offer tools for creating templates and themes. Using these tools, I began creating new templates.

Research and Planning

06

To achieve our goal, we first defined our key issues based on user interviews.

During this phase, I interviewed stakeholders and team members who would utilize this platform the most. After understanding the issues and goals, I proceeded to my next step: understanding the target audience and identifying areas for improvement.

Research and Planning

06

To achieve our goal, we first defined our key issues based on user interviews.

During this phase, I interviewed stakeholders and team members who would utilize this platform the most. After understanding the issues and goals, I proceeded to my next step: understanding the target audience and identifying areas for improvement.

Research and Planning

06

To achieve our goal, we first defined our key issues based on user interviews.

During this phase, I interviewed stakeholders and team members who would utilize this platform the most. After understanding the issues and goals, I proceeded to my next step: understanding the target audience and identifying areas for improvement.

Inconsistent design

with colors and font sizes, issue with content priority.

Inconsistent design

with colors and font sizes, issue with content priority.

Inconsistent design

with colors and font sizes, issue with content priority.

Customizing code

Team members did not know how to customize code to edit some of the smaller front-end elements.

Customizing code

Team members did not know how to customize code to edit some of the smaller front-end elements.

Customizing code

Team members did not know how to customize code to edit some of the smaller front-end elements.

Brand Identity is lost

Brand Identity is lost and does not match with Fearless' main website and materials.

Brand Identity is lost

Brand Identity is lost and does not match with Fearless' main website and materials.

Brand Identity is lost

Brand Identity is lost and does not match with Fearless' main website and materials.

Old landing page designs

Old landing page designs
Old landing page designs

Pre-design

07

However, it's important to note that the landing pages do not need to be more complex than they were before. They should remain simple for non-designers to edit.

Keeping this in mind, I rearranged and simplified existing content from the older landing pages while providing recommendations.

Low-Fidelity Design

08

Below is a preview of a highly refined lo-fi wireframe design. These designs utilize the old landing page layouts and content as the foundation for the new designs. Additionally, the communication team members requested to maintain the content and layout framework as much as possible to ensure brand consistency.

Design System

09

Creating consistency and a unique visual system.

To ensure consistency across different template iterations, I created a high-level design system. Although there are some additional designed components that weren't used in this project, they may prove useful for future templates. The primary advantage of establishing a design system early on is simplifying the development process, allowing developers (including myself in this case) to efficiently implement design specifications into code. For example, using rem/em units for font sizes enhances accessibility for users who have adjusted their browser's default font size.

Design System

09

Creating consistency and a unique visual system.

To ensure consistency across different template iterations, I created a high-level design system. Although there are some additional designed components that weren't used in this project, they may prove useful for future templates. The primary advantage of establishing a design system early on is simplifying the development process, allowing developers (including myself in this case) to efficiently implement design specifications into code. For example, using rem/em units for font sizes enhances accessibility for users who have adjusted their browser's default font size.

Design System

09

Creating consistency and a unique visual system.

To ensure consistency across different template iterations, I created a high-level design system. Although there are some additional designed components that weren't used in this project, they may prove useful for future templates. The primary advantage of establishing a design system early on is simplifying the development process, allowing developers (including myself in this case) to efficiently implement design specifications into code. For example, using rem/em units for font sizes enhances accessibility for users who have adjusted their browser's default font size.

Fearless landing page design system
Fearless landing page design system

Template Designs

10

Designing template layouts to get a rough idea of content format.

Below are some hi-fi designs of the template layouts. They do not include finalized content because we intend to repurpose these page designs for different events or campaigns. Additionally, I provided the team with variations (colors, text alignment, etc.) for each layout section, although these are not shown here.Once I finalized one of the main landing page designs, I started recreating them using HubSpot's template creation platform. This phase involved utilizing the existing tools available in the theme templates. Additionally, I customized the theme's code (HTML/JS/JSON/CSS) to integrate our brand colors and fonts, ensuring other team members could easily apply the theme settings.

Template Designs

10

Designing template layouts to get a rough idea of content format.

Below are some hi-fi designs of the template layouts. They do not include finalized content because we intend to repurpose these page designs for different events or campaigns. Additionally, I provided the team with variations (colors, text alignment, etc.) for each layout section, although these are not shown here.Once I finalized one of the main landing page designs, I started recreating them using HubSpot's template creation platform. This phase involved utilizing the existing tools available in the theme templates. Additionally, I customized the theme's code (HTML/JS/JSON/CSS) to integrate our brand colors and fonts, ensuring other team members could easily apply the theme settings.

Template Designs

10

Designing template layouts to get a rough idea of content format.

Below are some hi-fi designs of the template layouts. They do not include finalized content because we intend to repurpose these page designs for different events or campaigns. Additionally, I provided the team with variations (colors, text alignment, etc.) for each layout section, although these are not shown here.Once I finalized one of the main landing page designs, I started recreating them using HubSpot's template creation platform. This phase involved utilizing the existing tools available in the theme templates. Additionally, I customized the theme's code (HTML/JS/JSON/CSS) to integrate our brand colors and fonts, ensuring other team members could easily apply the theme settings.

Fearless landing page design system
Fearless landing page design system
Fearless landing page design system

Results

11

Successfully met project goals through the rebrand.

After creating various template pages, I began sharing drafts with the team for feedback. Their reaction was very positive; they appreciated the new look and the functionality of the theme template tools, which eliminated the need to duplicate previously deployed pages.

Results

11

Successfully met project goals through the rebrand.

After creating various template pages, I began sharing drafts with the team for feedback. Their reaction was very positive; they appreciated the new look and the functionality of the theme template tools, which eliminated the need to duplicate previously deployed pages.

Results

11

Successfully met project goals through the rebrand.

After creating various template pages, I began sharing drafts with the team for feedback. Their reaction was very positive; they appreciated the new look and the functionality of the theme template tools, which eliminated the need to duplicate previously deployed pages.

Metrics: Old vs new (max ~1 year)

~300%

increase in form submissions (avg)

~300%

increase in form submissions (avg)

~300%

increase in form submissions (avg)

~300%

increase in form submissions (avg)

173%

increase in page view time (avg)

173%

increase in page view time (avg)

173%

increase in page view time (avg)

173%

increase in page view time (avg)

~400%

increase in page views (avg)

~400%

increase in page views (avg)

~400%

increase in page views (avg)

~400%

increase in page views (avg)

Key Achievements

Higher

user engagement based on KPI.

More flexibility

with HubSpot templating tools.

More flexibility

with HubSpot templating tools.

More flexibility

with HubSpot templating tools.

Consistent

with layout design and brand identity visuals.

Consistency

with layout design and brand identity visuals.

Consistency

with layout design and brand identity visuals.

Consistency

with layout design and brand identity visuals.

Faster workflow

between team members for campaigns and events.

Faster workflow

between team members for campaigns and events.

Faster workflow

between team members for campaigns and events.

Faster workflow

between team members for campaigns and events.

Reflection

12

Reflecting on what I made and what I should do next.

From this project, I learned the importance of emphasizing brand consistency and alignment to ensure reliability and enhance user confidence. By improving the page designs, we were able to address user concerns and encourage user interaction.

Reflection

12

Reflecting on what I made and what I should do next.

From this project, I learned the importance of emphasizing brand consistency and alignment to ensure reliability and enhance user confidence. By improving the page designs, we were able to address user concerns and encourage user interaction.

Reflection

12

Reflecting on what I made and what I should do next.

From this project, I learned the importance of emphasizing brand consistency and alignment to ensure reliability and enhance user confidence. By improving the page designs, we were able to address user concerns and encourage user interaction.

  1. Taking ownership and refining UI/UX consistency.

    As the sole designer on the team, I developed my leadership to take on the ownership of Hubspot's template and theme design tools to enhance our landing pages with open communication throughout iterations.

  2. Creating and maintaining a design system.

    My past experience in digital design provided me with insights and skillsets into creating and managing a consistent, responsive, and engaging design system. I stayed up to date with new tools and features to enhance design and development efficiency.

  3. Adapting to evolve requirements and encourage user engagement.

    As a company proud to offer human-centered design services, it was important for the landing pages to represent our capabilities. Initially, the project began as a request to update the design for better visual appeal. However, as it progressed, I prioritized enhancing user engagement after consulting with stakeholders and adapting to evolving business priorities.

Reflection

13

Next steps…

Due to time constraints, I was unable to gather sufficient user data to fully optimize the design and enhance user interactions. Given the opportunity to improve the landing pages and templates, I would conduct a thorough redesign incorporating KPIs and direct user data (such as interviews and surveys).

Reflection

13

Due to time constraints, I was unable to gather sufficient user data to fully optimize the design and enhance user interactions. Given the opportunity to improve the landing pages and templates, I would conduct a thorough redesign incorporating KPIs and direct user data (such as interviews and surveys).

Next steps…

Reflection

13

Next steps…

Due to time constraints, I was unable to gather sufficient user data to fully optimize the design and enhance user interactions. Given the opportunity to improve the landing pages and templates, I would conduct a thorough redesign incorporating KPIs and direct user data (such as interviews and surveys).

Thoughts about the results

Background image of a UMBC Review mockup product

Want to collaborate?

My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.

Work with me

Work with me

Background image of a UMBC Review mockup product

Want to collaborate?

My work is vibrant, hand-crafted, and professional in everyday whimsy. I’m currently scheduling clients for illustration, branding, and other design projects! Give me a holler if you think we can make something beautiful together.

Work with me

Work with me

Want to get in touch? Let’s chat

aphan@phanamy.com

LinkedIn

Github

©2024 Amy Phan. All Rights Reserved.

Want to get in touch? Let’s chat

aphan@phanamy.com

LinkedIn

Github

©2024 Amy Phan. All Rights Reserved.

Want to get in touch? Let’s chat

aphan@phanamy.com

LinkedIn

Github

©2024 Amy Phan. All Rights Reserved.

Old page designs