Designing the Brand and Digital Experience for 15 Minuter En Kvart
Designing the Brand and Digital Experience for 15 Minuter En Kvart
Designing the Brand and Digital Experience for 15 Minuter En Kvart
Crafting a Seamless User Experience for a Modern Fine-Casual Pizzeria.
Crafting a Seamless User Experience for a Modern Fine-Casual Pizzeria.
Crafting a Seamless User Experience for a Modern Fine-Casual Pizzeria.
Role
Role
Role
Webdesigner and Video Editor
Webdesigner and Video Editor
Timeline
Timeline
Timeline
8 weeks
8 weeks
Tools
Tools
Tools
Figma
Figma
Figma
Miro
After Effects
Miro
Illustrator
Miro
Illustrator
After Effects
Premiere Pro
After Effects
Premiere Pro
Illustrator
Premiere Pro
Overview
Overview
Overview
The design and development of an interactive prototype and graphic profile for "15 Minuter En Kvart," a fictional fine-casual pizzeria in southern Stockholm, are detailed here. The project's core objective was to create a digital platform that effectively communicates the restaurant's concept and offerings, with a strong emphasis on user-friendliness, accessibility, and a cohesive visual identity. Leveraging the iterative Double Diamond design process, this initiative combined theoretical knowledge, industry best practices, and user-centric insights to deliver a responsive, intuitive, and aesthetically refined web experience for both desktop and mobile users.
The design and development of an interactive prototype and graphic profile for "15 Minuter En Kvart," a fictional fine-casual pizzeria in southern Stockholm, are detailed here. The project's core objective was to create a digital platform that effectively communicates the restaurant's concept and offerings, with a strong emphasis on user-friendliness, accessibility, and a cohesive visual identity. Leveraging the iterative Double Diamond design process, this initiative combined theoretical knowledge, industry best practices, and user-centric insights to deliver a responsive, intuitive, and aesthetically refined web experience for both desktop and mobile users.
Skills
Skills
Skills
UX-design
UX-design
UX-design
Responsive webdesign
Responsive webdesign
Responsive webdesign
Visual hierarchy & layout
Visual hierarchy & layout
Visual hierarchy & layout
Design system thinking
Design system thinking
Design system thinking
PROJECT BACKGROUND
PROJECT BACKGROUND
PROJECT BACKGROUND
The culinary landscape is increasingly digital, with a significant majority of customers consulting restaurant websites before making dining decisions. Research indicates that 77% of customers visit a restaurant's website prior to booking or visiting. This makes the website a critical marketing channel that directly influences customer choices.
Furthermore, responsive design is no longer optional; with 78% of Swedes using mobile internet by 2016, a seamless experience across all devices is paramount. The challenge often lies in balancing compelling aesthetics with robust functionality, ensuring that a visually appealing site remains easy to navigate and use.
For "15 Minuter En Kvart," a restaurant envisioned to serve sourdough pizzas with local ingredients in a "fine-casual" setting, the primary target audience is adults aged 25-60 who prioritize quick service, high quality, and a sophisticated yet relaxed environment. These users are accustomed to digital services and expect to find information swiftly without excessive navigation. Given the fictional nature of this project, the design decisions were informed by established industry practices, extensive research, and competitive analysis, aiming to emulate the requirements of a forward-thinking, digitally focused restaurateur.
The culinary landscape is increasingly digital, with a significant majority of customers consulting restaurant websites before making dining decisions. Research indicates that 77% of customers visit a restaurant's website prior to booking or visiting. This makes the website a critical marketing channel that directly influences customer choices.
Furthermore, responsive design is no longer optional; with 78% of Swedes using mobile internet by 2016, a seamless experience across all devices is paramount. The challenge often lies in balancing compelling aesthetics with robust functionality, ensuring that a visually appealing site remains easy to navigate and use.
For "15 Minuter En Kvart," a restaurant envisioned to serve sourdough pizzas with local ingredients in a "fine-casual" setting, the primary target audience is adults aged 25-60 who prioritize quick service, high quality, and a sophisticated yet relaxed environment. These users are accustomed to digital services and expect to find information swiftly without excessive navigation. Given the fictional nature of this project, the design decisions were informed by established industry practices, extensive research, and competitive analysis, aiming to emulate the requirements of a forward-thinking, digitally focused restaurateur.
The culinary landscape is increasingly digital, with a significant majority of customers consulting restaurant websites before making dining decisions. Research indicates that 77% of customers visit a restaurant's website prior to booking or visiting. This makes the website a critical marketing channel that directly influences customer choices.
Furthermore, responsive design is no longer optional; with 78% of Swedes using mobile internet by 2016, a seamless experience across all devices is paramount. The challenge often lies in balancing compelling aesthetics with robust functionality, ensuring that a visually appealing site remains easy to navigate and use.
For "15 Minuter En Kvart," a restaurant envisioned to serve sourdough pizzas with local ingredients in a "fine-casual" setting, the primary target audience is adults aged 25-60 who prioritize quick service, high quality, and a sophisticated yet relaxed environment. These users are accustomed to digital services and expect to find information swiftly without excessive navigation. Given the fictional nature of this project, the design decisions were informed by established industry practices, extensive research, and competitive analysis, aiming to emulate the requirements of a forward-thinking, digitally focused restaurateur.
PURPOSE AND GOALS
PURPOSE AND GOALS
PURPOSE AND GOALS
The overarching purpose of this project was to apply academic knowledge in a practical setting, creating a comprehensive design proposal for 15 Minuter En Kvart's website. The focus was on developing a prototype that harmonized UX principles, business objectives, and aesthetic considerations. It also served as an opportunity to practice interpreting the needs of a fictional client. The ultimate goal was to deliver a clickable, interactive prototype that efficiently conveyed the restaurant's concept and offerings, characterized by accessibility, informational clarity, and visual coherence
The overarching purpose of this project was to apply academic knowledge in a practical setting, creating a comprehensive design proposal for 15 Minuter En Kvart's website. The focus was on developing a prototype that harmonized UX principles, business objectives, and aesthetic considerations. It also served as an opportunity to practice interpreting the needs of a fictional client. The ultimate goal was to deliver a clickable, interactive prototype that efficiently conveyed the restaurant's concept and offerings, characterized by accessibility, informational clarity, and visual coherence
The overarching purpose of this project was to apply academic knowledge in a practical setting, creating a comprehensive design proposal for 15 Minuter En Kvart's website. The focus was on developing a prototype that harmonized UX principles, business objectives, and aesthetic considerations. It also served as an opportunity to practice interpreting the needs of a fictional client. The ultimate goal was to deliver a clickable, interactive prototype that efficiently conveyed the restaurant's concept and offerings, characterized by accessibility, informational clarity, and visual coherence
DESIGN AND DEVELOPMENT PROCESS
DESIGN AND DEVELOPMENT PROCESS
DESIGN AND DEVELOPMENT PROCESS
The design and development workflow was structured around the Double Diamond model, a framework for creative problem-solving. This model consists of four phases: Discover, Define, Develop, and Deliver, cycling between divergent exploration and convergent focusing. The initial diamond (Discover and Define) is dedicated to understanding the problem, while the second (Develop and Deliver) focuses on creating and implementing solutions. This iterative approach provided a structured yet flexible guide, ensuring design decisions were rooted in user needs and creative exploration, facilitating planning, structure, and continuity throughout the project.
The design and development workflow was structured around the Double Diamond model, a framework for creative problem-solving. This model consists of four phases: Discover, Define, Develop, and Deliver, cycling between divergent exploration and convergent focusing. The initial diamond (Discover and Define) is dedicated to understanding the problem, while the second (Develop and Deliver) focuses on creating and implementing solutions. This iterative approach provided a structured yet flexible guide, ensuring design decisions were rooted in user needs and creative exploration, facilitating planning, structure, and continuity throughout the project.
The design and development workflow was structured around the Double Diamond model, a framework for creative problem-solving. This model consists of four phases: Discover, Define, Develop, and Deliver, cycling between divergent exploration and convergent focusing. The initial diamond (Discover and Define) is dedicated to understanding the problem, while the second (Develop and Deliver) focuses on creating and implementing solutions. This iterative approach provided a structured yet flexible guide, ensuring design decisions were rooted in user needs and creative exploration, facilitating planning, structure, and continuity throughout the project.
DISCOVER
DISCOVER
DISCOVER
RESEARCH AND UNDERSTANDING
RESEARCH AND UNDERSTANDING
RESEARCH AND UNDERSTANDING
This phase is aimed at gaining a deep understanding of the problem domain. This involves gathering insights into user needs, behaviors, and the context in which the design will exist, emphasizing broad exploration over immediate solution-finding. Methods employed in this phase included literature review and competitor analysis, providing both qualitative and quantitative data to identify patterns, needs, and potential problem areas.
This phase is aimed at gaining a deep understanding of the problem domain. This involves gathering insights into user needs, behaviors, and the context in which the design will exist, emphasizing broad exploration over immediate solution-finding. Methods employed in this phase included literature review and competitor analysis, providing both qualitative and quantitative data to identify patterns, needs, and potential problem areas.
This phase is aimed at gaining a deep understanding of the problem domain. This involves gathering insights into user needs, behaviors, and the context in which the design will exist, emphasizing broad exploration over immediate solution-finding. Methods employed in this phase included literature review and competitor analysis, providing both qualitative and quantitative data to identify patterns, needs, and potential problem areas.
RESEARCH AND THEORY
RESEARCH AND THEORY
RESEARCH AND THEORY
A comprehensive literature review was conducted to understand key factors in designing restaurant websites, with a focus on usability, functionality, and aesthetics. Clarity and cognitive load are paramount; familiar and descriptive language on a restaurant website is important to prevent user confusion and reduce cognitive load. Designers should employ consistent and well-known terminology, also considering minimizing choices, particularly in menus.
Responsive design is crucial for a good user experience, and strategically placed, visible Call to Action (CTA) buttons are essential. Clear and easily accessible location and contact information optimize the website for search engines and enhance user experience. User-friendly navigation is key, and visual hierarchy should be used to make important elements easily accessible. Menus should be placed in expected locations for a consistent user experience.
Color choices influence visual impression and emotional response, with contrasting colors creating visual hierarchy and guiding users. Appropriate color choices foster emotional connections, enriching the user experience. Typography extends beyond font selection; adjusting text size, line spacing, and contrast is crucial for readability, especially on mobile devices.
Storytelling through images and text can create emotional connections, sharing the restaurant's history or philosophy. Microinteractions (e.g., animations, sounds on button presses) enhance the user experience by providing feedback and increasing engagement. Finally, accessibility for users with disabilities is important. Websites should include alt text for images, be keyboard-navigable, and adhere to WCAG standards.
A comprehensive literature review was conducted to understand key factors in designing restaurant websites, with a focus on usability, functionality, and aesthetics. Clarity and cognitive load are paramount; familiar and descriptive language on a restaurant website is important to prevent user confusion and reduce cognitive load. Designers should employ consistent and well-known terminology, also considering minimizing choices, particularly in menus.
Responsive design is crucial for a good user experience, and strategically placed, visible Call to Action (CTA) buttons are essential. Clear and easily accessible location and contact information optimize the website for search engines and enhance user experience. User-friendly navigation is key, and visual hierarchy should be used to make important elements easily accessible. Menus should be placed in expected locations for a consistent user experience.
Color choices influence visual impression and emotional response, with contrasting colors creating visual hierarchy and guiding users. Appropriate color choices foster emotional connections, enriching the user experience. Typography extends beyond font selection; adjusting text size, line spacing, and contrast is crucial for readability, especially on mobile devices.
Storytelling through images and text can create emotional connections, sharing the restaurant's history or philosophy. Microinteractions (e.g., animations, sounds on button presses) enhance the user experience by providing feedback and increasing engagement. Finally, accessibility for users with disabilities is important. Websites should include alt text for images, be keyboard-navigable, and adhere to WCAG standards.
A comprehensive literature review was conducted to understand key factors in designing restaurant websites, with a focus on usability, functionality, and aesthetics. Clarity and cognitive load are paramount; familiar and descriptive language on a restaurant website is important to prevent user confusion and reduce cognitive load. Designers should employ consistent and well-known terminology, also considering minimizing choices, particularly in menus.
Responsive design is crucial for a good user experience, and strategically placed, visible Call to Action (CTA) buttons are essential. Clear and easily accessible location and contact information optimize the website for search engines and enhance user experience. User-friendly navigation is key, and visual hierarchy should be used to make important elements easily accessible. Menus should be placed in expected locations for a consistent user experience.
Color choices influence visual impression and emotional response, with contrasting colors creating visual hierarchy and guiding users. Appropriate color choices foster emotional connections, enriching the user experience. Typography extends beyond font selection; adjusting text size, line spacing, and contrast is crucial for readability, especially on mobile devices.
Storytelling through images and text can create emotional connections, sharing the restaurant's history or philosophy. Microinteractions (e.g., animations, sounds on button presses) enhance the user experience by providing feedback and increasing engagement. Finally, accessibility for users with disabilities is important. Websites should include alt text for images, be keyboard-navigable, and adhere to WCAG standards.
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
An analysis of various restaurant websites was conducted, focusing on colors, fonts, layout, and flow, to identify common design trends and strategies for attracting visitors within the restaurant industry. Competitors were selected based on search engine visibility and visual/functional quality.
Many quality-focused restaurants use large images or video on their landing pages to immediately capture attention, showcasing ingredients, dishes, or cooking processes. Visuals often speak for themselves, with minimal text, typically reserved for "About Us" sections to describe the restaurant's philosophy and craftsmanship. Logotypes or restaurant names are often prominently displayed on landing pages for clear identity. Simple, functional navigation solutions like dropdown menus or straightforward text links maintain an easily navigable and user-friendly structure.
Neutral color palettes (beige, black, white) are common, conveying a clean and professional impression that harmonizes with large visual elements. Minimalist design avoids unnecessary elements, directing focus to essential content. PDF menus are frequently used for easy download. Texts are typically clean and simple, with minimal decoration, except for emphasized elements like headings or buttons. No dominant pattern emerged in font choices between serif and sans-serif, with both being used equally.
An analysis of various restaurant websites was conducted, focusing on colors, fonts, layout, and flow, to identify common design trends and strategies for attracting visitors within the restaurant industry. Competitors were selected based on search engine visibility and visual/functional quality.
Many quality-focused restaurants use large images or video on their landing pages to immediately capture attention, showcasing ingredients, dishes, or cooking processes. Visuals often speak for themselves, with minimal text, typically reserved for "About Us" sections to describe the restaurant's philosophy and craftsmanship. Logotypes or restaurant names are often prominently displayed on landing pages for clear identity. Simple, functional navigation solutions like dropdown menus or straightforward text links maintain an easily navigable and user-friendly structure.
Neutral color palettes (beige, black, white) are common, conveying a clean and professional impression that harmonizes with large visual elements. Minimalist design avoids unnecessary elements, directing focus to essential content. PDF menus are frequently used for easy download. Texts are typically clean and simple, with minimal decoration, except for emphasized elements like headings or buttons. No dominant pattern emerged in font choices between serif and sans-serif, with both being used equally.
An analysis of various restaurant websites was conducted, focusing on colors, fonts, layout, and flow, to identify common design trends and strategies for attracting visitors within the restaurant industry. Competitors were selected based on search engine visibility and visual/functional quality.
Many quality-focused restaurants use large images or video on their landing pages to immediately capture attention, showcasing ingredients, dishes, or cooking processes. Visuals often speak for themselves, with minimal text, typically reserved for "About Us" sections to describe the restaurant's philosophy and craftsmanship. Logotypes or restaurant names are often prominently displayed on landing pages for clear identity. Simple, functional navigation solutions like dropdown menus or straightforward text links maintain an easily navigable and user-friendly structure.
Neutral color palettes (beige, black, white) are common, conveying a clean and professional impression that harmonizes with large visual elements. Minimalist design avoids unnecessary elements, directing focus to essential content. PDF menus are frequently used for easy download. Texts are typically clean and simple, with minimal decoration, except for emphasized elements like headings or buttons. No dominant pattern emerged in font choices between serif and sans-serif, with both being used equally.
DEFINE
DEFINE
DEFINE
CLARIFYING THE PROBLEM
CLARIFYING THE PROBLEM
CLARIFYING THE PROBLEM
This phase is where collected information from the Discover phase is analyzed and synthesized to formulate a clear problem definition. The goal is to establish a shared understanding of what truly needs to be solved. Tools like empathy maps, need statements, and customer journeys are often used to organize data and pinpoint core user needs. It is important to understand the real problem before attempting to solve it, as many design failures stem from addressing the wrong question. An empathy map was utilized to organize secondary data, adapting its headings to reflect insights from literature, competitor analysis, and established UX principles. This map served as a tool to visualize recurring patterns and needs relevant to the ongoing design process.
This phase is where collected information from the Discover phase is analyzed and synthesized to formulate a clear problem definition. The goal is to establish a shared understanding of what truly needs to be solved. Tools like empathy maps, need statements, and customer journeys are often used to organize data and pinpoint core user needs. It is important to understand the real problem before attempting to solve it, as many design failures stem from addressing the wrong question. An empathy map was utilized to organize secondary data, adapting its headings to reflect insights from literature, competitor analysis, and established UX principles. This map served as a tool to visualize recurring patterns and needs relevant to the ongoing design process.
This phase is where collected information from the Discover phase is analyzed and synthesized to formulate a clear problem definition. The goal is to establish a shared understanding of what truly needs to be solved. Tools like empathy maps, need statements, and customer journeys are often used to organize data and pinpoint core user needs. It is important to understand the real problem before attempting to solve it, as many design failures stem from addressing the wrong question. An empathy map was utilized to organize secondary data, adapting its headings to reflect insights from literature, competitor analysis, and established UX principles. This map served as a tool to visualize recurring patterns and needs relevant to the ongoing design process.
INSIGHTS FROM RESEARCH
INSIGHTS FROM RESEARCH
INSIGHTS FROM RESEARCH
The research and competitor analysis revealed several recurring patterns and needs crucial for the design of a restaurant website. Usability and efficiency are paramount for a user-friendly prototype, requiring familiar, consistent, and descriptive words to minimize misunderstanding and cognitive load. Clear, structured navigation with expected menu and button placements creates security and efficiency, while limiting choices, especially in menus, helps users make decisions without feeling overwhelmed.
The website must exhibit responsiveness and information accessibility, functioning equally well on mobile and desktop. Location, contact, and opening hours should be easily accessible for both users and search engines, with strategically placed CTA buttons guiding user action. Visual hierarchy, through color contrasts and clear headings, helps users quickly grasp important information.
For visual identity, color choices are vital for creating the right atmosphere and guiding the user. Many restaurant websites use neutral palettes (black, white, beige) for a clean, professional look that highlights imagery. Large, high-resolution images of food, ingredients, or ambiance play a central role in immediately generating interest and atmosphere, often complemented by videos or moving content on landing pages. Text is often minimal, focusing on the restaurant's story or philosophy.
Minimalism and typography are also key; minimalist design, devoid of unnecessary visual elements, is common, allowing essential content to stand out. Navigation is kept simple, sometimes using collapsible "hamburger" menus. While typography is important for readability and feel, careful adjustment of typographic details like size, line spacing, and contrast is necessary, especially for mobile.
Finally, creating an emotional connection through storytelling (images and texts conveying identity and background) is important. Microinteractions (animations or subtle sounds on button presses) enhance the user experience by providing direct feedback. Accessibility is fundamental, requiring adherence to WCAG standards, keyboard navigation, and alternative text for images to ensure the site works for all users.
In summary, effective restaurant websites are characterized by clear navigation, strong visual focus through imagery, a minimalist and elegant design, and thoughtful color and typography choices. They must be responsive, accessible, and establish an emotional connection with users through storytelling and visual expression. These insights formed the basis for the defined needs and design challenge.
The research and competitor analysis revealed several recurring patterns and needs crucial for the design of a restaurant website. Usability and efficiency are paramount for a user-friendly prototype, requiring familiar, consistent, and descriptive words to minimize misunderstanding and cognitive load. Clear, structured navigation with expected menu and button placements creates security and efficiency, while limiting choices, especially in menus, helps users make decisions without feeling overwhelmed.
The website must exhibit responsiveness and information accessibility, functioning equally well on mobile and desktop. Location, contact, and opening hours should be easily accessible for both users and search engines, with strategically placed CTA buttons guiding user action. Visual hierarchy, through color contrasts and clear headings, helps users quickly grasp important information.
For visual identity, color choices are vital for creating the right atmosphere and guiding the user. Many restaurant websites use neutral palettes (black, white, beige) for a clean, professional look that highlights imagery. Large, high-resolution images of food, ingredients, or ambiance play a central role in immediately generating interest and atmosphere, often complemented by videos or moving content on landing pages. Text is often minimal, focusing on the restaurant's story or philosophy.
Minimalism and typography are also key; minimalist design, devoid of unnecessary visual elements, is common, allowing essential content to stand out. Navigation is kept simple, sometimes using collapsible "hamburger" menus. While typography is important for readability and feel, careful adjustment of typographic details like size, line spacing, and contrast is necessary, especially for mobile.
Finally, creating an emotional connection through storytelling (images and texts conveying identity and background) is important. Microinteractions (animations or subtle sounds on button presses) enhance the user experience by providing direct feedback. Accessibility is fundamental, requiring adherence to WCAG standards, keyboard navigation, and alternative text for images to ensure the site works for all users.
In summary, effective restaurant websites are characterized by clear navigation, strong visual focus through imagery, a minimalist and elegant design, and thoughtful color and typography choices. They must be responsive, accessible, and establish an emotional connection with users through storytelling and visual expression. These insights formed the basis for the defined needs and design challenge.
The research and competitor analysis revealed several recurring patterns and needs crucial for the design of a restaurant website. Usability and efficiency are paramount for a user-friendly prototype, requiring familiar, consistent, and descriptive words to minimize misunderstanding and cognitive load. Clear, structured navigation with expected menu and button placements creates security and efficiency, while limiting choices, especially in menus, helps users make decisions without feeling overwhelmed.
The website must exhibit responsiveness and information accessibility, functioning equally well on mobile and desktop. Location, contact, and opening hours should be easily accessible for both users and search engines, with strategically placed CTA buttons guiding user action. Visual hierarchy, through color contrasts and clear headings, helps users quickly grasp important information.
For visual identity, color choices are vital for creating the right atmosphere and guiding the user. Many restaurant websites use neutral palettes (black, white, beige) for a clean, professional look that highlights imagery. Large, high-resolution images of food, ingredients, or ambiance play a central role in immediately generating interest and atmosphere, often complemented by videos or moving content on landing pages. Text is often minimal, focusing on the restaurant's story or philosophy.
Minimalism and typography are also key; minimalist design, devoid of unnecessary visual elements, is common, allowing essential content to stand out. Navigation is kept simple, sometimes using collapsible "hamburger" menus. While typography is important for readability and feel, careful adjustment of typographic details like size, line spacing, and contrast is necessary, especially for mobile.
Finally, creating an emotional connection through storytelling (images and texts conveying identity and background) is important. Microinteractions (animations or subtle sounds on button presses) enhance the user experience by providing direct feedback. Accessibility is fundamental, requiring adherence to WCAG standards, keyboard navigation, and alternative text for images to ensure the site works for all users.
In summary, effective restaurant websites are characterized by clear navigation, strong visual focus through imagery, a minimalist and elegant design, and thoughtful color and typography choices. They must be responsive, accessible, and establish an emotional connection with users through storytelling and visual expression. These insights formed the basis for the defined needs and design challenge.
NEEDS FORMULATION
NEEDS FORMULATION
NEEDS FORMULATION
Based on the identified insights from the literature review and competitor analysis, several "How might we" questions were formulated to deepen the understanding of user needs, resulting in the following central needs for the website: Users need an easily navigable structure with few and clear choices to avoid decision fatigue; a responsive design that functions seamlessly on both mobile and desktop; a visual presentation that clearly communicates the restaurant's identity; and clear typography and thoughtful color schemes that support readability and accessibility. These needs established a clear foundation for formulating the subsequent design challenge.
Based on the identified insights from the literature review and competitor analysis, several "How might we" questions were formulated to deepen the understanding of user needs, resulting in the following central needs for the website: Users need an easily navigable structure with few and clear choices to avoid decision fatigue; a responsive design that functions seamlessly on both mobile and desktop; a visual presentation that clearly communicates the restaurant's identity; and clear typography and thoughtful color schemes that support readability and accessibility. These needs established a clear foundation for formulating the subsequent design challenge.
Based on the identified insights from the literature review and competitor analysis, several "How might we" questions were formulated to deepen the understanding of user needs, resulting in the following central needs for the website: Users need an easily navigable structure with few and clear choices to avoid decision fatigue; a responsive design that functions seamlessly on both mobile and desktop; a visual presentation that clearly communicates the restaurant's identity; and clear typography and thoughtful color schemes that support readability and accessibility. These needs established a clear foundation for formulating the subsequent design challenge.
DESIGN CHALLENGE
DESIGN CHALLENGE
DESIGN CHALLENGE
Since primary data collection through interviews or observations was not possible, the design challenge was derived from secondary data: the literature review, competitor analysis, and theories on usability, accessibility, and visual communication. Insights were structured using an empathy map and concretized through "How might we" questions in the needs formulation. These questions identified several sub-challenges, including clear structure, visual identity, responsiveness, and accessibility.
This led to the following overarching design challenge:
How can I design an interactive prototype for a restaurant website that is easy to navigate and communicates the restaurant's identity and atmosphere, while functioning well on both mobile and desktop and being accessible to different types of users?
Since primary data collection through interviews or observations was not possible, the design challenge was derived from secondary data: the literature review, competitor analysis, and theories on usability, accessibility, and visual communication. Insights were structured using an empathy map and concretized through "How might we" questions in the needs formulation. These questions identified several sub-challenges, including clear structure, visual identity, responsiveness, and accessibility.
This led to the following overarching design challenge:
How can I design an interactive prototype for a restaurant website that is easy to navigate and communicates the restaurant's identity and atmosphere, while functioning well on both mobile and desktop and being accessible to different types of users?
Since primary data collection through interviews or observations was not possible, the design challenge was derived from secondary data: the literature review, competitor analysis, and theories on usability, accessibility, and visual communication. Insights were structured using an empathy map and concretized through "How might we" questions in the needs formulation. These questions identified several sub-challenges, including clear structure, visual identity, responsiveness, and accessibility.
This led to the following overarching design challenge:
How can I design an interactive prototype for a restaurant website that is easy to navigate and communicates the restaurant's identity and atmosphere, while functioning well on both mobile and desktop and being accessible to different types of users?
DEVELOP
DEVELOP
DEVELOP
EXPLORING SOLUTIONS
EXPLORING SOLUTIONS
EXPLORING SOLUTIONS
This phase focuses on generating and exploring potential solutions to the defined problem. This is a creative and iterative phase where ideas are created, tested, and further developed, prioritizing broad exploration over finding a perfect solution immediately. It emphasizes the importance of generating numerous solution proposals and rapidly creating simple prototypes for user testing. The focus is on learning through visualizing ideas and experimentation, rather than initial perfection.
This phase focuses on generating and exploring potential solutions to the defined problem. This is a creative and iterative phase where ideas are created, tested, and further developed, prioritizing broad exploration over finding a perfect solution immediately. It emphasizes the importance of generating numerous solution proposals and rapidly creating simple prototypes for user testing. The focus is on learning through visualizing ideas and experimentation, rather than initial perfection.
This phase focuses on generating and exploring potential solutions to the defined problem. This is a creative and iterative phase where ideas are created, tested, and further developed, prioritizing broad exploration over finding a perfect solution immediately. It emphasizes the importance of generating numerous solution proposals and rapidly creating simple prototypes for user testing. The focus is on learning through visualizing ideas and experimentation, rather than initial perfection.
GRAPHIC PROFILE
GRAPHIC PROFILE
GRAPHIC PROFILE
To capture the essence of "15 Minuter En Kvart" and establish a consistent visual thread, a graphic profile was developed. This profile, encompassing colors, typography, imagery style, and logotype, forms an expression that connects to both the craft of pizza making and the restaurant's fine-casual ambiance.
To capture the essence of "15 Minuter En Kvart" and establish a consistent visual thread, a graphic profile was developed. This profile, encompassing colors, typography, imagery style, and logotype, forms an expression that connects to both the craft of pizza making and the restaurant's fine-casual ambiance.
To capture the essence of "15 Minuter En Kvart" and establish a consistent visual thread, a graphic profile was developed. This profile, encompassing colors, typography, imagery style, and logotype, forms an expression that connects to both the craft of pizza making and the restaurant's fine-casual ambiance.
COLOR PALETTE
COLOR PALETTE
COLOR PALETTE
The color palette was carefully selected to convey luxury, warmth, and security, while linking to the pizza concept. Chosen names for the colors are "Bränd" (Burnt), "Övergräddad" (Overbaked), "Mozzarella," "Pizzadeg" (Pizza Dough), and "Tomatsås" (Tomato Sauce). "Bränd" (Burnt) is used as a background color for "cards" to create depth and occasionally as text color against lighter backgrounds. It also serves as a background for the footer, contrasting with the rest of the prototype to signify an end. A nearly black shade was chosen over pure black for an exclusive and sophisticated feel, avoiding a harsh or sterile impression. Black shades are associated with elegance and luxury in color psychology.
"Övergräddad" (Overbaked) is used as the primary background color. A slightly off-black was chosen to avoid contrast issues with text and a gloomy feel. "Mozzarella" is intended as text color against dark backgrounds to ensure high contrast and readability, crucial for accessibility and usability. "Pizzadeg" (Pizza Dough) is planned as a background color for the menu, inspired by pizza dough, subtly connecting to the pizza's origin while contributing to an inviting and balanced overall impression. "Tomatsås" (Tomato Sauce) is used for important elements like CTA buttons and other details needing attention. Red has a strong psychological effect, stimulating appetite and emotional engagement, and connects to Italy's color palette.
The color palette was carefully selected to convey luxury, warmth, and security, while linking to the pizza concept. Chosen names for the colors are "Bränd" (Burnt), "Övergräddad" (Overbaked), "Mozzarella," "Pizzadeg" (Pizza Dough), and "Tomatsås" (Tomato Sauce). "Bränd" (Burnt) is used as a background color for "cards" to create depth and occasionally as text color against lighter backgrounds. It also serves as a background for the footer, contrasting with the rest of the prototype to signify an end. A nearly black shade was chosen over pure black for an exclusive and sophisticated feel, avoiding a harsh or sterile impression. Black shades are associated with elegance and luxury in color psychology.
"Övergräddad" (Overbaked) is used as the primary background color. A slightly off-black was chosen to avoid contrast issues with text and a gloomy feel. "Mozzarella" is intended as text color against dark backgrounds to ensure high contrast and readability, crucial for accessibility and usability. "Pizzadeg" (Pizza Dough) is planned as a background color for the menu, inspired by pizza dough, subtly connecting to the pizza's origin while contributing to an inviting and balanced overall impression. "Tomatsås" (Tomato Sauce) is used for important elements like CTA buttons and other details needing attention. Red has a strong psychological effect, stimulating appetite and emotional engagement, and connects to Italy's color palette.
The color palette was carefully selected to convey luxury, warmth, and security, while linking to the pizza concept. Chosen names for the colors are "Bränd" (Burnt), "Övergräddad" (Overbaked), "Mozzarella," "Pizzadeg" (Pizza Dough), and "Tomatsås" (Tomato Sauce). "Bränd" (Burnt) is used as a background color for "cards" to create depth and occasionally as text color against lighter backgrounds. It also serves as a background for the footer, contrasting with the rest of the prototype to signify an end. A nearly black shade was chosen over pure black for an exclusive and sophisticated feel, avoiding a harsh or sterile impression. Black shades are associated with elegance and luxury in color psychology.
"Övergräddad" (Overbaked) is used as the primary background color. A slightly off-black was chosen to avoid contrast issues with text and a gloomy feel. "Mozzarella" is intended as text color against dark backgrounds to ensure high contrast and readability, crucial for accessibility and usability. "Pizzadeg" (Pizza Dough) is planned as a background color for the menu, inspired by pizza dough, subtly connecting to the pizza's origin while contributing to an inviting and balanced overall impression. "Tomatsås" (Tomato Sauce) is used for important elements like CTA buttons and other details needing attention. Red has a strong psychological effect, stimulating appetite and emotional engagement, and connects to Italy's color palette.
TYPOGRAPHY
TYPOGRAPHY
TYPOGRAPHY
For headline font, "Love Ya Like A Sister" was selected for its playful yet warm and personal character, fitting a fine-casual concept where high-quality food meets a relaxed atmosphere. Handwritten and organic fonts create a sense of authenticity and personal appeal. For body text, "DM Sans" was chosen for its high readability and modern, neutral expression, creating good contrast with the more expressive headline font. Sans-serif fonts are often used for digital reading due to their clarity and simplicity. DM Sans also offers various weight variants for typographic hierarchy flexibility.
For headline font, "Love Ya Like A Sister" was selected for its playful yet warm and personal character, fitting a fine-casual concept where high-quality food meets a relaxed atmosphere. Handwritten and organic fonts create a sense of authenticity and personal appeal. For body text, "DM Sans" was chosen for its high readability and modern, neutral expression, creating good contrast with the more expressive headline font. Sans-serif fonts are often used for digital reading due to their clarity and simplicity. DM Sans also offers various weight variants for typographic hierarchy flexibility.
For headline font, "Love Ya Like A Sister" was selected for its playful yet warm and personal character, fitting a fine-casual concept where high-quality food meets a relaxed atmosphere. Handwritten and organic fonts create a sense of authenticity and personal appeal. For body text, "DM Sans" was chosen for its high readability and modern, neutral expression, creating good contrast with the more expressive headline font. Sans-serif fonts are often used for digital reading due to their clarity and simplicity. DM Sans also offers various weight variants for typographic hierarchy flexibility.
LOGOTYPE
LOGOTYPE
LOGOTYPE
The logotype features a pizza symbol with a quarter removed, a visual play on the name "15 Minuter En Kvart" (15 Minutes a Quarter). The text portion uses the Astrid typeface, chosen for its modern yet elegant and clean expression, reinforcing "15 Minuter En Kvart"'s positioning between casual and fine dining. The logotype is to be used in all brand communication, always with sufficient clear space, and in its original colors. The symbol acts as a complement for more compact or simplified representation needs (e.g., favicon, social media, decorative material) and should not be altered in color or proportion.
The logotype features a pizza symbol with a quarter removed, a visual play on the name "15 Minuter En Kvart" (15 Minutes a Quarter). The text portion uses the Astrid typeface, chosen for its modern yet elegant and clean expression, reinforcing "15 Minuter En Kvart"'s positioning between casual and fine dining. The logotype is to be used in all brand communication, always with sufficient clear space, and in its original colors. The symbol acts as a complement for more compact or simplified representation needs (e.g., favicon, social media, decorative material) and should not be altered in color or proportion.
The logotype features a pizza symbol with a quarter removed, a visual play on the name "15 Minuter En Kvart" (15 Minutes a Quarter). The text portion uses the Astrid typeface, chosen for its modern yet elegant and clean expression, reinforcing "15 Minuter En Kvart"'s positioning between casual and fine dining. The logotype is to be used in all brand communication, always with sufficient clear space, and in its original colors. The symbol acts as a complement for more compact or simplified representation needs (e.g., favicon, social media, decorative material) and should not be altered in color or proportion.
IMAGERY
IMAGERY
IMAGERY
The visual language is inspired by cinematic expression with warm tones and deep contrasts, creating a luxurious and inviting visual feel. Emulating the atmosphere of film scenes enhances the sense of ambiance and quality, making the brand more memorable and emotionally engaging.
The visual language is inspired by cinematic expression with warm tones and deep contrasts, creating a luxurious and inviting visual feel. Emulating the atmosphere of film scenes enhances the sense of ambiance and quality, making the brand more memorable and emotionally engaging.
The visual language is inspired by cinematic expression with warm tones and deep contrasts, creating a luxurious and inviting visual feel. Emulating the atmosphere of film scenes enhances the sense of ambiance and quality, making the brand more memorable and emotionally engaging.
IDEA GENERATION
IDEA GENERATION
IDEA GENERATION
To explore various solutions and establish a functional website structure, initial layout ideas were sketched by hand. The goal was to quickly generate multiple alternatives and investigate how content and navigation could be organized to feel both inviting and luxurious. These sketches served as the foundation for further design work.
To explore various solutions and establish a functional website structure, initial layout ideas were sketched by hand. The goal was to quickly generate multiple alternatives and investigate how content and navigation could be organized to feel both inviting and luxurious. These sketches served as the foundation for further design work.
To explore various solutions and establish a functional website structure, initial layout ideas were sketched by hand. The goal was to quickly generate multiple alternatives and investigate how content and navigation could be organized to feel both inviting and luxurious. These sketches served as the foundation for further design work.
WIREFRAMES
WIREFRAMES
WIREFRAMES
Following the initial hand sketches, digital wireframes were created using the design tool Figma. The purpose was to visualize structure and content early on without getting bogged down in details like colors or typography. Wireframes served as a foundation for further prototype development, providing a clear overview of the page's structure, section placement, and functionality.
Following the initial hand sketches, digital wireframes were created using the design tool Figma. The purpose was to visualize structure and content early on without getting bogged down in details like colors or typography. Wireframes served as a foundation for further prototype development, providing a clear overview of the page's structure, section placement, and functionality.
Following the initial hand sketches, digital wireframes were created using the design tool Figma. The purpose was to visualize structure and content early on without getting bogged down in details like colors or typography. Wireframes served as a foundation for further prototype development, providing a clear overview of the page's structure, section placement, and functionality.
HI-FI PROTOTYPE
HI-FI PROTOTYPE
HI-FI PROTOTYPE
To facilitate initial user testing in a more realistic context, a rapid Hi-Fi prototype of the website was developed. This version incorporated central visual elements such as color scheme, typography, layout, and components to resemble a potentially finished design solution. While not fully detailed, it allowed for a more credible user experience than the sketches. The aim was to identify usability issues early and collect qualitative data from test participants. Hi-Fi prototypes enable more focused user tests, allowing designers to observe participant behavior rather than explaining or compensating for prototype limitations. This aligns with the view of prototypes as tools for quickly testing ideas and gathering feedback.
Initial tests were conducted with three users using a think-aloud method, providing insights into their interactions and thought processes. Feedback revealed that navigation was not clear enough and lacked a logical order for links. The confirmation page felt too bright compared to the previous page. The booking page would benefit from showing the booking month for clarity and aesthetics.
Positive feedback included that the layout was perceived as clear and logical, the booking form followed a logical order, and the food menu was visually appealing and easy to understand. These initial test results informed subsequent improvements and further development of the prototype. Adjustments included revising the navigation structure, visually adjusting the confirmation page's color and contrast, and adding month information to the booking calendar. These changes were implemented in an updated Hi-Fi prototype, forming the basis for the final test version.
A mobile-adapted version of the prototype was also developed for responsive and accessible user experience. Based on the desktop version, it was optimized for touch interaction, simpler navigation, and smaller screens, maintaining the same visual expression but restructured for mobile devices.
The next sections of the original report elaborate on the finalization of the concept, focusing on visual choices and conclusive testing, illustrating how ideas were translated into concrete solutions and refined for potential implementation.
To facilitate initial user testing in a more realistic context, a rapid Hi-Fi prototype of the website was developed. This version incorporated central visual elements such as color scheme, typography, layout, and components to resemble a potentially finished design solution. While not fully detailed, it allowed for a more credible user experience than the sketches. The aim was to identify usability issues early and collect qualitative data from test participants. Hi-Fi prototypes enable more focused user tests, allowing designers to observe participant behavior rather than explaining or compensating for prototype limitations. This aligns with the view of prototypes as tools for quickly testing ideas and gathering feedback.
Initial tests were conducted with three users using a think-aloud method, providing insights into their interactions and thought processes. Feedback revealed that navigation was not clear enough and lacked a logical order for links. The confirmation page felt too bright compared to the previous page. The booking page would benefit from showing the booking month for clarity and aesthetics.
Positive feedback included that the layout was perceived as clear and logical, the booking form followed a logical order, and the food menu was visually appealing and easy to understand. These initial test results informed subsequent improvements and further development of the prototype. Adjustments included revising the navigation structure, visually adjusting the confirmation page's color and contrast, and adding month information to the booking calendar. These changes were implemented in an updated Hi-Fi prototype, forming the basis for the final test version.
A mobile-adapted version of the prototype was also developed for responsive and accessible user experience. Based on the desktop version, it was optimized for touch interaction, simpler navigation, and smaller screens, maintaining the same visual expression but restructured for mobile devices.
The next sections of the original report elaborate on the finalization of the concept, focusing on visual choices and conclusive testing, illustrating how ideas were translated into concrete solutions and refined for potential implementation.
To facilitate initial user testing in a more realistic context, a rapid Hi-Fi prototype of the website was developed. This version incorporated central visual elements such as color scheme, typography, layout, and components to resemble a potentially finished design solution. While not fully detailed, it allowed for a more credible user experience than the sketches. The aim was to identify usability issues early and collect qualitative data from test participants. Hi-Fi prototypes enable more focused user tests, allowing designers to observe participant behavior rather than explaining or compensating for prototype limitations. This aligns with the view of prototypes as tools for quickly testing ideas and gathering feedback.
Initial tests were conducted with three users using a think-aloud method, providing insights into their interactions and thought processes. Feedback revealed that navigation was not clear enough and lacked a logical order for links. The confirmation page felt too bright compared to the previous page. The booking page would benefit from showing the booking month for clarity and aesthetics.
Positive feedback included that the layout was perceived as clear and logical, the booking form followed a logical order, and the food menu was visually appealing and easy to understand. These initial test results informed subsequent improvements and further development of the prototype. Adjustments included revising the navigation structure, visually adjusting the confirmation page's color and contrast, and adding month information to the booking calendar. These changes were implemented in an updated Hi-Fi prototype, forming the basis for the final test version.
A mobile-adapted version of the prototype was also developed for responsive and accessible user experience. Based on the desktop version, it was optimized for touch interaction, simpler navigation, and smaller screens, maintaining the same visual expression but restructured for mobile devices.
The next sections of the original report elaborate on the finalization of the concept, focusing on visual choices and conclusive testing, illustrating how ideas were translated into concrete solutions and refined for potential implementation.
DELIVER
DELIVER
DELIVER
TESTING AND FINALIZATION
TESTING AND FINALIZATION
TESTING AND FINALIZATION
This phase involves the selection, refinement, and implementation of the most effective solution. This phase transitions from concept to reality, with a strong focus on quality assurance and follow-up. Implementation requires continuous testing and adaptation, along with planning for feedback and improvement even after launch. These insights are highly relevant to the Deliver phase, recognizing it as the beginning of the solution's active life rather than an end.
This phase involves the selection, refinement, and implementation of the most effective solution. This phase transitions from concept to reality, with a strong focus on quality assurance and follow-up. Implementation requires continuous testing and adaptation, along with planning for feedback and improvement even after launch. These insights are highly relevant to the Deliver phase, recognizing it as the beginning of the solution's active life rather than an end.
This phase involves the selection, refinement, and implementation of the most effective solution. This phase transitions from concept to reality, with a strong focus on quality assurance and follow-up. Implementation requires continuous testing and adaptation, along with planning for feedback and improvement even after launch. These insights are highly relevant to the Deliver phase, recognizing it as the beginning of the solution's active life rather than an end.
FINAL TESTING
FINAL TESTING
FINAL TESTING
The final test evaluated the prototype's overall impression, focusing on both accessibility and user experience, using the think-aloud method with the same three participants from previous rounds for continuity and comparison. Key insights included that some text, especially near the booking form, was perceived as too small. There was a need for supplementary explanatory texts, such as instructions for booking for more than eight people. The chosen font for buttons hindered readability, and the two background colors created visual inconsistency, leading to the decision to use "Övergräddad" for the entire prototype for consistency.
Several testers noted a lack of clear grouping between elements, making it difficult to understand related components. Lastly, the Google Calendar-inspired function, showing dates from previous and next months, caused confusion regarding bookable dates. Based on this feedback, several adjustments were made: a more uniform background color was chosen; the visual expression was enhanced by using "cards" to group related elements with a shared background and visual framing; non-bookable dates in the calendar were made visually distinct with a subdued color; and the buttons' typeface was changed to improve readability.
The final test evaluated the prototype's overall impression, focusing on both accessibility and user experience, using the think-aloud method with the same three participants from previous rounds for continuity and comparison. Key insights included that some text, especially near the booking form, was perceived as too small. There was a need for supplementary explanatory texts, such as instructions for booking for more than eight people. The chosen font for buttons hindered readability, and the two background colors created visual inconsistency, leading to the decision to use "Övergräddad" for the entire prototype for consistency.
Several testers noted a lack of clear grouping between elements, making it difficult to understand related components. Lastly, the Google Calendar-inspired function, showing dates from previous and next months, caused confusion regarding bookable dates. Based on this feedback, several adjustments were made: a more uniform background color was chosen; the visual expression was enhanced by using "cards" to group related elements with a shared background and visual framing; non-bookable dates in the calendar were made visually distinct with a subdued color; and the buttons' typeface was changed to improve readability.
The final test evaluated the prototype's overall impression, focusing on both accessibility and user experience, using the think-aloud method with the same three participants from previous rounds for continuity and comparison. Key insights included that some text, especially near the booking form, was perceived as too small. There was a need for supplementary explanatory texts, such as instructions for booking for more than eight people. The chosen font for buttons hindered readability, and the two background colors created visual inconsistency, leading to the decision to use "Övergräddad" for the entire prototype for consistency.
Several testers noted a lack of clear grouping between elements, making it difficult to understand related components. Lastly, the Google Calendar-inspired function, showing dates from previous and next months, caused confusion regarding bookable dates. Based on this feedback, several adjustments were made: a more uniform background color was chosen; the visual expression was enhanced by using "cards" to group related elements with a shared background and visual framing; non-bookable dates in the calendar were made visually distinct with a subdued color; and the buttons' typeface was changed to improve readability.
FINAL PROTOTYPE
FINAL PROTOTYPE
FINAL PROTOTYPE
Try the mobile prototype here
Try the mobile prototype here
Try the mobile prototype here
Try the desktop prototype here