BENTO

Web Experience

/

SaaS Platform

/

12 Weeks

Building a lead generation platform for Gousto’s new B2B venture, Bento.

A montage of screenshots of the website solution designed for Bento's web experience.
We partnered with Gousto to design a website for their new B2B venture - Bento.

Challenge

Bento was created out of the subscription technology that meal-kit delivery service Gousto has developed over the last 10 years.

Opening a new service-line, they now licence their tech and expertise to companies that want to scale-up their subscription business, providing them with the platform and tools needed to boost sales and surpass KPIs.

The Gousto / Bento team asked for our help in making them stand out in a crowded SaaS market and attract prospective customers and employees with a benefit-led, innovative and dynamic website.

Outcome

We defined an experience that speaks directly to the needs of potential customers in the SaaS marketplace.

When extending the Bento brand into a design system, we used typography, colour and animations expressively to make it stand out across digital touch points.

The structure, content and design ensures that users can easily understand the new type of service Bento offers, and how the complex technology can benefit their business.

  • Helped Bento express the needs, hopes and fears of potential B2B customers.
  • Defined a sitemap, journeys and a messaging matrix that explains the technology in a clear, benefits led way.
  • Designed the Bento brand into the digital space, defining accessible colours, typography and patterns.
  • Crafted wireframes through to development-ready responsive page designs.
  • Developed and launched the website using Webflow.
  • Assisted the Bento team in writing copy and creating visual assets.

“Pattrn helped us express our business proposition and product offering in a clear and engaging experience that resonates with our target audience. They worked collaboratively and flexibly to deliver a fantastic web experience that generates productive leads.”

A profile image of Ricardo Hummel, the VP & General Manager at Bento
Ricardo Hummel, VP & General Manager at Bento

Approach

A screenshot of a FigJam file with an arrow for each member of the team collaborating digitally on the opportunity statement.
We collaborated with Bento leadership to clearly communicate the benefits of the technology to attract potential customers.

Worked collaboratively with the Bento team to refine their business proposition in a digital context

Using the jobs to be done framework, alongside mapping hopes and fears, we worked with Bento leadership to collaboratively refine their business proposition for digital presentation. We helped clarify the benefits of the technology and pinpoint what would attract potential customers.

Montage of slides from a business proposition document including sitemap, brand positioning and target audience.
The experience was developed further by exploring the brand positioning, sitemaps etc.

Collaboratively created content matrix, sitemap and wireframes

Based on the customer and business needs, we created a detailed content matrix, sitemap and website wireframes. We collaborated closely with the Bento team to assist in writing content and creating visual assets that would convey the product benefits clearly.

The design system of the Bento brand on a dark background containing typography, colour, buttons and iconography.
We defined the design system for the Bento brand.

Developed the Bento brand for digital platforms

Working closely with the Bento brand team, we developed the brand so it worked in digital application. This included creating design principles and collaborating on moodboards, as well as defining typography, colours, interaction language and graphic styles. We used a mobile-first approach to ensure all digital touch points were considered.

Solutions

Three mobile screen mockups of the Bento website with graphics of patterns placed behind it.
Moodboards served as inspiration for the website’s graphics.

Intuitive web experience that puts customer benefits front and centre

Utilised the results of an extensive SaaS competitor landscape analysis, mood boards and customer profile mapping. We were able to create a benefits led responsive website that prioritised lead generation at all times.

A montage of several engaging modules used to build the 17 page website.
A defined design system aided to build 20 reusable modules.

Modular, interactive design system that cements the Bento brand

Working directly with the brand team at Bento, we defined a design system that integrates interaction animation design and visual assets. The modular nature of the system allows for easy creation of new pages and content. The 17 page website was created using approximately 20 reusable modules.

A screenshot of the website being created on Webflow with the Webflow logo above it.
Webflow was used to easily develop and manage the website.

Editable and scalable development environment using Webflow

The site needed to be flexible as the business was continually refining their product and service offering, for this reason we used Webflow to develop and manage the website. Webflow enables Bento to manage content and pages without the need for further design and development support.

A screenshot of the subscription page.
The visual assets on the subscriptions page.
Angled mobile mockups of the platform.
Mobile screens of the website.
A screenshot of an animation on the website.
Homepage animation.

Summary

Activities

  • Landscape audit
  • Discovering user jobs, pains and gains
  • Product definition
  • Sitemap and content matrix
  • Wireframing
  • UX, UI and interaction design
  • Digital brand definition
  • Development

Impact

Refined the digital experience using value proposition design framework.

Authored 12+ opportunity statements to generate a sitemap.

Created a lead-generation platform that satisfies user jobs.

Provided a flexible-CMS for Bento to manage and edit content moving forward.

Set a benchmark for rapid design and development cycles.

Next Project
A black icon of an arrow pointing to the side.
Wondr — Digital Product Design

Designing the world’s definitive medical community platform.

Fancy a free workshop?