PRODUCT OVERVIEW

ZQlik is a B2B SaaS platform that helps mid-sized businesses streamline their data analytics workflows through automated reporting and real-time dashboard insights. The existing website was failing to communicate what ZQlik actually does and how it solves specific pain points for operations managers and data teams. Users were landing on the homepage, getting confused by vague messaging, and leaving before they understood the core value proposition or reached the signup flow.

GOALS

Clarify the value proposition immediately. The homepage needed to communicate ZQlik's core offering within three seconds of landing, so visitors would understand exactly what problem the platform solves.

Reduce friction in the conversion funnel. The signup process had too many steps and fields, causing high abandonment rates, especially on mobile devices.

Optimize for mobile responsiveness. Over 40% of traffic was coming from mobile, but the existing layout was barely usable on smaller screens.

Launch before the end-of-year marketing campaign. Missing the December 31st deadline would mean losing out on a major paid advertising push and letting competitors capture high-intent leads.

Improve information architecture. The existing navigation structure buried key product information three clicks deep, making it impossible for visitors to self-educate.

Establish design consistency across breakpoints. The old site had inconsistent spacing, typography, and component behavior across desktop, tablet, and mobile, eroding trust.

MY ROLE

Responsibilities. I owned the entire website redesign from strategy through final handoff, including auditing the existing conversion funnel, defining the new information architecture, designing all responsive layouts in Figma, creating interactive prototypes for stakeholder alignment, and preparing developer-ready specs. I also made critical product decisions around the signup flow structure and prioritization of content blocks to meet the aggressive timeline.

Collaboration. I worked directly with the CEO and marketing lead to align on messaging hierarchy and campaign goals, collaborated daily with two front-end engineers to ensure the design system was technically feasible within the two-week window, and coordinated with the content strategist to refine microcopy for the hero section and primary call-to-action buttons.

USER RESEARCH

Existing users didn't understand the product before signing up. Post-signup interviews revealed that 60% of new users had misconceptions about what ZQlik actually did, leading to poor onboarding completion rates.

Competitors were winning with clearer positioning. A review of five direct competitors showed that all of them led with specific use cases and customer outcomes, while ZQlik's homepage featured generic corporate language.

Mobile visitors were bouncing at the signup form. Analytics showed that 68% of mobile users who reached the signup page abandoned it without completing the form, compared to 32% on desktop.

High-value leads wanted proof points early. Sales team feedback indicated that enterprise prospects needed to see logos, case studies, or specific metrics within the first scroll to build trust quickly.

DESIGN PROCESS

I started by pulling analytics data and heatmaps from the existing site to identify exactly where users were dropping off, then spent two days auditing competitor websites to identify proven patterns for SaaS landing pages in the analytics space. Instead of creating low-fidelity sketches, I jumped straight into Figma and built a modular component library using auto-layout, which allowed me to rapidly experiment with different layout structures while maintaining design consistency. I mapped out a restructured information architecture that moved key product benefits above the fold and simplified the navigation to three primary sections. From there, I designed responsive wireframes for desktop, tablet, and mobile breakpoints, focusing obsessively on typography scale and spacing to ensure readability on small screens. Once the layout structure was validated with the CEO and marketing lead, I elevated the wireframes into high-fidelity designs using the existing brand colors and UI kit components. I built an interactive prototype to simulate the full user journey from landing to signup, which I used to walk the engineering team through interaction states, spacing specs, and responsive behavior. The final three days were spent refining edge cases, documenting component variants, and organizing the Figma file with clear naming conventions and annotations to enable a smooth developer handoff.

KEY DESIGN DECISIONS

Single-field email capture instead of multi-step onboarding. The original plan included a five-question profiling form on the landing page, but I pushed back and reduced it to just an email field, knowing that each additional input would cause mobile drop-offs and delay the launch timeline.

Hero section focused on outcomes, not features. Instead of leading with technical capabilities, I restructured the messaging to highlight specific customer results like "Cut reporting time by 60%" to immediately communicate value to decision-makers.

