My Way Ristorante
Designing a responsive website and rebranding for a local small business.
Who is My Way Ristorante?
My Way Ristorante is an Italian-style restaurant located in Willow Springs, IL. For years, the owner named Ted has been welcoming people from all around the Willow Springs area to join him in a celebration of food and friendship. From his humble beginnings as proprietor of My Way Cafe to his latest venture, My Way Ristorante, Ted has been offering the same quality food and charismatic atmosphere that the residents of Willow Springs have come to appreciate and love. The first thing you will notice when you visit My Way Ristorante is the feeling of warmth and friendship that is rare in contemporary restaurants. Generosity is for most and after you have filled yourself with exceptional cuisine, well-balanced wines, and exceptional service, you will leave with the knowledge that you are always welcome to return.
Objectives
Redesign of the logo and brand identity. The more elegant and luxurious look of the brand and of the logo. The modern appearance will be more attractive to their customers.
Redesign the existing website to promote an online presence. Responsive homepage with featured products/services and more accessible navigation. Refresh UI elements and improve user experience.
Solution
Design a responsive website for customers to learn about the menu, be able to order online, see the location and hours of operation, see food pictures, and read stories about the restaurant.
Rebrand My Way Ristorante's logo to match the brand attributes, the original restaurant's color theme, and scalability.
Tools
Adobe Illustrator
Adobe Photoshop
Figma
Pen & Paper
Procreate
Role
UX/UI Designer
Researcher
Quality Assurance
Photographer
Team
Milos Panovic (Myself)
Misha Banner (Design Mentor)
Duration
4 Weeks (80 Hours)
Design Thinking Process Overview
The design thinking process helped me to understand users, challenge assumptions, redefine problems, and create innovative solutions to prototype and test.
Research
User & Market Research
Primary Research
User Interviews
Secondary Research
Competitive Analysis
Personas
Define
User Persona
Brainstorming
Sitemap
Task Flow
User Flow
Design
Low-Fidelity wireframe
Mid-Fidelity wireframe
Branding
UI Kit
High-Fidelity wireframe
Test
Usability Testing
Research
In this phase, I've learned and identified my users, the business environment, the competitors, and market trends and empathize with potential users that will use the product. Before I began my research, I drafted a research plan that outlines the research goals, methodologies, and assumptions.
Research Goals
I want to learn more about how users feel about the current My Way Ristorante website. I'll be able to determine whether a website offers value, and is effective at helping users complete tasks. Need to get a better understanding of what frustrates users and what stops them from using websites more than they already do. I want to be informed about difficulties during the online ordering and making reservations and what users’ overall opinions is about the current website. Based on the insights, I’ll be able to make changes to the website that improve the user experience.
Research Methodologies
Competitive and comparative research of restaurant sites to see how they operate and what they offer.
Individual interviews.
Provisional Persona
Assumptions
Customers prefer to call instead of ordering online.
Customers like My Way Ristorante because of its charismatic atmosphere and generosity.
Customers are not attracted to old logos and professional branding.
Customers are paying attention to reviews.
Competitive Analysis
To analyze and identify the strengths and weaknesses of direct and indirect competitors. This method helped me to identify what would make My Way Ristorante successful and what are some of the things we should avoid.
Provisional Personas
By creating provisional personas based on market research, I was able to narrow down the type of participants I would interview.
*Click on picture to see it bigger.
Individual Interviews
Individual interviews allow me to probe their attitudes, beliefs, desires, and experiences to get a deeper understanding of the users who come to the site. We can also ask them to rate or rank choices for site content. These interviews can take place face-to-face, by phone or video conference, or via the instant messaging system.
Summary
Through these interviews, I've tried to understand what is the most frustrating for the customers of the My Way Ristorante about their current website. How easy is it to navigate through the website, place an order or make a reservation? And after all, what is their overall opinion about the current website, and if there is something that they feel needs to be added or taken off? I have noticed that most of the participants know about My Way Ristorante through friends or family and they all really or never visit the My Way Ristorante website. Appeared that My Way Ristorante is the place where people come on somebody's suggestion and their website doesn't play a big role in gathering new customers. Customers of My Way Ristorante are coming back to this place because they offer great customer service and good quality food, such a thing is not visible through their website because some participants who are customers pretty often that never seen their website before didn't have positive opinions at first sight. I am going to redesign their logo and website so it's a more modern look and is attractive to people who are trying to visit this restaurant for the first time.
Demographics
Number of participants: 5
Ages: 23-45
Commonality: Interested in good quality food and a comfortable environment.
Research Analysis
Research analysis helped me to understand user requirements, which has led me to uncover problems and design opportunities.
*Click on picture to see it bigger.
Define
It’s time to accumulate the information gathered during the research phase. I then analyze my observations and synthesize them to define the core problems I have identified, the business goals, and the core problem of the users which who I am designing for. While defining, I will Ideate by generating new ideas and brainstorming how to initially create the site architecture and solve the problems of the product.
User Persona
After gaining feedback from my user interviews and research, I created key user representatives with the characteristics that all interviewees share, which are my personas John Healthy and Rosy Miller. These personas represent the needs of a larger group of users and will help me to find the answer to one of the most important questions, “Who am I designing for?” by understanding the expectations, concerns, and motivations of target users, I am going to design a product that will satisfy users’ needs and therefore be successful.
*Click on picture to see it bigger.
Sitemap
Here, I have the sitemap layout architecture for My Way Ristorante. The pages and features defined here are based on the competitive analysis and the insights I learned from the user interviews. It helped me to visualize the organization and labeling of content. It gave the client and me an overview of the Web site and how all the content will fit together.
*Click on picture to see it bigger.
User Flow
I have also created user flows to show different scenarios of what my personas John and Rosy might take to complete a given task. While "Flow 1" is based on the user's party reservation, "Flow 2" conducts the menu search and placing an online order. These flows take users from the entry point through a set of steps toward a successful outcome and final action.
*Click on picture to see it bigger.
Design
Now, I'm ready to generate ideas. In this phase. The solid background of knowledge from the previous phases means I can start to “think outside the box”, look for alternative ways to view the problem, and identify innovative solutions. I want to start creating the design layout of my pages, the UI elements, and components it needs, and define the visual elements that will go into it.
Low-Fidelity Wireframe Sketches
Referring to my sitemap, flows, and competitor websites, I sketched out the wireframes on each page of the website. These low-fidelity wireframe sketches allowed me to quickly lay down my ideas and assess whether the elements are easy to navigate.
*Click on picture to see it bigger.
Mid-Fidelity Wireframe (Responsive)
After sketching, I digitized my mid-fidelity wireframes to help me evaluate the visual hierarchy, structure, and flow of the design before adding the visual elements and content.
*Click on picture to see it bigger.
Branding
Most of the participants were not happy with the old logo and branding, so my obligation is to create a new-looking, modern, strong, and unique brand. Effective branding will help the restaurant differentiate itself from its competitors and build a loyal customer base. I wanted to create a consistent brand so that the customers revel in omnichannel presence.
Mood Board
Before I tackle the brand’s visual looks, I went to gather inspiration online and created a Mood Board.
Based on all the research I have done so far, I have created brand attributes to help me identify My Way Ristorante’s visual looks. This was a valuable resource throughout the design project, to help me keep the style and aesthetic consistent and on track with a client’s goals and expectations.
Attributes: Modern | Traditional | Friendly | Trustworthy | Elegant | Comfortable
Logo
Inspired by my mood board and brand attributes, I have sketched out and digitized different variations of the brand logo and picked out the best one that represents the entity.
*Click on picture to see it bigger.
Brand Style Tile
After finalizing the logo design, I created a style tile that represents the brand to have a consistent visual tone of My Way Ristorante’s Identity. The brand style tile references website interface elements through font, color, and style collections. The brand style tile is based on visual preference discussions with the client.
UI Kit
I have created an updateable UI-Kit to compile all my UI elements, features, patterns, and assets into one guide as I build through the pages, that convey meaning and provide functionality to users. Some examples of UI components are input forms, widgets, and navigation menus.
High-Fidelity Wireframes and Hi-Fidelity Prototypes
Based on my mid-fidelity wireframes and brand style tile, I have combined and created various UI elements to develop the overall visual look for the pages. After creating High-Fidelity Wireframes, I used Figma to make Hi-Fidelity Prototypes for smartphones and desktops. The prototype process is an early sample of a design that allows users to visualize or interact with it before a final product is developed. I used these prototypes to evaluate a new design to enhance precision and improve usability.
Desktop / Laptop
*Click on picture to see it whole.
Homepage
Menu
Specials
Our story
Catering & reservations
Order list
Mobile
*Click on picture to see it whole.
Homepage
Menu
Our story
Specials
Order list
Catering
Test
In this phase, I used prototype designs to conduct usability testing with real users to see if the screens functioned as intended. This allowed me to weave any potential user difficulties, usability errors, or false assumptions that the prototype may have so I can iterate on the updates and prevent over-investing before the actual site development.
Usability Test
Before conducting the usability tests, I created a usability testing plan to outline the scope of the test. The goal of the usability test was to uncover any pain points or usability issues with the website.
Overview
Usability testing was conducted with customers in My Way Ristorante. The interview lasted about 2 hours in total with 5 participants ranging from 1 female and 4 males aged 23 – 38. For this project, I used a high-fidelity prototype. Before the test, the participants were screened and have been given a brief background of what the project is while mentioning the limited functionality of the prototype.
Goals
Determine users understanding and navigation of the site.
Learn the paths users will take to find their desired information.
Find what information was lacking and where was it expected.
Learn where there is confusion, frustration, lacking information, or expected yet missing features.
Participants
Number of participants: 5
Age demographic: 23 - 38 Years of Age
Average Interview Duration: 18 minutes
Methodology
Evaluative Research, In-person think-aloud test. Present scenarios and tasks to participants to complete while letting them openly voice their thoughts as they walk through the prototype. Participants will be observed and recorded to identify any areas of confusion in the design.
Remote with shared Figma prototype and shared their screen so I can observe their interaction with the prototype.
Affinity Map
After the testing, I gathered and synthesized all test findings, using an affinity map. Then, I synthesized all the insights in order to find the most prominent patterns in user comments, actions, and pain points that led to solutions for improvements.
Reflection
Key Learnings
Designing a responsive website from scratch is always challenging, especially if it's for a well-established business like My Way Ristorante. This project helped me understand how important it is to define the core problems going through the design process. I was able to think outside the box and find ideal solutions to the problems that I was able to define.
