UX/UI Design • Conceptual
Class: Web 3
Parsons School of Design


Doughnum is an on-the-go digital assistant that saves you time and transportation expenses by displaying live quantities of available doughnuts at NYC's Doughnut Plant shops, with an option to book up to six doughnuts for one hour in advance.

It happened too many times: the doughnuts I aimed to buy at Doughnut Plant kept running out when I arrived at the shop. I either went back empty-handed, or with the doughnuts I wasn't really happy with. Noticing the disappointed faces of other customers, it was certain that I wasn't the only one who wasted time on this misfortune. As far as the customers could do to get their favorite doughnuts, there was still a service problem that only the business can solve. "How many customers will be lost if you don't provide what they need?" "Would it be better if you increase accessibility to your products?" "Wouldn't it be great if you have constant data feed on the doughnuts you are selling?" "...How about an interactive marketing tool in the form of a life-saving mobile application?"

Doughnum started off as a coding and design project for the 2013's Web 3 class at Parsons School of Design, taught by Big Spaceship's veteran Jamie Kosoy. The deliverable, "The Doughnut Counter", was a one-page responsive website that displayed images of doughnuts sold at Doughnut Plant shops along with their current quantities. There were only two locations opened at the time: Chelsea and Lower East Side, so fitting two counters under each doughnut was a easy task, making it possible to display all doughnuts on a single page. The counters would change in sync with the quantity database that connects to the cashier machines. It was a successful project in the class. I was encouraged to contact Doughnut Plant about this idea, but never received a response after the initiation email.

View The Doughnut Counter's live demo >

Years passed to 2016. People no longer sit in front of their computers. It's all mobile now. I figured that in reality, Doughnut Plant's CEO would decide to upgrade its platform from web to mobile as well. For this reason, I turned the Doughnut Counter into a mobile application and gave it a new name, "Doughnum". The name is a wordplay and a combination of the words doughnut and numbers.

Research & Analysis

What is Doughnut Plant?
Doughnut Plant is a doughnut franchise that operates mainly in NYC (Lower East Side, Chelsea, Brooklyn, and Queens). They also have nine shops in Tokyo and one in Seoul. The founder, Mark Israel, with his grandfather's doughnut recipe, opened the Lower East Side shop in 1994. The franchise is popular for natural ingredients and original flavors, with a touch of home-made qualities.

Visit Doughnut Plant's Website >

Is it possible to order in advance at Doughnut Plant?
Currently, Doughnut Plant has a pick-up service for three dozen doughnuts or more at all four NYC locations. However, the customer will need to make an order via email 48 hours (business days) in advance. This is clearly a service for planned parties, not individuals in a rush who are Doughnum's target.

Who wants to use Doughnum?
This app specifically targets Doughnum's new and existing customers who don't have much time to waste.

How can Doughnum help them get the doughnuts?
Doughnum's audience can book up to six doughnuts through the application, then pick them up at the shop within an hour after the booking is complete.

Why can't the user pay through Doughnum?
It could cause a loss to Doughnut Plant's business. What if the user arrives late because they think they already own the doughnut? What if they never arrive at all, but already paid the money? The booking system will prompt the user to come, or else the doughnut they booked will be handed over to somebody else.

User Experience

Transitioning from web to mobile doesn't mean the experience will be the same. The core concept may remain intact, which in this case is displaying doughnut quantities. However, the difference is how the user navigate web versus mobile, plus additional functions that could be added to maximize the service.

User Scenarios
Scenario #1: Booking a Doughnut
1. Look for the doughnut.
2. Book the doughnut.
3. Visit the location within the time limit.
4. Buy the booked doughnut at the location.

Scenario #2: Keeping an Eye on a Doughnut
1. Look for the doughnut.
2. Put the doughnut in a watch list.
3. Come back to the list to check the doughnut.

User Flow
From the user scenarios, functions were derived as following: Locations, Search, Map, Booked List, Watch List, and Member Profile. These functions were then wired together to form the user flow presented below.

During the earlier phase of wireframes design, I asked a few friends to do a user testing with paper prototypes. The feedback in general was positive, with one thing to add: a membership system. A membership system was totally overlooked at first, because I thought the small booking information (name, phone number, email) could be added in the process. However, it meant the same person would have to keep providing the same information each time they did the booking. Frustration might happen that could lead to deleting the app. A membership system would be a good solve, because it could recall user's information from a database.

View the wireframes in PDF >

User Interface

Doughnut Plant's brand identiy is extremely distinctive. What makes it solid is the typography and high-contrast colors. I based the design on their long-established website to continue the branding. Current customers will feel instantly attracted to it, because of the familiarity. New customers will catch and recognize the brand very easily, because it's already used everywhere.

Visit Doughnum's InVision Prototype >