NICE ICE CREAM

While several apps exist for local vendor discovery, there is still an unmet need for ice-cream truck discovery and delivery. Nice (next-door ice), is an application that seamlessly integrates ice-cream truck discovery and delivery experience.

deliverable

iOS App

SKILLS & RESPONSIBILITY

UX Design, UI Design, Brand Identity

TOOLS & SOFTWARES

Balsamiq, Sketch, Invision, Principle, Adobe CC

THE CHALLENGE

DESIGNING FOR A SPEEDY BROWSING AND ORDERING EXPERiENCE

For a product that positions itself with the concept of speed, users must be able to complete their transaction quickly and effectively. Due to a vast information of ice-cream trucks around town, the challenge was to filter out information and present them to the user in the most intuitive way possible.

USER RESEARCH

understanding user's expectations and frustrations

Pain point: Lack of means to locate nearby trucks / vendors.

Pain point: Items received are incorrect due to misunderstanding and mismatch in the menu.

Expectation: Accurate delivery estimate before ordering. Track and notification on current order.

COMPETITIVE ANALYSIS

learning from existing solution

To do this, I set up a competitive analysis chart of UberEat, Grubhub, and Food Panda comparing ease of navigation, effectiveness of UI, Task facilitation, and other features such as map view, see ratings, card payments, and delivery tracking.

PERSONA AND USER FLOW

SEEING IT IN THE CONTEXT OF A USER

I began mapping out the IA (information architecture) of the app. The goal here was creating refined flows that a user would intuitively step through to complete the necessary tasks of the app. I used Axure to build my finalized user flows like the one you see to the left. See full diagram here

HIGH FIDELITY WIREFRAME

PUTTING IT ALL ON SCREENS

I first sketched out the wireframe on paper, and then quickly transferred them to Balsamiq to get a clickable prototype for usability testing. After several iterations, I finalized the wireframe in sketch.

ONBOARDING SCREENS

setting the right atmosphere and expectation

As NICE is a fairly informal product in general, an overall friendly atmosphere was created to increase the user’s delight while using the app. On-boarding screens ensure as little 'churn' as possible especially for new users. Skipping is always an option.

SIGNUP PROCESS

ASKING QUestions in a conversational way

An email signup process usually requires a laborious form-filling effort from the users. To provide a more friendly experience, NICE signup process asks one question at a time, just like a natural conversation.

SIGNUP PROCESS

IMMEDIATE FEEDBACK ON USER'S INPUT

As users progress through the signup process, they get immediate feedback on whether the information they entered is valid. And if not, the screens will turn red. This allows them fix the error before they moving on to the next questions.

NAVIGATION

SEARCH OR BROWSE ICE CREAM TRUCKS

Users can browse for ice-cream truck via list or map view. Users can also search for specific truck or ice-cream name. The filter button is readily available via an overlay button on top. When a search doesn't yield any result, the app displays an error message, keeping with the delightful theme.

NAVIGATION

SEE MENU AND PLACE ORDER

Each item in the menu is accompanied with a photo, item name, and a description. Users can select further options like cone or cup. An add to cart button sticks to the button on the screen, constantly updating the total price.

PAYMENT FLOW

adding card information into single-line field

Users can easily see their saved cards as well as add a new card. Card information is filled out into a single input field, eliminating the need through conventional form. A camera scanner for card is also provided as an option.

TRACK AND NOTIFICATION

BEING FULLY INFORMED OF THE ORDER STATUS

The survey results reveals that users expect to be fully informed of their delivery status. A page is dedicated to that with clear timeline. Users can see the map for each of the steps in the timeline. A notification is also pushed to the lock screen.

BRAND LOGO

logotype vs. logomark

Since the name NICE is quite a common word, a logomark is crucial to help clarify what the brand is about and set up a unique brand identity. Logotype will be used when space is limited, for example on a narrow navigation bar.

COLOR PALETTE

CHOOSING THE BEST COLOR FOR THE BRAND

When it comes to ice-cream, people often think of pastel colors which portray a dreamy and fantasy vibes. NICE is a friendly brand, but as a delivery service, the brand must also be perceived as reliable. Relatively light purple is chosen as the main color, accompanied by coral red as accent color.

TYPOGRAPHY

KEEPING THE DESIGN SYSTEMATIC

Keeping typography style systematic helps set a good visual hierarchy. This provides users with a clear navigation cue throughout all screens in the application.

ICONOGRAPHY

CUSTOM ICONS THAT ADD TO BRAND PERSONALITY

When appropriate, icons can be use in place of text, which saves up a lot of space. The styling of these icons goes with NICE's friendly brand personality.

UI ELEMENTS

BRANDING DESIGN

experience beyond the screens

To continue with the brand personality, I designed a friendly truck for NICE to ensure a delightful experience both on-screen and off-screen.

PACKAGING DESIGN

ICE CREAM CARRIER

A customized ice cream carrier prevents directly handing of ice cream and keep them cooler for longer. The shape of the carrier resembles NICE's logomark.

BRANDING DESIGN

EXTRA SPOON and NAPKINS JUST IN CASE!

Going an extra mile never hurts for a product with service as its core value. With all the effort setting up delightful experience, it would be a pity if they all go to waste just because of small mis-haps with utensils.