Component-first design system for speed. I built every layout using reusable Figma components with auto-layout properties, which allowed me to make global changes in minutes and maintain perfect consistency across all breakpoints without manual resizing.

Strategic use of white space on mobile. Rather than cramming content into smaller screens, I deliberately increased padding and line height on mobile layouts to improve scannability, even though it meant users had to scroll slightly more.

TOOLS USED

Figma, Google Analytics, Hotjar, Slack, Notion.

TIMELINE

This project ran for two weeks from kickoff to developer handoff, with the site launching on December 31st.

THE PROJECT

Extreme time pressure with no room for iteration. The two-week deadline meant I had to get the design direction right on the first attempt, with no time for multiple rounds of user testing or stakeholder revisions.

Balancing brand consistency with speed. The existing brand guidelines were incomplete, so I had to make quick decisions about typography hierarchy, color usage, and spacing systems without formal approval processes.

Mobile optimization without separate designs. Instead of creating entirely separate mobile layouts, I had to design a single responsive system that would gracefully adapt across breakpoints using auto-layout constraints.

Developer handoff during the holiday season. Half the engineering team was on vacation, so I had to document everything with extreme clarity and provide real-time support over Slack to ensure zero confusion during implementation.

On-time delivery under extreme constraints. I delivered a complete, production-ready responsive design system within the two-week window, with zero delays to the engineering timeline or launch date.

45% conversion rate increase in the first two weeks. By simplifying the signup flow to a single email field and clarifying the value proposition in the hero section, we saw signups jump from an average of 12 per day to 17 per day.

30% reduction in mobile bounce rate. Optimizing the layout hierarchy and increasing white space on mobile screens cut the bounce rate from 68% to 38% within the first week post-launch.

Zero post-launch design bugs. The component-based design system and detailed developer annotations meant the engineering team shipped the site with perfect visual fidelity and no need for design revisions.

Successful campaign launch on deadline. The new website went live on December 31st as planned, supporting a six-figure paid advertising campaign that ran through January.

Improved internal design velocity. The modular component library I built became the foundation for future landing pages, reducing design time for subsequent campaigns by an estimated 60%.

KEY METRICS

45% increase in conversion rate. The redesigned landing page and simplified signup flow drove signups from 12 per day to 17 per day in the first two weeks post-launch.

30% reduction in mobile bounce rate. Mobile visitors went from a 68% bounce rate to 38% after optimizing layout hierarchy and increasing white space on smaller screens.

100% on-time delivery. The entire design system was delivered to engineering on schedule with zero delays, enabling the December 31st launch and supporting a major end-of-year marketing push.

WHERE WE ARE

The new ZQlik website is live and actively supporting ongoing acquisition campaigns, with the design system continuing to serve as the foundation for new landing pages and product marketing initiatives. The simplified signup flow and clearer messaging have become the standard template for how ZQlik communicates its value across all customer touchpoints.

FUTURE IMPROVEMENTS

Conduct quantitative A/B testing on hero messaging. Now that we have baseline metrics, I want to test different value propositions and headline variations to identify which specific language drives the highest conversion rates.

Add social proof above the fold. Incorporating customer logos or a testimonial carousel in the hero section could build trust faster for first-time visitors who need credibility signals before engaging.

Expand the component library for scalability. Building out additional design patterns for blog templates, case study pages, and product feature pages would accelerate future design work across the marketing site.

Implement progressive profiling post-signup. Now that we've captured the initial email, I want to design a gradual onboarding flow that collects user preferences over time without overwhelming new users upfront.

Optimize page speed and animation performance. Working with engineering to reduce load times and add subtle scroll-triggered animations could improve engagement metrics and make the experience feel more polished.

Design a dedicated mobile navigation pattern. The current hamburger menu works, but a more innovative mobile navigation structure could reduce friction for users trying to explore product details on smaller screens.

Build a design QA checklist for future launches. Documenting the handoff process and creating reusable annotation templates would streamline collaboration with engineering on future website updates.