Oopsie project cover.

Oopsie.

Your favourite food, one click away!

Published in 2018

    Services

  • Strategy

  • Product Definition

  • Product Management

  • Project Management

  • Growth Strategy

  • User Testing

  • User Research

  • Brand Design

  • Design System

  • Interaction Design

  • Interface Design

  • Illustration

  • Front-end Development

  • Back-end Development

  • Multimedia Design

    Deliverables

  • Brand Identity

  • Website

  • Web App

  • iOS App

  • Android App

Oopsie is an online takeaway ordering platform that connects you with neighbouring restaurants in Hong Kong. You order and pay for takeaway with a few simple steps, tracking the status of your order in real time. Simply grab & go when your food is ready!

Creating an MVP.

Market research.

We travelled halfway across the world to Hong Kong to better understand their ways. The city is packed, traffic is jamming everywhere, restaurants are crowded with people, and enormous queues exiting the main door. Very often, people just quickly grab something, return to the office, have lunch at their desk, and swiftly get back to work. A unique lifestyle that had a drastic impact on the core features of the Oopsie App.

Hongkong street
Hongkong restaurant
Hongkong restaurant

We visited a lot of restaurants, got into their kitchens, and interviewed their staff and managers. We understood from the inside out how they operate and deal with takeaways. A true privilege that gave us the opportunity to do something different for the industry. We would reduce queues on restaurant doors while keeping their revenue stream and allowing their customers to skip those endless queues.

Core product decisions.

With wireframes (low-fi simplified designs that allow you to get a full scope of the entire app), we tackled app-specific flows and went deep into interactions without compromising core product decisions from the get-go.

Oopsie wireframes.

This allowed us to separate the nice-to-have from the must-have, getting closer and closer to creating an MVP — a Minimum Viable Product. For Oopsie, this meant excluding delivery and focusing exclusively on users picking up their food directly from restaurants.

Oopsie strategy plan.
Separating the nice-to-have from the must-have.

Even though an MVP means compromising and leaving potentially great features out of the product, it also increases the time to market and leaves room to later improve the product based on real customer feedback.

Ketchup screens.
The evolution of the Oopsie app, previously named Ketchup

Oopsie 1.0.

For Oopsie 1.0, we designed a native app available for both iOS and Android that allows users to focus entirely on food. Where to get it, when to get it, and most importantly, what to get. With only a few clicks, users are able to find their favourite restaurants and order their favourite food.

App authentication.

The front door of the Oopsie app. A simple, seamless, yet optional onboarding followed by a standard login-register process. Users can enter the app with their email address or save time by using their favourite social platforms.

Oopsie authentication screen.
Oopsie dark mode.

Home.

With Oopsie, users can start browsing restaurants immediately. As the most likely of scenarios, it made sense to preset the pick-up time for "now" and the location for "nearby" as restaurants will appear based on proximity. With a few clicks and without losing context, the user can quickly change this by accessing the pick-up menu. Here the user can type an address or use the map to pinpoint a specific location. A birds-eye-view that, at a glance, due to a clever choice of colour, allows users to immediately understand which restaurants are open nearby or on the way to their destination.

Oopsie homepage.

Restaurants.

Even in this first version of the app, it was essential to allow restaurants to stand out from the competition with some real appetising photographs. Once the user is in, it's all about making it easy to find their favourite dishes, organised and filtered by category.

Oopsie MVP.

“I was surprised by the amount of meat and cheese that you eat every day.”

Thomas Hung

Founder and CEO of Oopsie

Dishes.

In Asian cuisine, not every dish is alike, and there are hundreds of different possible variables to choose from. This complexity meant there needed to be a simple way to customise dishes with extras, options and side dishes.

Oopsie dishes screens on mobile.

Add to cart.

Always within reach, users can review and edit their cart, see how much they are going to pay, and quickly proceed to checkout. An extra opportunity to add some extra Cart Noodles!

Oopsie cart on mobile.

Checkout.

Here, it's all about reviewing your order and effortlessly checkout with your preferred payment method. Even though we planned for all sorts of payment methods, due to the short time it takes to implement, Oopsie launched exclusively with Apple and Android pay. Quicker to implement? Fewer development costs!

Oopsie checkout screen.

Order accepted!

The reverse side of the Oopsie coin. When the user places an order, restaurants receive it and can accept it immediately on their own iOS Restaurant app for iPad. A seamless integration that is the core of the Oopsie ecosystem.

Track Order.

Communicated by restaurants, the status of your order can be tracked in real-time. When it's ready for pickup, upon reaching the restaurant, users can pop open their order number and the pickup code to accelerate the handover process.

Oopsie order flow.

Settings and Order History.

The go-to place for all your Oopsie settings. Change your payment options and set your present addresses. For some nostalgic overdose, users can check back on their order history with quick access to all their receipts.

Oopsie settings on mobile.

Post MVP.

My orders.

With the recently added bottom bar, we now have an easy-to-reach dedicated space for the user's orders, both active and past. A very convenient location as users who arrive at the restaurant can swiftly access the order's pickup PIN.

Coupons.

Oh, did I mention you can now add coupons for an extra discount? Coupons can be offered by restaurants or earned by signing up to Oopsie and referring it to friends.

Oopsie coupons.

Phone Number Login.

The Oopsie app and the service it provides rely heavily on direct contact between restaurants and users. That is why, after some important real-world feedback, we opted for a mandatory signup with a phone number. Not only is it an immediate way to validate an account, but it's also a very convenient way for restaurants to contact users directly with urgent order updates.

Oopsie login screens.

Search and Activity.

Placed directly on the new bottom bar, the search tab allows users to search for restaurants by name or cuisine type. Think of the activities as the notification board for Oopsie. Users get notified when an order status changes or on any announcement from the Oopsie team.

Oopsie search bar and activity.

Reorganising Home.

Over time, analytics told us that users like to order frequently from the same restaurants. For convenience's sake, we highlighted the users' last orders and their favourite restaurants directly on the home tab.

Oopsie reorganising home.

Order ahead

Over time, analytics told us that users like to order frequently from the same restaurants. For convenience sake, we highlighted the users’ last orders and their favourite restaurants directly on the home tab.

Polishing restaurants

As we added schedule-sensitive menus to the app, the restaurant page needed an overhaul. This meant replacing the native placement of the restaurant name on the header with the order pick up time as it affects all the content below. Because of the dual-language characteristics of the Hong Kong region, it was also essential to allow the user to quickly change the language right there on the menus.

Revamp dishes

Craving some cart noodles? Different soup flavours, various sorts of noodles and endless possibilities for toppings are only a few of the possible customisations you can normally do to your dishes in Hong Kong. To allow users to fully customise dishes with this level of complexity, we had to rethink the entire functionality and create a clever and intuitive counter flow! Just tap to add!

What are you looking for?

Please choose an option below

Hate contact forms?

hello@significa.co