Case
The Challenge
Ice cream lovers need an easier way to order their cakes and treats ahead of time for special events. Phone and in-person orders were tedious and limited employee resources were not always available.
My Role
Lead designer for building ordering platforms across website and native mobile apps for Iphone and Android devices. Lead researcher to identify design opportunities that support the customer and business goals.
I was also the design liaison for their brand agency to create and integrate feature requests within our engineering workflow.
Duration: Sept 2015 - Aug 2016
Design Solutions
Accessible Menu
It was vital to have an accessible menu to support the 1,400 seasonal items that Baskin Robbins has in rotation. The menu includes a custom filter for finding favorite flavors and an in-depth nutritional panel to assist the nutrition and allergy conscious customer.
The final designs were selected based on the information architecture we defined and the style guide provided by their brand agency.
Customize Your Cake
Customize an order with a cake builder that provides each selection within a horizontal scroll in one page. Customers can choose from a wide range of options, including cake shapes and sizes, ice cream flavors and custom messages. A cake preview dynamically changes flavor images as selections are made to visualize the ingredients.
Usability tests revealed that the cake builder improved scanning ability and the dynamic content encouraged engagement for tiered purchases. The cake builder design was chosen because of its unique interface and it easily adapts across different breakpoints without any responsive layout modifications.
Reordering
Reordering is a valuable feature that allows repeat customers to access their customized cakes and quickly complete an order. The reordering flow has its own user scenarios that I had to create regarding inventory issues, ingredient availability, prep time issues, and upsell opportunities.
Reorder was built based on data analytics reporting that customers always choose their favorite items, especially if they spent some time customizing the cake with their own special ingredients. The interface was designed using existing cart and checkout components for a consistent experience.
Simplified Checkout
The checkout flow was designed to be a seamless experience to quickly set up the pick-up time and payment. We took advantage of autofill, saved data, live validation, and third party integrations to reduce customer inputs for each page.
Discovery
Information Architecture
A site map was created to visualize our content audit and improve the information architecture of the existing platform. The intention was to support how customers navigate the app and organize all the different features to support user and business goals.
Card sorting and tree testing methods were also used to validate our proposed structure of the site map.
Content First
The app needs to communicate effectively otherwise the interface doesn’t make any sense. I proposed to collaborate with the content team early and often for alignment and influence the interface layouts. This uncovers problems for us to solve early and speeds up our momentum during visual design.
Copy decks were shared across teams to outline the final content structure of every page. The content was generated from outlined goals, requirements for each page, and previous research done by other designers.
Ideation and Validation
Wireframe prototypes were used to communicate interactive concepts across teams and exercise usability tests.
Prototypes provided tangible insights about task flows and interactions of costly new features. This is an important part of the agile design process to iterate from our learnings and build the right solution without engineering dependancy.
Below is an example of cake builder variances for usability tests that influenced the outcome of the final design.
Mobile First Design
The goal was to implement the new ordering functionality in desktop and mobile apps. Mobile first responsive designs were carefully crafted to scale layouts across different breakpoints. We focused on content, design and performance to ensure usability and evaluate which functionality was absolutely necessary to build.
Responsive design normally requires 3 layouts for the breakpoints based on complexity. However, our mobile first design approach helped formulate single layouts that are truly scalable without any layout variations.
.png)
Learnings
Working with a recognizable brand like Baskin Robbins was a great experience to ramp up my understanding of accessibility and inclusive design to support their diverse customers.
Our product release was successful because of the strong collaboration with stakeholders and developers. I learned that product design truly is a team sport and it is our job to listen for empathy.
Outcomes
The online ordering platform was such a huge success that customers are still using the same product today. You can visit the platform at BaskinRobbins.com
• The business saw an increase of pre-ordered cakes during release. Employees are now recommending customers to complete orders online for their ease of use.
