I started doing one-day design challenges with a couple of friends recently. We decided on the framework that we would pick a category from DailyUI, and then as a group determine our brand identity/voice, target audience, device to be used on, plus other specifics that would help guide the direction. The premise for this challenge:
Offers: Upscale “hip” twists on classic pizzas with late-night delivery
Target Audience: 20s-30s with disposable income
Location: Large city-center
Platform requirements: Needs to allow users to filter between styles, browse specials, and be notified when an item is out.
I began by listing out all the basic requirements for the app, and questions I had about the users and what kind of information they wanted to see at each step. Where possible, I looked at legacy examples to view how others had handled disclosure of information.
I did exploration to find a visual style that matched the brand voice, and set up style guidelines to keep the design consistent across the platform. I used a serif for the title to capture the classic nature of old-school Italian restaurants, but used a sans-serif for the headers and body copy for legibility and to give the app a modern feel.
Typography and color style samples
I used a top nav broken down by categories, because it gave users a good view of available categories without requiring any interactions and because it required minimal screen real estate. Additionally, it has the added benefit of giving the restaurant the option to have specials be the first thing a user sees.
Microinteraction when a pizza is added to the cart
Sample of light and dark design for the app
Managing User Expectations
Slow deliveries are a common source of frustration for online orders, so I explored how to manage expectations during busy times for the restaurant.
I wanted to try and find a moment to bring a little joy or maybe a smile. So I thought about the moments where myself or someone in the party asks a waiter what an ingredient is or sneakily Googles it on their phone. Given that this was a “hip” pizza place, I operated under the assumption that some ingredients would be uncommon and people would need to look up what they were. To streamline the process and introduce brand character, I created the following micro interaction for when a user clicks on the more information button.
Sample of focused info box with pronunciation animation and focused message to kitchen box