Comprehensive Website Moderization
Redesigned Gobble’s homepage and landing pages to boost sign-ups, enhance user trust, and optimize performance, all while collaborating across teams to deliver a seamless, user-centered experience.
Company
Gobble
Industry
Food Delivery Services
Responsive Web Design
Product UX/UI Design
Competitive Analysis
Research
Overview
This two-pronged project involved modernizing Gobble’s homepage hero section to increase sign-ups and user engagement while also redesigning the structure and visuals of supporting landing pages across the website. The aims were to elevate the brand's visual appeal, improve user trust and retention, and enhance the overall user experience. The initiative included creating a new promo video for the homepage hero, designing responsive and modern components for landing pages, and optimizing both design and code for performance and usability.
The Problems
1. Outdated Hero Section:
The existing homepage hero section hadn't been updated in nearly a decade, with an outdated design that lacked visual appeal and clashed with the global navigation bar.
2. Inconsistent and Dated Landing Pages:
Supporting landing pages were disjointed and visually inconsistent, leading to a fragmented experience for users. They also lacked a structure optimized for engagement and conversion.
3. Performance Challenges:
Old components and frameworks caused slow page load speeds, contributing to a subpar user experience - especially for mobile. Below are examples of the original homepage hero (top image) and the landing page layout (bottom image) that we're aiming to replace:
The Goals
As a business, I want to:
1. Modernize the homepage hero section and landing pages to increase sign-ups, trust, and conversion rates. 2. Improve performance and responsiveness across devices to enhance user satisfaction. 3. Ensure seamless implementation and cohesive branding through cross-team collaboration.
As a user, I want to:
1. Easily engage with a modern, visually appealing design that clearly communicates value. 2. Navigate a fast, responsive website with consistent and trustworthy pages. 3. Benefit from clear messaging that enhances my experience and trust in the brand.
The Process
Research and Competitive Analysis
I started out by conducting a competitive analysis of our leading meal kit delivery competitors and other e-commerce websites to identify UX best practices. This research quickly solidified the need for more streamlined and visually appealing pages that focused on capturing sign-ups while maintaining a delightful, but engaging, first (or second!) impression of Gobble.
Homepage Hero Section Design
To be as cost and time effecient as possible, I utilized existing footage that had accumulated over the years from previous marketing materials. I began with storyboarding my ideas for the general flow of the new video. After some feedback and minor tweaks, I began the editing and everything came together really well! The team was pleased with the direction and I made sure to optimize the video to be used both on the web and in marketing/promotional material.
The next step was wireframing hero section concepts, incorporating key elements such as the sign-up form, video placement, and a prominent CTA. Throughout this step, I collaborated with stakeholders (Director of Design, VP of Technology, and VP of Marketing) for feedback and revisions, which then let us move quickly to high-fidelity designs.
The final designs integrated the new, visually engaging promo video while ensuring proper optimization for fast loading speeds and appropriate responsiveness across all devices and networks. Alongside the video, the new direction also incorporated a more prominent, user-friendly sign-up form to boost conversions. Below is an example of the process and variant iterations, and ultimately, the variants selected to be developed for A/B testing:
Landing Page Redesign
Next is where we developed a modular layout inspired by e-commerce funnel principles. We start off with an engaging hero image and headline, followed by structured sections showcasing best-selling meals, supplemental dish options, meal plan examples, FAQs, and strategically placed CTAs throughout to drive conversions. Below are the initial wireframes that emphasized simplicity, consistency, and responsiveness across devices:
Once we landed on the general structure and layout, I got started with the visual updates - I introduced modern design elements such as rounded corners for buttons and cards, hover states, and micro-interactions (e.g., cards elevating on hover and zoom effects on carousel images). Below are some examples of the new components and their variants (check out the new visuals and hover states in the prototype)!
The next step was incorporating my recommended new typographic scale, as Gobble's previous typography was inconsistent and sporadic throughout the site, and created to help futureproof the website after the next large structure update got underway - updating the grid system. With the introduction of the new styles, updated visual spacings were needed between and within components, ensuring readability across all device sizes. Alongside these typograpy updates, I partnered with copy and marketing teams to refresh any necessary messaging, ensuring a unified brand voice across pages. This effort included updating CTAs and body content to better align with the reimagined user flow and designs. And here's how it all came together!
Performance Optimization and Developer Collaboration
Throughout the entire project, my team and I collaborated closely with the engineering team to reduce page load speeds by optimizing components. This also opened the door to leverage the use of an accessible, modern framework like Tailwind CSS, so we made sure to align the designs and expectations to achieve a seamless implementation. We held weekly product meetings, as well as ad hoc meetings and demos when needed, to ensure alignment on technical feasibility, maintain visibility on both sides, and keep each other updated.
The Results
1. Homepage Hero Section Success:
Option 1 of the hero section performed the best in the ABC+ test, resulting in an 18% increase in user sign-ups over a 30 day period.
2. Improved Performance:
User testing feedback showed that the updated landing pages contributed to faster load speeds, improved user trust, and increased consistency across the website. The enhanced layout and component responsiveness was also confirmed to ensure an equally smooth experience for the 50/50 mobile-to-desktop user base.
3. Elevated User Experience:
Our new micro-interactions, hover states, and modernized visuals created a polished, approachable feel. The streamlined experience reduced friction, driving users to sign-up flows and informational capture forms more effectively.
4. Seamless Cross-Team Collaboration:
Successful integration with Tailwind CSS ensured efficient development, while collaboration with marketing and copy teams created a unified, user-centered experience.
5. Stakeholder & Leadership Approval:
Stakeholders and higher leadership praised the redesign for its alignment with business goals, enhanced UX, and consistency in brand presentation.
