Lickity Split: the new ipad-based checkout kiosk at j.p. licks
J.P. Licks is a Boston area ice cream chain that maintains a high level of branding. They are known and loved by many people in the area for their homegrown and playful feel. However, it is important to stay modern. Therefore, I designed a possible checkout kiosk that they could use and implement in their stores to increase their customer throughput without affecting their brand image.
Role: Lead designer.
Timeline: 1 week
Context: Coursework
Motivation: I designed an iPad-based checkout kiosk to both modernize J.P. Licks but also to reduce line wait times and improve the customer experience.
I began by comparing different ordering kiosks to understand best practices and commonly-recognized patterns. Then I sketched my own take on those ideas to create unique and delightful interactions. Lastly, I created my mockups.
Tools: Figma, Adobe Photoshop, Adobe Illustrator
Project Overview and general considerations.
J.P. Licks has long been a staple of the Boston area and is known for its great flavors, home-grown vibe, and casual atmosphere. This home-grown vibe comes through in every part of the brand’s image – from the website to the options, and even to the in-store experience. Due to this extremely appealing brand identity and high-quality flavors to match, customers might need to wait in line to order their favorite dairy dessert. As such, the implementation of a custom checkout kiosk will surely lower the wait time by increasing efficiency in ordering. However, with the addition of any new technology, there is always a risk of alienating loyal users and permanently shifting brand perception. Therefore, in designing this new ordering kiosk, it was paramount that the store’s home-grown, and playful feel were expressly retained, such that this new piece of technology fits in perfectly in the ordering process. To achieve the branding needs of this kiosk, we used J.P. Licks’ colors, logos, and cow print to ensure that every aspect of the user interface tied together.
Furthermore, one very important consideration was to ensure that all users – regardless of age, can place an order. To meet that goal, we designed the UI to live-update the preview panel on the right side with an image of the user’s current selection such that the entire experience could be accomplished without any words, if needed.
The design of the entire interface meets the needs of the user at the most basic level: ordering ice cream quickly and easily. However, this interface is slightly more advanced in that it offers unique user interactions in the form of an updating order preview as well as some swipe interactions. J.P. Licks is above all, a fun and not-too-serious brand. By creating opportunities for unique and fun interactions while operating a mundane order kiosk, J.P. Licks can ensure that the brand identity is retained as fun and playful, thus driving better user experiences and repeat business.
Screen 1: Greeting screen
The greeting screen is simple and presents the user with a large button to help guide interactions and begin the ordering process. J.P. Licks’ logo appears in the center, but without obscuring and distracting from the information about how the kiosk is for ordering. In addition, on top of the button there is an icon to signify ‘tap here’ for users which will be animated to move up and down the screen in a tapping motion. The button has a slight drop shadow to help create the illusion of depth and further communicate the button’s press-ability. Each main button uses the same J.P. Licks’ lavender brand color to communicate main actions. Lastly, underneath everything, there is a soft cow print pattern to communicate the J.P. Licks’ motif of cows and dairy.
Screen 2: Selecting a category
The selecting a category screen is a lot like the greeting screen. This screen incorporates the same swoop of pink at the foot and informs the user how to interact with the three category buttons. This is the first time that the user will face a decision that will affect the rest of the ordering process (i.e., the first branching moment). Therefore, I wanted to make sure that the user knew that there were three distinct pathways that did not relate to each other very strongly. As such, I brought the cow pattern motif to the forefront and used this pattern to make the button shapes (all of them slightly different from each other). To further communicate that each cow spot was a button, I added drop shadows. The cow print pattern is a fun and unique interaction method. Furthermore, as the kiosk should be usable for people of all ages, I wanted to communicate the branches with images as well as words.
Screen 3: Choosing a cup or cone etc.
This is the first time that the user will experience the main ice cream ordering screen. The top and bottom of the screen have a pink banner to:
1) Communicate brand colors
2) Visually constrain user glances to the interior of the screen through acting as a border
3) Allow a location for the J.P. Licks’ logo
For most of the rest of the ordering screens, there is a back button at the top left of the screen with a back arrow and the words ‘Back’ in a light color on top of the pink banner. This button will be present to allow users to undo previous actions and return to previous pages. However, to limit user indecision, this button is lightly colored to not distract users from decisions that would progress the order forward. In the same way, there is also the ‘Cancel order’ button under the total, but it is light to not accidentally trick the user into cancelling their purchase which will further drive sales and prevent mistakes.
On the right side of the screen is the preview of the current order. This window will update live as the user makes decisions so that they can see what their order will look like. At the top of the live-preview window is a progress bar which will fill in the ovals when the user completes a main step to give a sense of progression. Under the live-preview window is the current total which will update based on the user’s selections. In my preliminary research, users said that this price transparency would prevent them from restructuring large portions of their order which would increase the speed by which they could complete their orders - thus reducing lines. In the bottom middle is the ‘Next’ button in lavender. This button is the one the user will press when they are ready with their selection. All the buttons that can be pressed feature a soft drop shadow.
On the right side of the screen the user has a rotating carousel of options that they can see more of by swiping through or tapping up and down. These options are for the broad categories of ice cream such as cup, sugar cone, waffle cone, milkshake, etc. Once the user has aligned their preference with the big window, they can click next to choose their ice cream type.
Screen 4: Choosing a type of ice cream
This screen is similar to the previous screen but instead of choosing the type of container for the dairy dessert, the user chooses the type of dessert such as frozen yogurt, hard yogurt, hard ice cream, or soft service ice cream. The method of interaction and general layout of the screen are the same to allow for users to move through the UI more consistently and quickly.
Screen 5: Choosing a size
This screen is similar to the previous screen but instead of choosing the type of dairy dessert, the user chooses the size of dessert such as kids scoop, one scoop, two scoops, three scoops, etc. As the user has not chosen the flavors of ice cream at this point, there is a vector image of a scoop of ice cream in the live-preview with black cow print on it. Furthermore, the prices are indicated in the bottom right corner of the carousel so that users can make their choices based on prices. Additionally, users can see the prices before selecting the option so there is less undoing and redoing selections due to a surprise surrounding the item cost. The method of interaction and general layout of the screen are the same to allow for users to move through the UI more consistently and quickly.
Screen 6: Choosing ice cream flavors
At this step the previously-used method for selecting options would no longer work because now the user needs to be able to see many parallel options at the same time to compare prices and flavors to make a selection. As such, at this stage it has become important to adjust the selection method to a more traditional list of options that scrolls slightly to reveal new options. The reason for not using this method for the entire user interface is that this method:
1) Better communicates that the user can pick several options rather than just one
2) The previous sliding method was a more unique and therefore engaging solution
3) There are many more options here, so it was important to minimize scrolling to increase ordering speed
This screen features new interface elements not found in the previous pages. For example, when a user selects a flavor, the outline of the box featuring that flavor turns pink and a pink checkmark gets filled in. As the user might wish to select multiple scoops of a certain flavor, there is also a widget that allows users to add or subtract scoops. Similarly to before, the live-preview updates in real-time with the user’s selections. Lastly, as there is more than one page worth of options, there is now a scrollbar always present for users to orient themselves among the list of flavors. To further make it clear that there are many flavors to choose from, the bottom level of flavors fades to white so users can see that there are things that they are missing.
Screen 7: Choosing toppings
This screen is similar to the previous screen. The only large changes are that the user is limited to only three toppings (as per the instructions of the prompt) which is written in the live-preview window. Furthermore, the user is only allowed to choose one of each type of topping so the widget to add double of one topping does not appear. The number of toppings is updated to say how many the user has selected so that the user does not need to keep track themselves.
Screen 8: Choosing sauces
This screen is similar to the previous screen. The user is limited to two sauces as indicated in the live-preview window (as per the instructions in the prompt). The number of sauces is updated to say how many the user has selected so that the user does not need to keep track themselves. This page also uses the button ‘Add to Cart’ rather than ‘Next’ to further instill a sense of progress and communicate how close to done the user is.
Screen 9: Viewing the cart
The user sees small images of their orders in the cart that will match the live-previews from the previous steps. In addition, in text next to the images are the words describing their selections. In case the user would like to adjust the order, there is a small edit button. In case the user has decided to not purchase one of the items, there is a garbage can to discard the entire item. To the right is a way for the user to add or subtract instances of an item. To the right of that, there is the price of that line of items which multiplies the item cost by the total number of items. Below each line item, there is a pink line. Below that, different items receive their own line.
The bottom of the screen has a new button in a new color. This color is taken from the J.P. Licks brand and indicates an action unlike any action previously-seen. This button allows users to draft a new item and features a plus icon. Additionally, this button is on the left of the screen to communicate going backwards in the process. To the right of this button is the ‘Add a tip’ button with the next arrow on it. This button is the next step and action for the user. To the right of that button is the total in the same location it has been in previous screens.
Screen 10: Adding a tip
The tip screen boldly prompts the user to add a tip and shows four options for the tip amount. The options are shown in increasing order from no tip through a 20% tip. Each tip amount features a percentage and the calculated tip dollar value to aid the user in making this decision faster. Under each of the four tip options is an open circle. The option the user selects will become filled in. These circles are typical of forms in which a user can only select one item (because the user can only select one tip amount). Once the user is sure about the selection, they then proceed to checkout as indicated on the button.
Screen 11: Payment options
This screen features three payment options that the user can use with three icons that are frequently used to communicate the methods. There is ‘Tap to Pay,’ ‘Insert Chip,’ and ‘Swipe Card.’ These methods are commonly-used with ordering kiosks. Unlike previous screens, there is no ‘next’ button because the user will only receive his or her order number when the transaction completes.
Screen 12: Ticket number
This screen features a pink check icon to signify that the transaction was successful. Below, the user is thanked for their purchase and told that their order number is below. The order number appears with a ‘#’ sign to signify the number and the order number. The number appears inside a ticket icon to visually communicate the concept of a ticket number.