A bakery web + mobile app to place order for pick-up

il Dolce is a boutique bakery selling pastries, bread, dessert, as well as coffee and tea.

OBJECTIVES

Design responsive user interface mobile app for il Dolce
Extend and develop the brand into web application.

TOOLS

Adobe XD

ROLE

UX/UI Designer (Research, Interaction Design, User Testing, Visual Design)

RESEARCH

CONCEPT

The idea for il Dolce is simple, it’s an European boutique bakery for sit-down and on-the-go grab. The shop offers option for customers to order ahead using web or mobile app to pick up. The shop have different but simple selections of dessert from cake to drinks, with a sustainable use of natural and disposable bamboo plates, cups, and utensils. The design and concept for il Dolce pages are natural, seasonal, appealing.

RESEARCH GOALS

Learn and understand more about European varieties of sweets, bread, and drinks.
Identify the target audience.
Design sophisticated yet user friendly mobile UI for different age groups.

DESIGN & TEST

BRANDING

Mood Board
Since this app is about food, most of the images will feature the same style, with a close up of the food. Background can be either bright or dark, to create a rustic and sophisticated feel, as long as it's blurry, and the food is the focal point.
The shape of the photos change depends on which page the user is on. It could be bigger when they click on the detail of the item, and smaller when they're on the main page.

Style Guide
This project was started around the end of the year, so the holiday seasons gave inspirations for a cool and cozy theme.
Winter blue as primal color create a calmness and coziness, which fits the vibe around Christmas time. Burgundy as accent color gives a warm feeling to contrast and highlight the features on each page.

USER FLOW

LOW-FIDELITY WIREFRAMES

HIGH-FIDELITY WIREFRAMES

VISUAL DESIGN

MOCKUPS

After receiving feedback from users, more optimized elements and features are added to create more efficient and intuitive flows.

RESPONSIVE UI DESIGNS

Responsive UIs are created by applying established styles. It further helps to examine the overall aesthetic feelings and visual balance on different devices’ screen size.