Website ReDesign
Redesigning and building a website for an influencer marketing agency, focusing on creating a usable and engaging experience for brands and influencers to connect and collaborate.
Role
Ui Design
Date
February 2023
Relevance
Influerncer marketing
Tools
Figma, Wix, Photoshop
DISCOVER
The Case Study Focus
What is Flutch
Flutch is an influencer marketing agency that is like a bridge that connects brands with influencers, making collaborations easy and effective.
On top of that, Flutch also manages influencers exclusively, helping them analyze their performance, enhance their content, and secure brand deals.
The Task at Hand
was to reimagine and rebuild their website from the ground up, a fresh approach.
It should reflect their brand personality while ensuring it is both user-friendly and visually engaging.
I set out to redesign the website from scratch, ensuring it would meet both functional and aesthetic goals, and align with Flutch's values and target audience.
User Research
In order to create a website that would effectively serve Flutch’s goals, it was crucial to understand the core target audience.
The services range from connecting brands with influencers for mutually beneficial partnerships to managing influencers.
Essentially, the research process focused on identifying the needs and behaviors of two main user groups - Brands looking to collaborate with influencers and Influencers seeking brand partnerships.
I conducted interviews with key team members at Flutch to understand their vision, brand goals, and existing challenges. This gave me insight into the type of clients they serve and the expectations they have for the website.
Stakeholder Interview
To gain a clear understanding of what I would be designing for, I spoke with the CEO, Co-founder, and my direct supervisors. Their insights helped shape the direction of the website redesign.
How would you describe Flutch’s brand personality in three words?
What is the primary goal of the website? Is it to attract more brands, onboard influencers, or both?
What makes Flutch different from other influencer marketing agencies?
Who are the main users of the website?
What industries do Flutch’s brand clients typically belong to?
What challenges do brands face when trying to find the right influencers?
How do users currently interact with the website?
What do you think is missing from the current site?
Are there any elements of the current website that you would like to keep or improve upon?
Are there any competitor websites you admire? What do you like about them? What would you like to do differently from them?
What are the key goals for the new website?
What specific actions do you want users to take on the site?
What type of visual style best represents Flutch?
Do you have any brand guidelines (logos, colors, typography, etc.) to follow?
Do you have any brand guidelines (logos, colors, typography, etc.) to follow?
What key sections or pages do you want on the new site?
What kind of storytelling or content strategy should be used? Should we highlight success stories, case studies, influencer testimonials?
Will the website need any third-party integrations?
Who will manage the website content after launch?
Will there be a need for dynamic content (like live influencer stats, video content, etc.)?
How frequently do you expect updates to be made to the website?
The Competitors
Understanding competitors like OPA, Chtrbox, and Cofluencer provided key insights to make Flutch's website stand out:
User Experience & Automation → OPA’s tech-driven automation shows the need for an intuitive interface with real-time updates for brands and influencers.
Data-Driven Matching → Chtrbox’s focus on smart influencer selection highlights the importance of clear value propositions, analytics, and credibility.
Brand Visibility → The minimal visibility of Cofluencer highlights the necessity of effective branding, content marketing to guarantee increased market awareness.
DEFINE
Affinity Map
I looked at the user data that described the influencers' and brands' requirements. I created an Affinity Map which helped in arranging insights, putting opportunities, requirements, and common pain points together.
Research insights
Key Takeaways for Website Redesign
✔ Separate user journeys → Clear paths for brands & influencers.
✔ Smart dashboards → Real-time insights for brands & influencers about campaigns.
✔ Stronger trust signals → Verified influencers, testimonials & brand success stories.
✔ Personalized Influencer Profiles → Stronger showcase to attract brands.
✔ Exclusive Brand-Influencer Matching
Brand Guidelines
It was essential to ensure that the website’s aesthetic was consistent with Flutch's brand identity, particularly with the use of their signature primary blue color, which helps strengthen brand recognition.
To align with Flutch’s brand identity and ensure the website communicates professionalism and clarity, the following design principles were followed.
Minimal & Impactful Design – A balance of whitespace and structured content for a clutter-free, professional look.
Engaging Media – High-quality images and interactive elements to keep users engaged.
Mobile Responsiveness – Designed for smooth accessibility across different devices.
Platform for the Site
Why Wix?
Wix was required for the website design due to its ease of use and flexibility. Since the website will need to be updated frequently—whether by me, my colleague, or a supervisor—Wix offers a user-friendly platform that allows easy content management, with its built-in tools making it easy to make quick changes and updates without requiring technical expertise.
DESIGN
Landing with the Homepage
I focused on the homepage—the most important touchpoint for both brands and influencers. Using Figma, I crafted a layout that balanced branding with clean UX. I stuck to Flutch’s signature blue and added supportive/supposed images. Once done, I shared it with the team for feedback, and they loved it! The positive response gave me a clear direction for the rest of the site.
I moved on to Wix to recreate the homepage layout. I translated the Figma design into a working prototype—carefully adjusting spacing, typography, and image placements to match the original as closely as possible. I explored Wix’s design flexibility, customizing components and using their editor tools to maintain visual consistency.
Adjustments
Contact form:
Moving into user testing, I shared the live Wix prototype with users and discussed the feedback with the team. One key insight stood out: the contact form wasn’t getting noticed quickly enough. Users either missed it or had to scroll too much to reach it.
We decided to reposition the contact form right at the top of the homepage. This simple change made it easier for users to connect instantly.
CTA:
To boost user engagement and create a smoother flow, I needed to place relevant CTAs after each major section all across the home page and the website. For instance, after showcasing brand success stories, I added a “Get in touch” button, while the influencer section featured a “Join as an Influencer” CTA, etc.
Design System
I created a simple design system based on Wix’s built-in tools.
I chose clean serif fonts that added a touch of sophistication while keeping the content highly readable.
For buttons, I adapted Wix’s components, using consistent sizing, padding, and hover states across the site, along with subtle animations and interactions
The Screens
DELIVER
View Hi-Fidelity Prototype
A sample prototype of the actual website.