Curant Contactless Ordering Web App

  • Client

    Curant
  • Company

    Freelance
  • Date

    2020
  • Role

    UI / UX Designer
  • Type

    UI Design

A design framework and design studies for a white-label contactless ordering web app.

The Client

Curant delivers a branded, premium mobile experience that drives revenue and promotes the unique inclusions offered by our hospitality partners, such as the luxury hotel Thompson, Zihuatanejo. Guests can order food and drinks and amenities seamlessly throughout the hotel, while management enjoys an easy setup, and keeps the staff connected with updates and notifications while on the run.

My Role

Curant brought me in as a freelance designer to work on the UI and UX design for this project.

The Challenge

The client had a prototype web application in development which had a very basic UI that needed user experience attention: better overall navigation and a quicker more direct path to the ordering interface. In addition, because this is a white-label application, we needed to develop a generic design framework that could be easily rebranded as new partners were brought on without a lot of integration work.

Wireframes

Wireframes for web app

I worked with Curant to develop a wireframe of the user flow and basic design elements. For returning users who are familiar with the product, we wanted a quick call to action to login to the app and begin ordering. For those new users, we provided a way to quickly get to the latest offerings. The initial application separated the promotions and the list of menus. By folding the promotional offerings into a swipeable carousel, we were able to combine the promotions and the list of menus into one interface, allowing the users quicker access to their options.

We also made improvements to the ordering process. Previously, the user would add an item to the cart, which would bring up a form with an textarea for notes/allergies. The user would submit and then only once they added the item to the cart would they be able to edit the quantity. Rather than an initial "Add to Cart" call to action, the design will allow users to click on an individual menu item, bringing up a modal with additional information about the product, a form to enter quantity and notes, and a call to action to add to the cart.

A global menu was added so that the users always had access to the other areas of the application such as promotions, menus, cart, their profile, and support. A floating action button was added to give non-logged in users quick access to signing in, and logged in users quick access to their cart.

Design Studies

Using the wireframes a base, I did a number of design studies to test how the app could be re-branded through the simple usage of different images and typefaces.

Outcome

In the last phase of this project, we applied the wireframes and the design studies to the implementation of the app for an actual customer. Using their look-and-feel, images, logo, and fonts, we implemented an interface that would blend seamlessly into their identity.

Mockups for Thompson Hotel

Mockups for Thompson Hotel

← Back to all projects