Comprehensive Website Moderization
Boosted sign-ups, enhanced user trust, and optimized performance by redesigning Gobble's homepage and landing pages, 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 boost sign-ups and improve user trust, while also redesigning the structure and visuals of supporting landing pages across the website to further improve our website's experience. The initiative included creating a new promo video for the homepage hero, designing new responsive and modern components, and optimizing both design and code for performance and usability.
The Impact
1. Homepage Hero Section Success:
A 33% increase (12% to 16%) in conversions, based on A/B/n testing results over a 21 day period!
2. Improved Performance:
Over 100%+ improvement in page load speeds, based on staging performance insights shared by the development team.
3. Elevated User Experience:
88% (16 of 18) of survey respondents concluded that they felt the brand and website's trustworthiness had improved due to the modernized visuals, improved interactions, and responsiveness across devices.
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 redesigns for the alignment with business goals, enhanced UX, and elevation of brand perception. Fingers crossed for a final release from staging soon!
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 industry trends and potential 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. Another key takeaway was the decision to use a video over a static image in the hero, and this was decided for a couple of reasons: 1. Gobble has had success with short form video advertising across the web, social media, and tv spots. 2. We want the redesign to tell a story and show customers just how easy and time-saving our meal kits are. 3. We wanted to distinguish ourselves from the competition. Hellofresh, and all of their subsidiary companies (which makes up roughly 75% of the meal-kit market), are all identical in appearance and functionality - and all are quickly becoming outdated and stagnant, compared to other leading e-commerce titans.
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.
