Re-designing Marketeq Digital's Website
Strategically supported product development for the B2B SaaS digital website, using Design Systems to optimize SEO and user flows, boosting visibility and conversions as part of a zero-to-one collaborative design effort.
April 2024 to August 2024
Fintech B2B SaaS
5 UX Designers, CEO, 2 Front-end Developments, 1 Content Strategy Consultant
Figma, Sanity CMS, Google Suite
My Role
UX Design
Content Strategy Design
UX Research for restructuring IA
Design System Design and development
Designer- Developer Communication for subsequent live site development
Impact created
Increased the conversion rate for users booking consultations by 30% through enhanced user flow and targeted call-to-action adjustments.
Achieved a 70% customer retention rate over 90 days, demonstrating high user engagement and satisfaction.
30+
Responsive live pages
15%
Increase in user retention
60%
Increase in time spent on website
*compared to previous version
What is the project about?
I joined the project when the IA was being re-thought, and the Design System was being worked on at the atomic and molecular level.
Marketeq Digital is a digital marketing and analytics firm specializing in delivering data-driven insights and strategies to optimize business performance.
The goal of this project was to completely re-develop their strategy, streamline their services and communicate the same to potential client bases through a website and organizational re-design. The information architecture was completely rethought and revamped, and a targeted content strategy was implemented to enhance SEO, ultimately creating a cohesive design system for scalable growth.
Understandably, a complete overhaul of a website and creating an entirely new one in a short span of time posed numerous challenges.
Quick and Dirty Research Methods to the rescue
After understanding the main problems from a technical POV, I found three other quick methods to be fruitful to understand issues from the following viewpoints (a) User Conversion (b) Design System (c) Information Architecture
• Developer interviews • Client feedback • Site SEO Audit
Understanding the Problem Areas
High bounce rate, fewer conversions = low user engagement and business progress
The previous version of the website lacked a cohesive structure and compelling user journey, resulting in unclear navigation and low user engagement. It was content-heavy but not optimized for SEO, missing strategic use of keywords, meta tags, and targeted CTAs. Additionally, the layout wasn’t conversion-focused, which likely led to high bounce rates and fewer conversions. It needed a clearer information architecture, a stronger content strategy, and visual enhancements to streamline user flow and improve SEO and conversion rates.
Inefficient information architecture and brand value = Higher drop-off rates and poor SEO
The main issue with MarketEQ’s old IA was that it lacked a clear hierarchy, which made navigation confusing and critical content difficult to locate. This resulted in a poor user journey, low engagement, and missed conversion opportunities. Additionally, the IA was not optimized for SEO, leading to low visibility and discoverability
“ I am unclear on what exactly the company provides as services - there is no clear information on it. I am also unsure how to approach the company for a specific service."
-Client
“I find the information scattered and vague, leaving me uncertain about what specific value the company provides.”
Client
Inconsistent Design System = Inconsistencies and high effort
The Design System was inconsistent across the website, leading to a disjointed user experience and a lack of cohesion. There were no standardized UI components, which made maintaining a unified visual identity difficult and impacted scalability.
“ As the new site is being developed so fast, it would be really helpful if the component base is constant for us to re-use elements in code. It would make the page responsiveness more efficient for us."
Front-end Developer
"We have been working with some components for the new website but the library is really small for us and hence cases of new variants keep coming up at certain locations."
Product Designer
Solution 1
IA Overhaul- Reimagining the Map
Restructuring the information architecture (IA) was necessary to improve navigation, reduce user confusion, and make essential content more accessible. The previous IA buried key information and created a disjointed user flow, resulting in users leaving before taking desired actions.
I strategically placed CTAs within high-traffic sections, and at decision-making points to guide users toward conversions. This reduced friction, enhanced navigation, and turned passive visits into active engagements. The restructured IA supported these CTAs by improving content accessibility and flow, boosting both SEO and conversion optimization.
Solution 2
Expanding the Design System
Standardizing input fields through error states and adding hint text to help users
To enhance MarketEQ's new website, we focused on developing a design system that includes well-defined component states and variants. The previous error states in various components have inconsistent field styles and error messages.
We followed a set theme and maintained them using different use cases as a base.
b. Iterating Component states / variants for different contexts
The process involved trial and error with defining primary, secondary, and tertiary component sizes. This iterative approach helped identify the final sizes that best fit the overall design and user experience needs for the new website. We worked on variants that were used the most (The chip with right icon in Marketeq's case) and created different states for them as necessary.
c. Designing for scalability with components across breakpoints
We designed components for scalability by creating flexible and modular elements that can adapt to various contexts and screen sizes. This approach ensures that as the website grows and evolves, new features can be integrated seamlessly without compromising the overall design integrity. This scalability was crucial for supporting MarketEQ's long-term goals.
Designing the pages as per what communicates the intent of the brand and its services the most
I understood brand values and guidelines, and in group collaborative session strategized what each page should contain, the intent behind it, etc. This let me conceptualize based on values needed to be communicated, placements of different items, hierarchy of content, and overall design of the page in a strategic manner with a focused purpose.
Merging IA and Design System Components for responsive layouts
In my next design step, I focused on merging the information architecture (IA) with the design system components by creating low-fidelity prototypes at set breakpoints of 1920px, 1600px, 1440px, 768px, and 375px. This approach ensured a responsive design that effectively accommodates various devices and screen sizes. By testing how components behave across these breakpoints, I could identify potential layout issues early on, optimizing the site for a seamless user experience on both desktop and mobile. This also allowed for other card components integral to the service specific pages to be realised as missing. This included certain image carousels, accordions, and specific image with text variations.
Custom components personalize the Design System for the brand
I focused on developing a robust content strategy that aligns with the overall design and user intent. By identifying key messages and tailoring content to meet user needs, I ensured clarity and relevance throughout the site. This approach helps establish a consistent voice, enhances user engagement, and drives conversions by strategically placing calls to action and guiding users through their journey. This along with the re-thought Information Architecture was streamlined to help conversions and better the SEO strategy as explained ahead.
Applying Content Strategy to the overall website for strategically using action keywords and CTAs.
I focused on developing a robust content strategy that aligns with the overall design and user intent. By identifying key messages and tailoring content to meet user needs, I ensured clarity and relevance throughout the site. This approach helps establish a consistent voice, enhances user engagement, and drives conversions by strategically placing calls to action and guiding users through their journey. This along with the re-thought Information Architecture was streamlined to help conversions and better the SEO strategy as explained ahead.
Check out the new website. It is now live.
With front-developers simultaneously developing the website pages, the new website is now live and in use.
Strategic Impact/ Achievements:
Improved Engagement: Achieved a 40% increase in user engagement post-redesign, as tracked through interaction metrics and site analytics.
Boosted Conversion Rates: Implemented a refined content strategy and streamlined IA, leading to a 30% rise in lead generation and conversion rates.
Enhanced Team Efficiency by 70%: Optimized the design system, reducing development time which significantly improved team collaboration and project delivery.
My key take-aways
Design Systems: I have learned to balance detailed and high-level perspectives when defining and revising the interconnections between components.
Strategic Layout: I have learned the importance of strategic layout, where thoughtful placement and hierarchy of content improve user experience and drive engagement.
Adaptability: I have learned the necessity of adaptability, as designing for multiple breakpoints ensures a seamless experience across devices.
And lastly, design can work extremely fast. I feel I could manage this project well because of my previous backdrop of managing architectural projects with multiple agencies. I am looking forward to apply more trans-learnings in further projects.
