Bubblybee
This case study features the creative process for Bubblybee's user interface and interactive design: check out the user experience solutions that will change food ordering and delivery options in a mobile application.
|
This case study features the creative process for Bubblybee's user interface and interactive design: check out the user experience solutions that will change food ordering and delivery options in a mobile application.
|
Harriet van Horne once said "Cooking is like love. It should be entered into with abandon or not at all". Maybe that's why food and cooking is always a source of inspiration for designers. Today's case study presents the creative flow of interaction design for, Bubblybee, a mobile food ordering app.
|
ProjectA food/drink ordering app using interactive UI design.
|
Process
|
Choose your DrinkThe first menu shows the standard flavors you can choose from to start your order. These are usually specials offered at lower prices. The honey flavor is Bubblybee's specialty, and this is offered right on the front page.
Users can see item photos, ingredients, and prices. The system also filters at the top by category, enabling a user to navigate their potential choices more quickly. Users can add their customized orders to their cart all with a few taps. A clean minimal screen without unnecessary information allows users to order rapidly. |
Customize your DrinkFor users that care about the ingredients or just want to customize their drinks, use the tab "Ingredients" at the bottom part of the screen. When they pull it up, they open the tab and can add or delete contents from their selected drink. Categories include: Size, Ice, Toppings, Ice and Sugar. Users can decide on what amount of ice or sugar they would like included in their drink.
Below, you can look at the screens showing how a user might navigate the application. They feature the flow of choices and possible types of customization. |
For the color palette used in the app, I played with the contrast of text against the background, making sure the copy would be easily readable by users. I also felt like this type of golden yellow suited the bee theme.
I also made sure the graphics were clean and simple, building a balance of visual hierarchy. This makes interactions as quick as possible, allowing users to scan the text and images to easily find what they're looking for. Our hungry or thirsty audience will not want to devote much time and effort to figure out how to work the app - everything has to be clear in a few short seconds. Below, you can click on the thumbnails for more detailed screens. |
Below is a flow of interactions users will experience when customizing their orders.
|
Your Drink
|
Here is another animation showing how the "Toppings" menu works.
|
Order and delivery
|
Here's another animation showing how users can interact with the map.
|
Landing Page
|
ReflectionsBubblybee attempts to broaden the horizons of existing food delivery applications with extended functionality, strong usability, and its minimal yet fun appearance.
As an experienced user of food delivery apps, I have had frustrating experiences where I couldn't add or delete ingredients, and applications that are difficult to navigate or understand. I believe Bubblybee allows the users more creativity and customizability in a fun and accessible way. This kind of application will satisfy foodies, and picky eaters alike. |