Affiliate customer portal

Created custom-built affiliate marketing portal to drive leads for small business tax credit program.

Problem

Originally, the marketing team launched a portal on Hubspot to leverage existing customers to help generate new business for our tax credit program. The initial launch was unsuccessful due to low user activity and low production of affiliate campaigns.

Solution

The objective was to develop a custom-built solution to create a frictionless user experience for affiliate partners to effectively launch and track affiliate marketing campaigns to promote various credits and incentives to small business owners. The primary focus was to streamline and simplify the experience.

Process

Once I was assigned to be the design lead for this project, my first step was to set a kickoff meeting with our key stakeholders to clearly understand the challenges, requirements, timeing, and business objectives for the project. I then turned the requirements into epics and user stories to properly plan out the project scope. From there, I reviewed the user feedback to begin diagramming the user flows to best solve user challenges. Once the user flows were reviewed and approved, I then moved to the wireframing and design phase, leveraging our existing design system to establish a clear and consistent visual experience. Once all designs were approved, I then worked with our engineering teams to transition into the build phase of the project and plan the release schedule for MVP delivery.

Role

I was the lead designer responsible for end-to-end design and execution.

Design process

Requirements gathering

Customer interviews

UI/UX audit

User flows

Wireframes

Mobile designs

Desktop designs

Engineering hand-off

Customer interviews

In order to understand the challenges, I led the product team in conducting user interviews with the initial pool of affiliate customers to get insights into customer pain points when using the existing affiliates portal. After analyzing the user feedback, I identified the following pain points:

Didn’t use the site because it wasn’t mobile-friendly
Had difficulty creating campaigns
Couldn’t access campaign metrics
Found the user overall experience clunky and confusing

John

Business owner

Age

Industry

Location

35

Construction

Virginia

User persona

John: Business owner

"I'm a business owner on the go and I do most of my online business on my phone. The current experience requires me to be at my desk so I don't use it."

"It was difficult for me to find the button to create a new campaign. After searching around, I eventually found it buried on the homepage. It would be great for this action to be more accessible as it's a crucial part of the site."

"Once I create a campaign, I lose any insights into how it's performing. I need ta place where I can see all of my campaigns so I can track the number of users who have interacted with them."

Problem

The Hubspot experience does not satisfy John's needs as an affiliate customer. The current site is not moble-frinedly and does not allow him to view and manage his campaigns.

Strategy

We will focus on a mobile-first experience to align with John's on-the-go lifestyle. We will also prioritize a focus on creating and managing campaigns for him to track the effectiveness of his campaign efforts.

UI/UX audit

In order to address customer feedback concerning the the overall experience, I performed an audit of the Hubspot build to pinpoint user challenges. I noticed inconsistencies between various data views as well as data that missing alltogether, such as campaign insights. I also noticed primary calls to action were buried within a single page and not accessible throughout the rest of the site. After attempting to correct these issues within Hubspot, I determined we needed a custom-built solution to begin course-correcting our affiliates program.

Homepage

Primary CTAs are buried within homepage

Lack of content heirarchy

Not mobile-friendly

Leads view

Data is cluttered and disorganized

Inconsistency between list views

Not mobile-friendly

Applications view

Not enough data displayed for applications

Inconsistency between list views

Not mobile-friendly

Setting expectations

Kickoff

Before I could begin, I met with stakeholders to present my findings and understand objectives and timelines for the project. During our discussion, I discovered the product team only had 4 weeks to design and develop a custom-built solution. After getting buy-in to begin work, I then set out to identify and prioritize the critical goals for MVP to ensure a timely and successful launch.

Objectives

To ensure a successful and timely launch, I aligned the business on the following priorities:

Mobile-friendly user experience

Drive conversion through affiliate marketing campaigns

Allow affiliate customers to monitor campaign insights

UI/UX overhaul

After diving into our design system and incorporating the feedback from our customer interviews, I delivered the following designs as part of our overall user experience overhaul. I focused on creating a responsive expereince that allowed users to easily navigate the portal irrespective of device type. I also ensured that primary and secondary CTAs were omnipresent throughout the site, allowing users to easily initiate marketing campaigns. I also needed to create a new screen for users to view/manage campaigns and monitor KPIs.

Overview

1Key metrics

Users can track how much they’ve earned in commissions, along with applications in progress.

2Primary CTA

Omnipresent CTA allows users to easily create new marketing campaigns.

3Secondary CTA

Omnipresent CTA allows users to easily copy link campaign link for custom messages.

4Resources

Users can access resources to guide them in their marketing efforts.

Overview

1Key metrics

Users can track how much they’ve earned in commissions, along with applications in progress.

2Primary CTA

Omnipresent CTA allows users to easily create new marketing campaigns.

3Secondary CTA

Omnipresent CTA allows users to easily copy link campaign link for custom messages.

4Resources

Users can access resources to guide them in their marketing efforts.

Applications

1Filters

Users can filter list based on application statuses.

2List view

Organized list view displaying key information for each application.

Campaigns

1Filters

Users can filter list based on campaign type.

2Edit/delete

Users can edit or delete each campaign.

2Campaign KPIs

Users can view KPIs to understand campaign performance.

User flow

The first step in the design process was to establish the overall flows for the main functions of the affiliates portal. We needed a seamless way for users to add contacts into their portal, as well as having the ability to copy their affiliate link for marketing outreach. I wanted to create a frictionless experience with as few clicks/taps as possible.

Mobile designs

Taking a mobile-first approach, I began to design the UI layer of the portal. I began by leveraging our internal design system and brand guidelines to establish the overall look and feel, applying our colors, font families, and layout. My approach was to create a clean and intuitive interface, removing as much clutter as possible, allowing for a more frictionless experience within the mobile view. Once the light mode style was established, I then created a dark mode version for the entire portal.

Sign in
Applications
Campaigns
Resources
Overview
Flyout
Add contact
Confirmation
Sign in
Applications
Campaigns
Resources
Overview
Flyout
Add contact
Confirmation

Desktop designs

After the mobile and tablet experiences were established, I then worked to take full advantage of the maximum real estate available within the desktop view. I wanted to reduce the amount of touchpoints required for the user to access the various action items within the portal. This allowed for the most optimal experience for the user when managing their contacts and creating campaigns to drive business objectives.

Sign in
Home
Applications
Campaigns
Add contact
Confirmation
Resources

Dev hand-off

Once all designs and flows were approved by our stakeholders, I then packaged up the designs in Figma for engineering hand-off. I organized the file based on the main sections of the platform and called out the various device sizes. The file structure matched the user stories from which our engineering and product teams were working. This allowed our engineers to easily identify each section they were responsible for shipping. I set up several sessions with our dev teams to walk through the various sections of the file to mitigate any questions during development.