23-C3
CASESTUDY

23-C3
PROJECT

Niccolò Website Design
+Visual Identity

Niccolò Café & Bakery is a new French-style bistro, bakery, and bar in Rome, Italy. Niccolò offers a modern, relaxing atmosphere for any occasion. A unique space that includes a rooftop garden, garden bar, and dining area. They specialize in coffee making with their own brand of coffee beans. Niccolò offers an extensive breakfast, lunch, dinner, and wine menu with fresh French breads and pastries baked in house.

2023/7/03

Role

Role:
This is a Concept case study project.
UX Designer
IxD Designer
UI Designer
Visual Designer

Responsibilities

Interaction Design:
High-fidelity interactive prototypes for key tasks

UX/UI Design:
Competitive analysis
User surveys and one-on-one interviews
Personas
User journeys and task flows
Site map
App Low-fidelity wireframes
App High-fidelity mockups and prototypes
Design system
Usability tests and findings

Visual Identity:
Logo
Color palette
Typography

Project Specifications

Project Specifications

Duration:
4 weeks

Tools:
Figma
Photoshop
Illustrator

Design Process

Empathize ︎︎︎ Define ︎︎︎ Ideate ︎︎︎ Prototype ︎︎︎ Test

Project Overview / Background

Niccolò required a visual identity and a responsive website to better cater to its customer base, improve their online brand presence, and grow their business. Their main target demographic is primarily millennials and Gen Z, who lead busy lives and appreciate a unique dining experience.

Problems & Solutions

Problems

Niccolò Café & Bakery required a responsive website design with the goal of promoting their online presence and growing their business brand.
Addressing user difficulties with making reservations in advance and ordering food online.
Need for information about the cafe, services, menus, location, and unique ambience / atmosphere.

Solutions

Design a new responsive website design that matched the client's brand and business goals that reflected core UX/UI design practices.
Provide simple features for making reservations in advance and ordering food easily.
Educate users about Niccolò Café & Bakery
New visual identity that effectively communicates Niccolò unique personality.

Research

A preliminary study was conducted to better comprehend other cafe businesses' online presence and identify the competitive environment. Data from secondary research provides much-needed quantitative insight into demographics, market trends, and online bookings and sales. I performed user surveys using this information to identify and quantify the problems customers face while making reservations or ordering food online and how to fix those problems. To understand the users and their requirements, I also conducted interviews as part of my user research and made empathy maps.

COMPETITIVE ANALYSIS
(click to view)

Findings

The majority of restaurant food orders in 2023 were placed online (source: Edison Trends).
When ordering food online, some of the main issues customers run into include a confusing or complex menus.
Having to wait longer than expected for their order to be completed, and issues with website accessibility.
User frustration with websites that are difficult to use.
Lack of human interaction.
Privacy concerns with personal information.
Cancellation or modification difficulties.

User Personas
Defining Motivations Through User Personas

I developed user personas to help simplify my design process. I gained an in-depth understanding of the objectives, drivers, and pain points of users by utilizing patterns from my empathy map. Two personas were developed that most accurately reflected the primary purposes of the product and gave the target audience the highest level of importance.

PERSONAS
(click to view)

Ideation
+User Journey Maps

During the ideation stage, a brainstorming session and skatches were generated to develop creative ideas and solutions for Niccolò Café & Bakery website.

Subsequently, key procedural and emotional touch points that the Niccolò responsive website needs to address were identified by constructing and analyzing user journey maps for two primary personas and their task patterns.

BRAINSTORMING
(Click to view)

Findings:

Finding the restaurant on search engines: strong online presence
Detailed descriptions of menus with images
Simple and quick ordering and reservation process
Confirmation emails or SMS notifications
User Reviews and Ratings
Real-time tracking for deliveries

USER JOURNEY MAPS
(Click to view)

Sitemap

The sitemap was created based on the difficulties users had encountered completing important task streams. The process was helped by data gathered through surveys, interviews, and user journey maps. The intention was to create a strategic data structure that would make it simpler for users to navigate the website as a whole.

SITEMAP
(Click to view)

Digital Wireframes
User-centered Visualization through Digital Wireframes

To incorporate the information architecture into the website's visual design, preliminary digital wireframes were made using the sitemap and paper sketches. User research insights aided in directing finding patterns and refinements.

DIGITAL WIREFRAMES
(Click to view)

Low-Fidelity Prototypes

Five individuals took part in an unmoderated usability research of the low-fidelity prototypes, which was based on early digital wireframe designs with an emphasis on users' tasks and yielded three main conclusions:

Confusion about the availability of dates and times for reservations due to misleading Buttons and Iconography designs for the booking system.
Image request for food menus.
Reservation cancellation process.

LOW FIDELITY MODIFICATION

High-Fidelity Prototypes

Simple user flows were shown in the high-fidelity prototype for accessing the Niccolò Website's landing page, food and drink menus, order page, reservation page, and confirmation. Users were able to complete all test tasks at satisfactory rates, according to the results of a user research study using both behavioral and attitudinal KPIs on the Niccolò website.

Another issue raised was the lack of images for the site's menus. As a marketing strategy, it was decided to push users towards the ordering site (Deliveroo) to better promote the benefits of ordering and allow users to view reviews and ratings.

(Please allow the GIF files to load)

MOBILE APP

NICCOLO WEBSITE

BRAND IDENTITY /
DESIGN SYSTEM
(Click to view)

Improvements on Usability Issues for Long-term Development

1. Providing regular updates to keep the website updated with the latest information about the restaurant, including new menu items, special offers, and events.

2. Provide support for multiple languages

3. Improving accessibility

4. SEO Optimization

Going Forward : Takeaways

Niccolò website helps users easily reserve, order food, and view menus. The website successfully implements the goals specified during the initial design phase.

One quote from peer feedback:
“A seamless online reservation experience.”

Accessibility considerations: Provide features for vision impaired users by adding alt text to images for screen readers. Placing annotation markers next to interactive UI elements on the pages. Different sized headings were used to indicate the visual hierarchy.

︎︎︎BACK

Work Info

Niccolò Website Design +Visual Identity