The Bambino Plus
Brand and Landing Page Design
Project Overview
Brand and landing page design for the Bambino Plus espresso machine. Combining beautiful imagery with clear calls to action for an engaging product experience.
The Problem
Breville is doing a good job showcasing their product, but their site is lacking imagery that sells the user on the lifestyle associated with the quality. We feel this is causing potential users who are focused on the lifestyle of drinking coffee to purchase another product.
The Solution
Focus on providing aesthetic images and aspirational content in order to give the user a fully immersive espresso experience.
Background
Breville is a high-quality appliance brand, founded in Australia in 1972. They are unique because they design with customer feedback in mind. Although Breville has a well-organized and attractive website, they currently don't utilize a landing page or include any rich content to lure in additional customers.
​
This project was completed as a class assignment for the University of Oregon's UX/UI Bootcamp.
My Role
UX/UI Designer
Team
2 UX/UI Designers
Tools
Figma, Wix, Visual Studio Code, GitHub, Google Suite, Zoom, Trello, Slack, InVision
Timeline
3 weeks
​
July - August 2022
Design Process
Discover
Define
Ideate
Prototype
Test
Discover
User Interviews
We conducted four 1:1 interviews in order to gain an understanding of our users’ current needs, what they are looking for in a product, and what informs their purchasing decisions. Overall, we found that coffee is an important part of our participants’ daily routines and they are willing to invest in a high-quality product.
"Coffee is an important part of my daily routine. I enjoy the smell, taste, and color of coffee."
- Diane
User Survey
We surveyed 16 coffee drinkers to gain further insight into what informs their purchasing decisions and how drinking coffee fits into their lifestyles.
Insights and Data
When/if purchasing an espresso machine, what is most important to you? Results are the top 4 answers.
Would you pay more for a high-quality product?
User Persona
The results of our interviews and survey showed us that the quality of a product is very important to users and durability/functionality as well as aesthetics are taken into account. We used these insights to develop our User Persona, Gabby Smith.
Meet Gabby
Gabby is looking to purchase a new espresso machine, as coffee is necessary to get her through a long day at the office. She also enjoys drinking coffee and would like to be able to make a variety of drinks at home. Gabby has purchased machines in the past but was not happy with the quality or aesthetics of the products.
​
She wants a functional, easy-to-use product that is also sleek and aesthetically pleasing - something you can easily leave on your countertop.
Define & Ideate
Competitor Analysis
We analyzed four competitors and drew inspiration from the three below. Although their websites were informative and aesthetically pleasing, we felt that the addition of beautiful lifestyle imagery could provide a more engaging user experience.
User Insight Statement
When looking to invest in an espresso machine, our users want something that will enrich their coffee experience, look aesthetically pleasing, and be high-quality. They are seeking a product that provides options but is also easy to use.
User Funnel
The aim of the user funnel was to capture our user's interest from the very beginning, draw them into the content of the landing page, and motivate them to take action by ideally purchasing a product, or at least connecting with Breville through the newsletter or homepage.
Showcase delicious recipes that can easily be made at home
Invite potential customers to sign up for newsletter/visit homepage
Video that introduces product and promotes lifestyles
Engaging images followed by product information and features
Option to purchase featured product or other Breville products
Inspiration
Brand & Style Guide
After gathering imagery for our Moodboard, we selected colors, fonts, and imagery that were sophisticated and sleek. We wanted a design that had a balance of contrast and white space for a clean and visually engaging look.
Prototype & Test
Sketches & Mid-Fidelity Wireframes
Based on our User Funnel, we started our design with an aspirational video and imagery. We wanted to be informative by showing product features, while also using a modern design and engaging elements.
High-Fidelity Usability Tests
We conducted a quick round of usability tests on our high-fidelity prototype. The main feedback we received involved fine-tuning the interactions in our prototype and making the text more readable. We also wanted to make sure that people knew these cards contained recipes, so we changed the interaction from a click to a hover state.
Text was too small/faint, making it difficult to read.
Recipe cards and clickable + icons in the Features section were confusing for users without a hover state.
Coding & Wix
My partner and I put our CSS, HTML, JavaScript, and Bootstrap skills to the test and developed a coded version of our landing page. We also created a more fully fleshed-out site using Wix. Both links are provided below:
For a clean development handoff, we would ensure to have the following:
-
Branding, imagery, and video in its own asset folder
-
Clean and organized prototype files (with named layers)
-
Check image type/size to ensure compatibility
-
Leave comments & discuss problems that are unclear by looking at design
-
Give necessary context about project
Final Thoughts
It was challenging, at the time, going from providing a clean, usable design and taking it to the next level by making it aspirational and even more curated. A lot of our past projects seemed more informative, while this project was more about aesthetic presentation. Outlining the user funnel prior to designing was beneficial for creating the structure and concept and helped us achieve our goal of creating an engaging user experience.
​
If there were more time, we would like to further explore: building out the product page using the same design, adding additional aspirational lifestyle photography, and conduct additional testing around the aspirational content our landing page.
Thank you!
