How I transformed a boring webpage into a stunning showcase of Flits’ Partner Program

Preview of the re-designed Flits Partners webpage. Now Live on getflits.com (Click on the image)

As a product design intern at Flits, I was always looking for opportunities to improve the user experience and the business goals of the company. Flits is a customer account app that helps Shopify merchants create personalized and engaging experiences for their customers. Flits also has a partner program that allows agencies, freelancers, and influencers to earn commissions by referring Flits to their clients and audiences.

There was this one webpage that was supposed to showcase the benefits of the partner program and encourage sign-ups. To my surprise, the webpage was poorly designed, not aligned with Flits’ brand guidelines, and not responsive. It also lacked clear calls to action, proper layout, and relevant illustrations. I decided to take on the challenge of re-designing the webpage and make it more appealing and effective.

The problem

Preview of the old Flits Partners webpage

The main problems of the old webpage were:

• Poor visual design: The webpage did not adhere to Flits’ brand guidelines and other webpages. It also had poor typography, a lack of contrast, and poor colour choices.
• Lack of clear CTAs: The webpage did not have clear and consistent buttons or links to guide the user to sign up for the partner program or learn more about it.

• No proper layout: The webpage did not have a clear structure or hierarchy of information. It also had too much text and not enough white space.

• Not responsive: The webpage did not adapt well to different screen sizes and devices. It was hard to read and navigate on mobile devices.
• Not aligned with business goals: The webpage did not clearly communicate the value proposition and benefits of the partner program. It also did not showcase the success stories or testimonials of existing partners.
• Lack of relevant illustrations: The webpage did not have any visuals or graphics that could illustrate the features and benefits of the partner program. It also did not have any branding elements that could make it stand out.

The solution

I followed a user-centered design process to re-design the webpage, which involved:

• Researching the target audience, competitors, and best practices
• Sketching and wireframing different layout options
• Creating high-fidelity mockups using Figma
• Testing and iterating on the design based on feedback

Here are some of the key design decisions and solutions that I came up with:

An interactive landing page

I decided to create an interactive landing page that would capture the user’s attention and interest. To add to this, I added an interactive illustration witha mouse hover effect. We used a catchy headline that summarises the value proposition of the partner program: “Partnership with right people creates incredible impact”. I also added a prominent button that invites the user to join the partner program.

A modernised layout

I wanted to create a modern and clean layout that would make the webpage easy to read and navigate. I used a grid system to organize the content into sections and columns. I also used white space, contrast, and alignment to create visual balance and harmony. I also added icons, headings, and bullet points to highlight the main features and benefits of the partner program.

A bento grid for the features with interactive illustrations

I wanted to showcase the features and benefits of the partner program in a more engaging and visual way. I used a bento grid layout that allows me to display multiple features in a compact and flexible way. I also added interactive illustrations that animate on hover or click, and show how each feature works. For example, one illustration shows how the user can track their referrals and commissions on a dashboard, another shows how they can access exclusive resources and support from Flits, etc.

A proper system for CTAs and buttons

I wanted to make sure that the user has clear and consistent ways to sign up for the partner program or learn more about it. I created a system for CTAs and buttons that follows Flits’ brand guidelines and uses different colors, shapes, and sizes to indicate different levels of importance and urgency.

A responsive design

I wanted to make sure that the webpage adapts well to different screen sizes and devices. I used Figma’s auto-layout feature to create responsive components that resize and reposition themselves according to the viewport width. I tested the webpage on various devices using Figma’s device frames feature.

A modern look by adding various micro-interactions

I wanted to make the webpage more modern and dynamic by adding various micro-interactions that enhance the user experience and feedback. I used Figma’s prototyping and animation features to create subtle and smooth transitions, such as color changes, scaling, fading, sliding, etc. For example, I added a color change effect for different sections on hover, a scaling effect for the illustrations on click, a fading effect for the testimonials on scroll, etc.

The results

The re-designed webpage was well-received by both internal and external stakeholders. It helped Flits promote their partner program and increase sign-ups and conversions. Some of the results achieved by the webpage were:

• Improved visual design and brand consistency
• Increased clarity and usability
• Increased engagement and interaction
• Increased responsiveness and accessibility
• Increased alignment with business goals and value proposition
• Increased trust and credibility

UX Laws associated with actions and design decisions

Some of the UX laws that I applied in my re-design process were:

• Gestalt Principles: These principles describe how humans perceive and organize visual elements into meaningful groups or patterns. I used these principles to create a clear and coherent layout for the webpage, using proximity, similarity, continuity, closure, etc.
• Jakob’s Law: This law states that users spend most of their time on other sites, and they prefer your site to work the same way as the sites they already know. I used this law to follow the common conventions and best practices for web design, such as placing the logo on the top left corner, using a hamburger menu for mobile devices, using a footer for secondary links, etc.
• Law of Common Region: This law states that elements tend to be perceived into groups if they are shared within the same region. I used this law to create sections and cards for the webpage, using different background colors or borders to separate them from each other.
• Peak-End Rule: This rule states that users judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. I used this rule to create a strong impression at the beginning and end of the webpage, using a catchy headline, a prominent CTA button, and a testimonial.

Thanks a lot for reading till the end. If you have any questions, suggestions or feedback, please do share them in the comments.

Signing off,
Adi