ResumeShaping the Identity and Experience for 15 Minuter En Kvart
Shaping the Identity and Experience for 15 Minuter En Kvart
Shaping the Identity and Experience for 15 Minuter En Kvart
Bringing Fine-Casual Dining to Life Through Brand-Driven Digital Design
Role
Web designer and Video Editor
Web designer and Video Editor
Web designer and Video Editor
Timeline
8 weeks
8 weeks
8 weeks
Tools
Figma
Miro
After Effects
Illustrator
Miro
After Effects
Premiere Pro
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.
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.
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.
Project Goals
Project Goals
Project Goals
Provide clear and engaging access to the restaurant’s concept and offerings
Provide clear and engaging access to the restaurant’s concept and offerings
Provide clear and engaging access to the restaurant’s concept and offerings
Design an intuitive, user-friendly interface that enhances visitor experience
Design an intuitive, user-friendly interface that enhances visitor experience
Design an intuitive, user-friendly interface that enhances visitor experience
Ensure information is delivered quickly and attractively to support visitor decision-making
Ensure information is delivered quickly and attractively to support visitor decision-making
Ensure information is delivered quickly and attractively to support visitor decision-making
Follow best practices for accessibility and clarity in digital design
Follow best practices for accessibility and clarity in digital design
Follow best practices for accessibility and clarity in digital design
The Process: Double Diamond
The Process: Double Diamond
Discover
Discover
Discover
Literature Review
Literature Review
Literature Review
Competitor Analysis
Competitor Analysis
Competitor Analysis
Establish Project Goals
Establish Project Goals
Establish Project Goals
Define
Define
Define
Insight Analysis
Insight Analysis
Insight Analysis
Empathy Map
Empathy Map
Empathy Map
Needs Formulation
Needs Formulation
Needs Formulation
"How Might We"
"How Might We"
"How Might We"
Develop
Develop
Develop
Graphic Profile
Graphic Profile
Graphic Profile
Sketching & Wireframes
Sketching & Wireframes
Sketching & Wireframes
Interactive Prototyping
Interactive Prototyping
Interactive Prototyping
Deliver
Deliver
Deliver
Usability Testing
Usability Testing
Usability Testing
Iteration
Iteration
Iteration
Final Product
Final Product
Final Product
Solution
Solution
Solution
Outcome
Outcome
Outcome
Simplified navigation improved ease of finding key information.
Simplified navigation improved ease of finding key information.
Simplified navigation improved ease of finding key information.
Responsive design ensured consistent experience across devices.
Responsive design ensured consistent experience across devices.
Responsive design ensured consistent experience across devices.
Accessibility enhancements broadened the user base and improved inclusivity.
Accessibility enhancements broadened the user base and improved inclusivity.
Accessibility enhancements broadened the user base and improved inclusivity.
The completed interactive prototype for 15 Minuter En Kvart offers a cohesive, user-friendly digital experience aligned with the restaurant’s fine-casual concept. Prioritizing clear navigation and compelling visuals, this responsive design ensures visitors can easily explore the menu and atmosphere on any device.
The completed interactive prototype for 15 Minuter En Kvart offers a cohesive, user-friendly digital experience aligned with the restaurant’s fine-casual concept. Prioritizing clear navigation and compelling visuals, this responsive design ensures visitors can easily explore the menu and atmosphere on any device.
The completed interactive prototype for 15 Minuter En Kvart offers a cohesive, user-friendly digital experience aligned with the restaurant’s fine-casual concept. Prioritizing clear navigation and compelling visuals, this responsive design ensures visitors can easily explore the menu and atmosphere on any device.
Navigation is designed to be effortless, with a clear hierarchy and visible cues guiding the user through the different parts of the site. Responsive design ensures the website adapts seamlessly across a variety of devices, maintaining both aesthetic appeal and functionality on desktops, tablets, and smartphones.
Navigation is designed to be effortless, with a clear hierarchy and visible cues guiding the user through the different parts of the site. Responsive design ensures the website adapts seamlessly across a variety of devices, maintaining both aesthetic appeal and functionality on desktops, tablets, and smartphones.
Navigation is designed to be effortless, with a clear hierarchy and visible cues guiding the user through the different parts of the site. Responsive design ensures the website adapts seamlessly across a variety of devices, maintaining both aesthetic appeal and functionality on desktops, tablets, and smartphones.
The visual style harmonizes elegance with simplicity, presenting imagery and typography that capture the essence of the restaurant without distracting from usability. Accessibility features, including high contrast, readable font sizes, and logical content order, widen potential reach and contribute to an inclusive digital space.
The visual style harmonizes elegance with simplicity, presenting imagery and typography that capture the essence of the restaurant without distracting from usability. Accessibility features, including high contrast, readable font sizes, and logical content order, widen potential reach and contribute to an inclusive digital space.
The visual style harmonizes elegance with simplicity, presenting imagery and typography that capture the essence of the restaurant without distracting from usability. Accessibility features, including high contrast, readable font sizes, and logical content order, widen potential reach and contribute to an inclusive digital space.
The Process
The Process
The Process
Discover
Discover
Discover
Literature Review
Literature Review
Literature Review
I researched industry best practices focused on key elements such as easy navigation, effective use of visuals, and accessibility. The literature emphasized that high-quality food and atmosphere images influence user engagement, while clear menus and simple layouts improve usability and overall satisfaction. Mobile responsiveness and compliance with accessibility standards were highlighted as crucial to reaching a diverse audience. This research laid the groundwork for a design that prioritizes clarity, aesthetics, and inclusiveness.
I researched industry best practices focused on key elements such as easy navigation, effective use of visuals, and accessibility. The literature emphasized that high-quality food and atmosphere images influence user engagement, while clear menus and simple layouts improve usability and overall satisfaction. Mobile responsiveness and compliance with accessibility standards were highlighted as crucial to reaching a diverse audience. This research laid the groundwork for a design that prioritizes clarity, aesthetics, and inclusiveness.
I researched industry best practices focused on key elements such as easy navigation, effective use of visuals, and accessibility. The literature emphasized that high-quality food and atmosphere images influence user engagement, while clear menus and simple layouts improve usability and overall satisfaction. Mobile responsiveness and compliance with accessibility standards were highlighted as crucial to reaching a diverse audience. This research laid the groundwork for a design that prioritizes clarity, aesthetics, and inclusiveness.
Competitor Analysis
Competitor Analysis
Competitor Analysis
I analyzed several restaurant websites to uncover patterns and gaps. Many competitors suffered from overly complex menu navigation, making it hard for users to quickly find information. Others lacked appealing imagery that could spark appetite or convey atmosphere. The strongest sites offered simple, consistent navigation, clear hierarchy, and attractive visuals that supported brand identity. These insights helped define the direction—focusing on simplicity, strong visuals, and user-friendly menus to guide visitors efficiently.
I analyzed several restaurant websites to uncover patterns and gaps. Many competitors suffered from overly complex menu navigation, making it hard for users to quickly find information. Others lacked appealing imagery that could spark appetite or convey atmosphere. The strongest sites offered simple, consistent navigation, clear hierarchy, and attractive visuals that supported brand identity. These insights helped define the direction—focusing on simplicity, strong visuals, and user-friendly menus to guide visitors efficiently.
I analyzed several restaurant websites to uncover patterns and gaps. Many competitors suffered from overly complex menu navigation, making it hard for users to quickly find information. Others lacked appealing imagery that could spark appetite or convey atmosphere. The strongest sites offered simple, consistent navigation, clear hierarchy, and attractive visuals that supported brand identity. These insights helped define the direction—focusing on simplicity, strong visuals, and user-friendly menus to guide visitors efficiently.
Define
Define
Define
Empathy Mapping
Empathy Mapping
Empathy Mapping
To better understand the users’ feelings and needs, I created an empathy map based on research insights and best practices. This visual tool helped clarify what users find important and challenging when navigating a restaurant website. The empathy map illuminated several key insights that would serve as guiding principles for the design.
To better understand the users’ feelings and needs, I created an empathy map based on research insights and best practices. This visual tool helped clarify what users find important and challenging when navigating a restaurant website. The empathy map illuminated several key insights that would serve as guiding principles for the design.
To better understand the users’ feelings and needs, I created an empathy map based on research insights and best practices. This visual tool helped clarify what users find important and challenging when navigating a restaurant website. The empathy map illuminated several key insights that would serve as guiding principles for the design.
Key insights
Users want effortless navigation to quickly find relevant information.
Users want effortless navigation to quickly find relevant information.
Users want effortless navigation to quickly find relevant information.
Visuals should reflect the restaurant’s atmosphere and brand identity.
Visuals should reflect the restaurant’s atmosphere and brand identity.
Visuals should reflect the restaurant’s atmosphere and brand identity.
The website must be accessible and readable for all visitors.
The website must be accessible and readable for all visitors.
The website must be accessible and readable for all visitors.
Consistent responsive design is required across devices.
Consistent responsive design is required across devices.
Consistent responsive design is required across devices.
Needs Formulation with How Might We
Needs Formulation with How Might We
Needs Formulation with How Might We
From the empathy insights, I derived a set of “How Might We” questions to frame design opportunities and challenges. This method translated abstract observations into focused areas for creative exploration.
From the empathy insights, I derived a set of “How Might We” questions to frame design opportunities and challenges. This method translated abstract observations into focused areas for creative exploration.
From the empathy insights, I derived a set of “How Might We” questions to frame design opportunities and challenges. This method translated abstract observations into focused areas for creative exploration.
The main needs identified were
The main needs identified were
Simplify navigation to minimize user frustration.
Simplify navigation to minimize user frustration.
Use imagery and layout effectively to communicate brand charm.
Use imagery and layout effectively to communicate brand charm.
Ensure text readability and compliance with accessibility standards.
Ensure text readability and compliance with accessibility standards.
Deliver a seamless experience regardless of device type.
Deliver a seamless experience regardless of device type.
Defining the Core Design Challenge
Defining the Core Design Challenge
Defining the Core Design Challenge
To further define the direction, I developed a second set of broader “How Might We” questions inspired by the first set but focusing on synthesizing an overall challenge. Many of these new questions combined or expanded on earlier ones. This second batch of How Might We questions formed the foundation of the design challenge guiding the rest of the project.
To further define the direction, I developed a second set of broader “How Might We” questions inspired by the first set but focusing on synthesizing an overall challenge. Many of these new questions combined or expanded on earlier ones. This second batch of How Might We questions formed the foundation of the design challenge guiding the rest of the project.
To further define the direction, I developed a second set of broader “How Might We” questions inspired by the first set but focusing on synthesizing an overall challenge. Many of these new questions combined or expanded on earlier ones. This second batch of How Might We questions formed the foundation of the design challenge guiding the rest of the project.
This led to the following overarching design challenge
This led to the following overarching design challenge
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?
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
Creating the Visual Identity
Creating the Visual Identity
Creating the Visual Identity
The process began by developing a graphic profile that sets the tone for the project. Choices of color palette, typography, and imagery aimed to communicate the restaurant’s unique personality. This step established a design language to be used throughout all site components.
The process began by developing a graphic profile that sets the tone for the project. Choices of color palette, typography, and imagery aimed to communicate the restaurant’s unique personality. This step established a design language to be used throughout all site components.
The process began by developing a graphic profile that sets the tone for the project. Choices of color palette, typography, and imagery aimed to communicate the restaurant’s unique personality. This step established a design language to be used throughout all site components.
Ideation with Hand-drawn Sketches
Ideation with Hand-drawn Sketches
Ideation with Hand-drawn Sketches
Idea generation was initiated through hand-drawn sketches. Sketching allowed for quick exploration of different layouts and content hierarchies, revealing opportunities and potential challenges in user flow and navigation.
Idea generation was initiated through hand-drawn sketches. Sketching allowed for quick exploration of different layouts and content hierarchies, revealing opportunities and potential challenges in user flow and navigation.
Idea generation was initiated through hand-drawn sketches. Sketching allowed for quick exploration of different layouts and content hierarchies, revealing opportunities and potential challenges in user flow and navigation.
Translating to Digital Wireframes
Translating to Digital Wireframes
Translating to Digital Wireframes
Selected sketches were turned into digital wireframes using Frame0. At this stage, the focus moved to structure and usability, giving a realistic preview of how content would be organized on both desktop and mobile.
Selected sketches were turned into digital wireframes using Frame0. At this stage, the focus moved to structure and usability, giving a realistic preview of how content would be organized on both desktop and mobile.
Selected sketches were turned into digital wireframes using Frame0. At this stage, the focus moved to structure and usability, giving a realistic preview of how content would be organized on both desktop and mobile.
First High-Fidelity Prototype
First High-Fidelity Prototype
First High-Fidelity Prototype
After establishing wireframes in Frame0, the next step was to build the first high-fidelity prototype. This version incorporated the finalized visual elements such as the color palette, typography, and imagery that closely reflected the restaurant’s brand identity. The prototype was interactive, allowing users to click through menus and navigate the site as if it were a live product. This approach helped bring the design closer to reality, offering a realistic preview of the final user experience and a valuable tool for evaluating navigation flows and visual consistency.
After establishing wireframes in Frame0, the next step was to build the first high-fidelity prototype. This version incorporated the finalized visual elements such as the color palette, typography, and imagery that closely reflected the restaurant’s brand identity. The prototype was interactive, allowing users to click through menus and navigate the site as if it were a live product. This approach helped bring the design closer to reality, offering a realistic preview of the final user experience and a valuable tool for evaluating navigation flows and visual consistency.
After establishing wireframes in Frame0, the next step was to build the first high-fidelity prototype. This version incorporated the finalized visual elements such as the color palette, typography, and imagery that closely reflected the restaurant’s brand identity. The prototype was interactive, allowing users to click through menus and navigate the site as if it were a live product. This approach helped bring the design closer to reality, offering a realistic preview of the final user experience and a valuable tool for evaluating navigation flows and visual consistency.
Initial Usability Testing
Initial Usability Testing
Initial Usability Testing
With the hi-fi prototype ready, I conducted initial usability tests to evaluate the design’s effectiveness. Participants navigated the prototype while thinking aloud, which allowed identification of usability issues and points of confusion.
With the hi-fi prototype ready, I conducted initial usability tests to evaluate the design’s effectiveness. Participants navigated the prototype while thinking aloud, which allowed identification of usability issues and points of confusion.
With the hi-fi prototype ready, I conducted initial usability tests to evaluate the design’s effectiveness. Participants navigated the prototype while thinking aloud, which allowed identification of usability issues and points of confusion.
User testing insights
Navigation was not clear enough; one tester said the order of links lacked logical sequence.
Navigation was not clear enough; one tester said the order of links lacked logical sequence.
Navigation was not clear enough; one tester said the order of links lacked logical sequence.
The confirmation page was too bright compared to the previous page, affecting visual consistency.
The confirmation page was too bright compared to the previous page, affecting visual consistency.
The confirmation page was too bright compared to the previous page, affecting visual consistency.
The calendar showed dates from the previous and next month, which confused users about actual bookable dates.
The calendar showed dates from the previous and next month, which confused users about actual bookable dates.
The calendar showed dates from the previous and next month, which confused users about actual bookable dates.
The color scheme was visually inconsistent, causing some confusion.
The color scheme was visually inconsistent, causing some confusion.
The color scheme was visually inconsistent, causing some confusion.
The typography on buttons impaired readability.
The typography on buttons impaired readability.
The typography on buttons impaired readability.
Deliver
Deliver
Deliver
Final Usability Test
Final Usability Test
Final Usability Test
The Deliver phase began with a final usability test conducted on the improved design. This test was performed using the think-aloud method with participants previously engaged in earlier testing, providing consistency and longitudinal insight.
The Deliver phase began with a final usability test conducted on the improved design. This test was performed using the think-aloud method with participants previously engaged in earlier testing, providing consistency and longitudinal insight.
The Deliver phase began with a final usability test conducted on the improved design. This test was performed using the think-aloud method with participants previously engaged in earlier testing, providing consistency and longitudinal insight.
Testing Objectives
Testing Objectives
Testing Objectives
The goal was to confirm that the refinements made after the initial test addressed usability issues and improved the overall user experience. Special attention was given to accessibility, visual coherence, navigation logic, and content clarity.
The goal was to confirm that the refinements made after the initial test addressed usability issues and improved the overall user experience. Special attention was given to accessibility, visual coherence, navigation logic, and content clarity.
The goal was to confirm that the refinements made after the initial test addressed usability issues and improved the overall user experience. Special attention was given to accessibility, visual coherence, navigation logic, and content clarity.
Important Findings
Important Findings
Important Findings
Text too small near forms, reducing readability
Text too small near forms, reducing readability
Users struggled to understand grouping of related elements
Users struggled to understand grouping of related elements
Refinements Implemented
Refinements Implemented
Refinements Implemented
Based on the findings, refinements included unifying the background color scheme with a warm tone to enhance consistency, grouping related elements within card-style containers to improve visual hierarchy, visually muting unavailable calendar dates, and updating typography to boost readability.
Based on the findings, refinements included unifying the background color scheme with a warm tone to enhance consistency, grouping related elements within card-style containers to improve visual hierarchy, visually muting unavailable calendar dates, and updating typography to boost readability.
Based on the findings, refinements included unifying the background color scheme with a warm tone to enhance consistency, grouping related elements within card-style containers to improve visual hierarchy, visually muting unavailable calendar dates, and updating typography to boost readability.
Final Delivery
Final Delivery
Final Delivery
With successful validation from the final usability test, the prototype was deemed complete and delivered. The design balances aesthetic appeal and functional usability, meeting both user needs and business objectives while maintaining inclusivity and accessibility.
With successful validation from the final usability test, the prototype was deemed complete and delivered. The design balances aesthetic appeal and functional usability, meeting both user needs and business objectives while maintaining inclusivity and accessibility.
With successful validation from the final usability test, the prototype was deemed complete and delivered. The design balances aesthetic appeal and functional usability, meeting both user needs and business objectives while maintaining inclusivity and accessibility.
Try the mobile prototype here
Try the mobile prototype here
Try the mobile prototype here
Try the desktop prototype here
Try the desktop prototype here
Try the desktop prototype here