The Shot Spot
The Shot Spot
The Shot Spot
designing a responsive website for a local restaurant to boost users overall digital experience
designing a responsive website for a local restaurant to boost users
overall digital experience
designing a responsive website
for a local restaurant to boost users
overall digital experience
Client
The Shot Spot
The Shot Spot
The Shot Spot
Project Type
Responsive Website
Responsive Website
Responsive Website
Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Year
2024
2024
2024
JUMP AHEAD TO A SPECIFIC PART OF THIS CASE STUDY
JUMP AHEAD TO A SPECIFIC PART OF THIS CASE STUDY
JUMP AHEAD TO A SPECIFIC PART OF THIS CASE STUDY
CASE STUDY CONTENTS
CASE STUDY CONTENTS
CASE STUDY CONTENTS
an overview of the project + its problems
an overview of the project + its problems
an overview of the project + its problems
BACKGROUND
BACKGROUND
BACKGROUND
The Shot Spot, a charming local cafe nestled in Fulham, West London, is a haven for those seeking fresh, seasonal flavors. Founded in 2023 by Italian-born brothers Gusto and Emilio, this haven for deliciousness is a testament to their decision to venture into the hospitality business. Popular among locals and now a viral sensation on TikTok, The Shot Spot boasts a quirky menu and a robust vibe. Their commitment to quality shines through in every cup of coffee, tea, breakfast bowl, and fresh juice, all meticulously crafted with locally-sourced ingredients.
However, The Shot Spot currently lacks a digital presence beyond these viral clips. They don't have a website or social media accounts of their own, leaving potential customers with limited information. To address this challenge and solidify their online presence, we will be creating a responsive website that can be easily accessed across a variety of devices. This will allow them to connect with their existing customer base and expand their reach to a wider audience, ensuring The Shot Spot remains a beloved local institution for years to come.
The Shot Spot, a charming local cafe nestled in Fulham, West London, is a haven for those seeking fresh, seasonal flavors. Founded in 2023 by Italian-born brothers Gusto and Emilio, this haven for deliciousness is a testament to their decision to venture into the hospitality business. Popular among locals and now a viral sensation on TikTok, The Shot Spot boasts a quirky menu and a robust vibe. Their commitment to quality shines through in every cup of coffee, tea, breakfast bowl, and fresh juice, all meticulously crafted with locally-sourced ingredients.
However, The Shot Spot currently lacks a digital presence beyond these viral clips. They don't have a website or social media accounts of their own, leaving potential customers with limited information. To address this challenge and solidify their online presence, we will be creating a responsive website that can be easily accessed across a variety of devices. This will allow them to connect with their existing customer base and expand their reach to a wider audience, ensuring The Shot Spot remains a beloved local institution for years to come.
The Shot Spot, a charming local cafe nestled in Fulham, West London, is a haven for those seeking fresh, seasonal flavors. Founded in 2023 by Italian-born brothers Gusto and Emilio, this haven for deliciousness is a testament to their decision to venture into the hospitality business. Popular among locals and now a viral sensation on TikTok, The Shot Spot boasts a quirky menu and a robust vibe. Their commitment to quality shines through in every cup of coffee, tea, breakfast bowl, and fresh juice, all meticulously crafted with locally-sourced ingredients.
However, The Shot Spot currently lacks a digital presence beyond these viral clips. They don't have a website or social media accounts of their own, leaving potential customers with limited information. To address this challenge and solidify their online presence, we will be creating a responsive website that can be easily accessed across a variety of devices. This will allow them to connect with their existing customer base and expand their reach to a wider audience, ensuring The Shot Spot remains a beloved local institution for years to come.
The Problem
The Shot Spot lacks an online presence due to not having a website or social media accounts of their own.
The Shot Spot lacks an online presence due to not having a website or social media accounts of their own.
The Shot Spot lacks an online presence due to not having a website or social media accounts of their own.
A website is a crucial tool for businesses to thrive in the digital age. It allows them to connect with customers, build trust, and ultimately grow their business overall.
A website is a crucial tool for businesses to thrive in the digital age. It allows them to connect with customers, build trust, and ultimately grow their business overall.
A website is a crucial tool for businesses to thrive in the digital age. It allows them to connect with customers, build trust, and ultimately grow their business overall.
The Task
How might we bridge the gap between The Shot Spot’s captivating physical experience and the vast online audience?
How might we bridge the gap between The Shot Spot’s captivating physical experience and the vast online audience?
How might we bridge the gap between The Shot Spot’s captivating physical experience and the vast online audience?
The answer lies in crafting a responsive website – a digital storefront that seamlessly adapts to any device, be it a smartphone, tablet, or laptop.
The answer lies in crafting a responsive website – a digital storefront that seamlessly adapts to any device, be it a smartphone, tablet, or laptop.
The answer lies in crafting a responsive website – a digital storefront that seamlessly adapts to any device, be it a smartphone, tablet, or laptop.
By creating this online space, The Shot Spot can not only connect with their existing customers but also expand their reach to a wider audience, solidifying their place as a local treasure for the foreseeable future.
By creating this online space, The Shot Spot can not only connect with their existing customers but also expand their reach to a wider audience, solidifying their place as a local treasure for the foreseeable future.
By creating this online space, The Shot Spot can not only connect with their existing customers but also expand their reach to a wider audience, solidifying their place as a local treasure for the foreseeable future.
understanding the competitors
understanding the competitors
understanding the competitors
competitive analysis
competitive analysis
competitive analysis
To ensure I produce a successful responsive website for the Shot Spot I had to conduct competitive analysis. These are my reasons why this research was crucial when bridging this gap that the Shot Spot currently possesses.
To ensure I produce a successful responsive website for the Shot Spot I had to conduct competitive analysis. These are my reasons why this research was crucial when bridging this gap that the Shot Spot currently possesses.
To ensure I produce a successful responsive website for the Shot Spot I had to conduct competitive analysis. These are my reasons why this research was crucial when bridging this gap that the Shot Spot currently possesses.
1
1
1
Identifying Strengths and Weaknesses
Identifying Strengths and Weaknesses
Identifying Strengths and
Weaknesses
By analysing competitor websites, I can identify what they're doing well and where they fall short. This will then allow me to see what resonates with their audience and what features could be improved upon for The Shot Spot's website.
By analysing competitor websites, I can identify what they're doing well and where they fall short. This will then allow me to see what resonates with their audience and what features could be improved upon for The Shot Spot's website.
By analysing competitor websites, I can identify what they're doing well and where they fall short. This will then allow me to see what resonates with their audience and what features could be improved upon for The Shot Spot's website.
2
2
2
Understanding User Expectations
Understanding User Expectations
Understanding User
Expectations
This type of research will help me understand what users expect from a cafe website. This could include features like menus, online ordering, location information, reservation options, and visually appealing food photography.
This type of research will help me understand what users expect from a cafe website. This could include features like menus, online ordering, location information, reservation options, and visually appealing food photography.
This type of research will help me understand what users expect from a cafe website. This could include features like menus, online ordering, location information, reservation options, and visually appealing food photography.
3
3
3
Avoiding Missed Opportunities
Avoiding Missed Opportunities
Avoiding Missed Opportunities
Competitive analysis will help me identify features or functionalities that these competitors might have overlooked. This will then allow me to offer unique value to potential customers and gain a competitive edge when creating this online presence.
Competitive analysis will help me identify features or functionalities that these competitors might have overlooked. This will then allow me to offer unique value to potential customers and gain a competitive edge when creating this online presence.
Competitive analysis will help me identify features or functionalities that these competitors might have overlooked. This will then allow me to offer unique value to potential customers and gain a competitive edge when creating this online presence.
4
4
4
Targeted Content and Design
Targeted Content and Design
Targeted Content and Design
Analysing such helps me tailor content and website design to attract The Shot Spot's ideal customer. You can see what kind of language and visuals resonate with their target audience and adapt my approach accordingly.
Analysing such helps me tailor content and website design to attract The Shot Spot's ideal customer. You can see what kind of language and visuals resonate with their target audience and adapt my approach accordingly.
Analysing such helps me tailor content and website design to attract The Shot Spot's ideal customer. You can see what kind of language and visuals resonate with their target audience and adapt my approach accordingly.
5
5
5
Unique Selling Proposition
Unique Selling Proposition
Unique Selling Proposition
I’ll be able to identify what sets The Shot Spot apart from the competition. Whether it's their focus on locally-sourced ingredients, a quirky atmosphere, or unique menu items, highlighting these differentiators becomes easier when I understand the competitive landscape.
I’ll be able to identify what sets The Shot Spot apart from the competition. Whether it's their focus on locally-sourced ingredients, a quirky atmosphere, or unique menu items, highlighting these differentiators becomes easier when I understand the competitive landscape.
I’ll be able to identify what sets The Shot Spot apart from the competition. Whether it's their focus on locally-sourced ingredients, a quirky atmosphere, or unique menu items, highlighting these differentiators becomes easier when I understand the competitive landscape.
In essence, competitive analysis is like market research for the digital world. By understanding the competitors' strengths and weaknesses, I will create a website that stands out, attracts customers, and positions The Shot Spot for success in the online realm.
In essence, competitive analysis is like market research for the digital world. By understanding the competitors' strengths and weaknesses, I will create a website that stands out, attracts customers, and positions The Shot Spot for success in the online realm.
In essence, competitive analysis is like market research for the digital world. By understanding the competitors' strengths and weaknesses, I will create a website that stands out, attracts customers, and positions The Shot Spot for success in the online realm.
FINDINGS
FINDINGS
FINDINGS
After researching companies that I felt had direct competition with the Shot Spot, I made a checklist of what features I felt were common amongst them. As the Shot Spot is a local family owned establishment I believe that having an ‘About/Our Story section is really important just for consumers to get an understanding of its founding, how every ingredient is locally sourced and how significant their contribution is the community of Hammersmith and Fulham. I believe a Photo Gallery section will be unnecessary as I believe it would be more effective to have such photography embedded within the menu of the coffee shop. As the Shot Spot is not a franchise and it being it’s one and only store, a third party delivery service may be too much to introduce for now but something to consider in the future.
After researching companies that I felt had direct competition with the Shot Spot, I made a checklist of what features I felt were common amongst them. As the Shot Spot is a local family owned establishment I believe that having an ‘About/Our Story section is really important just for consumers to get an understanding of its founding, how every ingredient is locally sourced and how significant their contribution is the community of Hammersmith and Fulham. I believe a Photo Gallery section will be unnecessary as I believe it would be more effective to have such photography embedded within the menu of the coffee shop. As the Shot Spot is not a franchise and it being it’s one and only store, a third party delivery service may be too much to introduce for now but something to consider in the future.
After researching companies that I felt had direct competition with the Shot Spot, I made a checklist of what features I felt were common amongst them. As the Shot Spot is a local family owned establishment I believe that having an ‘About/Our Story section is really important just for consumers to get an understanding of its founding, how every ingredient is locally sourced and how significant their contribution is the community of Hammersmith and Fulham. I believe a Photo Gallery section will be unnecessary as I believe it would be more effective to have such photography embedded within the menu of the coffee shop. As the Shot Spot is not a franchise and it being it’s one and only store, a third party delivery service may be too much to introduce for now but something to consider in the future.
gaining an insight from users
gaining an insight from users
gaining an insight from users
user interviews
user interviews
user interviews
methodology
methodology
methodology
The next type of research for the fictional responsive website I was designing was conducting user interviews, these were remote and involved 4 participants who I believed would give a clear insight into why they visit coffee or juice shops and how they use these shops online presence. I aimed to find out common pain points to ensure this isn’t present in my design and widen my thoughts on what makes an effective website for the Shot Spot. Participants included a range of ethnicities, incomes, locations, and genders to ensure a greater range of data and to avoid bias.
The next type of research for the fictional responsive website I was designing was conducting user interviews, these were remote and involved 4 participants who I believed would give a clear insight into why they visit coffee or juice shops and how they use these shops online presence. I aimed to find out common pain points to ensure this isn’t present in my design and widen my thoughts on what makes an effective website for the Shot Spot. Participants included a range of ethnicities, incomes, locations, and genders to ensure a greater range of data and to avoid bias.
The next type of research for the fictional responsive website I was designing was conducting user interviews, these were remote and involved 4 participants who I believed would give a clear insight into why they visit coffee or juice shops and how they use these shops online presence. I aimed to find out common pain points to ensure this isn’t present in my design and widen my thoughts on what makes an effective website for the Shot Spot. Participants included a range of ethnicities, incomes, locations, and genders to ensure a greater range of data and to avoid bias.
FINDING 1
FINDING 1
FINDING 1
Understanding that coffee and juice shops offer more than just a meal.
Understanding that coffee and juice shops offer more than just a meal.
Understanding that coffee and juice shops offer more than just a meal.
“Sometimes I don’t even order anything, I use the peace and quiet to study”
Participant 2
“Sometimes I don’t even order anything, I use the peace and quiet to study”
Participant 2
“Sometimes I don’t even order anything, I use the peace and quiet to study”
Participant 2
“I use a cafe to meet up with my friends and to catch up, I may occasionally order a frappé”
Participant 4
“I use a cafe to meet up with my friends and to catch up, I may occasionally order a frappé”
Participant 4
“I use a cafe to meet up with my friends and to catch up, I may occasionally order a frappé”
Participant 4
FINDING 2
FINDING 2
FINDING 2
Online ordering is an efficient way to provide customers with a faster, more personalised ordering experience.
Online ordering is an efficient way to provide customers with a faster, more personalised ordering experience.
Online ordering is an efficient way to provide customers with a faster, more personalised ordering experience.
“I always click and collect my coffee in the morning when I am on my way to work, I don’t have time to wait in a queue”
Participant 2
“I always click and collect my coffee in the morning when I am on my way to work, I don’t have time to wait in a queue”
Participant 2
“I always click and collect my coffee in the morning when I am on my way to work, I don’t have time to wait in a queue”
Participant 2
“Since the pandemic, I always have everything I eat delivered, less human interaction the better”
Participant 3
“Since the pandemic, I always have everything I eat delivered, less human interaction the better”
Participant 3
“Since the pandemic, I always have everything I eat delivered, less human interaction the better”
Participant 3
“It’s 2023, you’re ancient if you can’t order little bits and bobs to your door”
Participant 4
“It’s 2023, you’re ancient if you can’t order little bits and bobs to your door”
Participant 4
“It’s 2023, you’re ancient if you can’t order little bits and bobs to your door”
Participant 4
FINDING 3
FINDING 3
FINDING 3
An online presence is 100% crucial for a consumer.
An online presence is 100% crucial for a consumer.
An online presence is 100% crucial for a consumer.
“Do you know how many new restaurants I need to try after saving a bunch on Instagram?”
Participant 1
“Do you know how many new restaurants I need to try after saving a bunch on Instagram?”
Participant 1
“Do you know how many new restaurants I need to try after saving a bunch on Instagram?”
Participant 1
“If I can’t look up the menu and visually see what they have to offer, I won’t be going”
Participant 3
“If I can’t look up the menu and visually see what they have to offer, I won’t be going”
Participant 3
“If I can’t look up the menu and visually see what they have to offer, I won’t be going”
Participant 3
“I only visit coffee shops where I am able to collect points, I love a free drink”
Participant 4
“I only visit coffee shops where I am able to collect points, I love a free drink”
Participant 4
“I only visit coffee shops where I am able to collect points, I love a free drink”
Participant 4
Kelechi, Young Professional
Kelechi, Young Professional
Kelechi, Young Professional
Jahnira, Young Mother
Jahnira, Young Mother
Jahnira, Young Mother
Rob, Tourist
Rob, Tourist
Rob, Tourist
Colin, Content Creator
Colin, Content Creator
Colin, Content Creator
synthesising the data obtained
synthesising the data obtained
synthesising the data obtained
Affinity map
Affinity map
Affinity map
I created an affinity map in order to synthesise my findings. This was used to illuminate patterns hidden within all the information I collected from my 4 participants. I grouped key points based on similarities, themes and connections in order to reveal underlying trends and patterns. I’ll be able to identify the users needs, pain points and understand the ‘why’ behind them which will be in turn allow me to understand the expectations needed for the Shot Spot.
I created an affinity map in order to synthesise my findings. This was used to illuminate patterns hidden within all the information I collected from my 4 participants. I grouped key points based on similarities, themes and connections in order to reveal underlying trends and patterns. I’ll be able to identify the users needs, pain points and understand the ‘why’ behind them which will be in turn allow me to understand the expectations needed for the Shot Spot.
I created an affinity map in order to synthesise my findings. This was used to illuminate patterns hidden within all the information I collected from my 4 participants. I grouped key points based on similarities, themes and connections in order to reveal underlying trends and patterns. I’ll be able to identify the users needs, pain points and understand the ‘why’ behind them which will be in turn allow me to understand the expectations needed for the Shot Spot.
FINDINGS
FINDINGS
FINDINGS
A physical loyalty card is commonly used when it comes to establishments like coffee and juice shops. For example, in Cafe Nero you get a stamp on your card every time you order a hot drink and the 10th one will be free next time you’re in. After this finding I believe that such stamp taking should be captured digitally to avoid the loss of such loyalty card.
As the Shot Spot is a local coffee shop and isn’t open after 3-4pm, I believe that additional capital can be made from hiring out its space. This capital can then be put back into the business to improve things such as its interior or maybe be put away in order to save up for a second venue.
All 4 participants have said that they commonly order or click and collect items from coffee or juice shops to avoid long queues or if they’re in a rush and I believe that such a feature should be present when I build this responsive website.
3 out of 4 of the participants view the menu of a restaurant before physically going in, I believe the addition of photos on a menu would be a great addition for a user.
A physical loyalty card is commonly used when it comes to establishments like coffee and juice shops. For example, in Cafe Nero you get a stamp on your card every time you order a hot drink and the 10th one will be free next time you’re in. After this finding I believe that such stamp taking should be captured digitally to avoid the loss of such loyalty card.
As the Shot Spot is a local coffee shop and isn’t open after 3-4pm, I believe that additional capital can be made from hiring out its space. This capital can then be put back into the business to improve things such as its interior or maybe be put away in order to save up for a second venue.
All 4 participants have said that they commonly order or click and collect items from coffee or juice shops to avoid long queues or if they’re in a rush and I believe that such a feature should be present when I build this responsive website.
3 out of 4 of the participants view the menu of a restaurant before physically going in, I believe the addition of photos on a menu would be a great addition for a user.
A physical loyalty card is commonly used when it comes to establishments like coffee and juice shops. For example, in Cafe Nero you get a stamp on your card every time you order a hot drink and the 10th one will be free next time you’re in. After this finding I believe that such stamp taking should be captured digitally to avoid the loss of such loyalty card.
As the Shot Spot is a local coffee shop and isn’t open after 3-4pm, I believe that additional capital can be made from hiring out its space. This capital can then be put back into the business to improve things such as its interior or maybe be put away in order to save up for a second venue.
All 4 participants have said that they commonly order or click and collect items from coffee or juice shops to avoid long queues or if they’re in a rush and I believe that such a feature should be present when I build this responsive website.
3 out of 4 of the participants view the menu of a restaurant before physically going in, I believe the addition of photos on a menu would be a great addition for a user.
a clear representation of the intended user group
a clear representation of the intended user group
a clear representation of the intended user group
user persona
user persona
user persona
After reviewing and summarising the interview results, I created a user persona which will help represent a user type that would ideally interact with the Shot Spot. This detailed profile will not only go beyond demographics but also incorporate the user’s goals, needs, behaviours, motivations and even frustrations with help from the affinity map I created previously. For this project I will be focusing on aspects such as online reservations, online ordering and possibly an in-app loyalty scheme. I created Taylor as the Shot Spot’s relatable persona.
After reviewing and summarising the interview results, I created a user persona which will help represent a user type that would ideally interact with the Shot Spot. This detailed profile will not only go beyond demographics but also incorporate the user’s goals, needs, behaviours, motivations and even frustrations with help from the affinity map I created previously. For this project I will be focusing on aspects such as online reservations, online ordering and possibly an in-app loyalty scheme. I created Taylor as the Shot Spot’s relatable persona.
After reviewing and summarising the interview results, I created a user persona which will help represent a user type that would ideally interact with the Shot Spot. This detailed profile will not only go beyond demographics but also incorporate the user’s goals, needs, behaviours, motivations and even frustrations with help from the affinity map I created previously. For this project I will be focusing on aspects such as online reservations, online ordering and possibly an in-app loyalty scheme. I created Taylor as the Shot Spot’s relatable persona.
understanding our overall goal
understanding our overall goal
understanding our overall goal
project goals
project goals
project goals
The overall analysis from the competitive research, user interviews and user persona enabled me to create a project goal map which enlists the Shot Spot’s goals as well as aligning them with that of the users. This process allows me to identify every area that could have potentiality been overlooked and all in all allowing me to create the best possible product fot the Shot Spot.
The overall analysis from the competitive research, user interviews and user persona enabled me to create a project goal map which enlists the Shot Spot’s goals as well as aligning them with that of the users. This process allows me to identify every area that could have potentiality been overlooked and all in all allowing me to create the best possible product fot the Shot Spot.
The overall analysis from the competitive research, user interviews and user persona enabled me to create a project goal map which enlists the Shot Spot’s goals as well as aligning them with that of the users. This process allows me to identify every area that could have potentiality been overlooked and all in all allowing me to create the best possible product fot the Shot Spot.
Envision how users will interact with features
Envision how users will interact with features
Envision how users will interact with features
interaction design
interaction design
interaction design
site map
site map
site map
Guided by what I had understood from the research phase of this project, my next creation would be a Site Map of the Shot Spot’s website. This will be a visual representation of the website’s back bone and it’ll be presented as a hierarchical list. From my Competitive Research, I was able to gather what usual content is needed for such a website as well as know what would be needed in addition to meet the mutual goals I concluded from my Project Goals.
Guided by what I had understood from the research phase of this project, my next creation would be a Site Map of the Shot Spot’s website. This will be a visual representation of the website’s back bone and it’ll be presented as a hierarchical list. From my Competitive Research, I was able to gather what usual content is needed for such a website as well as know what would be needed in addition to meet the mutual goals I concluded from my Project Goals.
Guided by what I had understood from the research phase of this project, my next creation would be a Site Map of the Shot Spot’s website. This will be a visual representation of the website’s back bone and it’ll be presented as a hierarchical list. From my Competitive Research, I was able to gather what usual content is needed for such a website as well as know what would be needed in addition to meet the mutual goals I concluded from my Project Goals.
TASK FLOW
TASK FLOW
TASK FLOW
I developed task flows outlining the path users would follow for various paths on the Shot Spot website. These flows considered various scenarios and decision points to guide users in achieving their goals.
I developed task flows outlining the path users would follow for various paths on the Shot Spot website. These flows considered various scenarios and decision points to guide users in achieving their goals.
I developed task flows outlining the path users would follow for various paths on the Shot Spot website. These flows considered various scenarios and decision points to guide users in achieving their goals.
Creating the brand identity
Creating the brand identity
Creating the brand identity
Branding
Branding
Branding
The fictional brunch cafe, the Shot Spot was created by brainstorming potential names and a few hand drawn sketches. To build the brand identity I first considered a few names that would suit a ‘charming, local cafe’ in Fulham. Once I settled on either ‘Spill the Tea’ or the “Shot Spot’, the hand drawn sketches led me produce a logo and ultimately the Shot Spot was born.
The fictional brunch cafe, the Shot Spot was created by brainstorming potential names and a few hand drawn sketches. To build the brand identity I first considered a few names that would suit a ‘charming, local cafe’ in Fulham. Once I settled on either ‘Spill the Tea’ or the “Shot Spot’, the hand drawn sketches led me produce a logo and ultimately the Shot Spot was born.
The fictional brunch cafe, the Shot Spot was created by brainstorming potential names and a few hand drawn sketches. To build the brand identity I first considered a few names that would suit a ‘charming, local cafe’ in Fulham. Once I settled on either ‘Spill the Tea’ or the “Shot Spot’, the hand drawn sketches led me produce a logo and ultimately the Shot Spot was born.
name ideas
name ideas
name ideas
logo ideas
logo ideas
logo ideas
Style card
Style card
Style card
UI KIT
UI KIT
UI KIT
understanding how users would interact with the interface
understanding how users would interact with the interface
understanding how users would interact with the interface
wireframes
wireframes
wireframes
Lo-Fi Wireframes
Lo-Fi Wireframes
Lo-Fi Wireframes
I created Lo-Fi wireframes for the layout and functionality of the Shot Spot, I decided to focus on a website and mobile interface. Once I had these drawn out, I asked the same 4 participants I used for my user interviews for their feedback and was able to identify and address usability issues early on that would in turn save time and resources later in the development process.
I created Lo-Fi wireframes for the layout and functionality of the Shot Spot, I decided to focus on a website and mobile interface. Once I had these drawn out, I asked the same 4 participants I used for my user interviews for their feedback and was able to identify and address usability issues early on that would in turn save time and resources later in the development process.
I created Lo-Fi wireframes for the layout and functionality of the Shot Spot, I decided to focus on a website and mobile interface. Once I had these drawn out, I asked the same 4 participants I used for my user interviews for their feedback and was able to identify and address usability issues early on that would in turn save time and resources later in the development process.
hi-Fi Wireframes
hi-Fi Wireframes
hi-Fi Wireframes
Figma was then used to create the Hi-Fi wireframes for the Shot Spot. This incorporates elements from the mood board as well as any iterations I gathered from my participants.
Figma was then used to create the Hi-Fi wireframes for the Shot Spot. This incorporates elements from the mood board as well as any iterations I gathered from my participants.
Figma was then used to create the Hi-Fi wireframes for the Shot Spot. This incorporates elements from the mood board as well as any iterations I gathered from my participants.
understanding how users would interact with the interface
understanding how users would interact with the interface
understanding how users would interact with the interface
usability
usability
usability
A few usability tests were then performed to make sure that my design process for this digital experience resulted in an effective user experience. I conducted these tests using my user flows along with 10 different participants I found through a Twitter thread when I broadcasted my initial market research for the Shot Spot. Through these tests I was provided with crucial insights into the user experience.
A few usability tests were then performed to make sure that my design process for this digital experience resulted in an effective user experience. I conducted these tests using my user flows along with 10 different participants I found through a Twitter thread when I broadcasted my initial market research for the Shot Spot. Through these tests I was provided with crucial insights into the user experience.
A few usability tests were then performed to make sure that my design process for this digital experience resulted in an effective user experience. I conducted these tests using my user flows along with 10 different participants I found through a Twitter thread when I broadcasted my initial market research for the Shot Spot. Through these tests I was provided with crucial insights into the user experience.
TASK SCENARIO
TASK SCENARIO
TASK SCENARIO
“Imagine you have wondered into a local coffee shop that has just opened
up at the end of the street and have decided to do a quick click and
collect order before you head back home. Once you’re home, you were
taken away with the quality of your meal that you book a table to take
your partner to the Shot Spot on Saturday after your couples workout”
“Imagine you have wondered into a local coffee shop that has just opened
up at the end of the street and have decided to do a quick click and
collect order before you head back home. Once you’re home, you were
taken away with the quality of your meal that you book a table to take
your partner to the Shot Spot on Saturday after your couples workout”
“Imagine you have wondered into a local coffee shop
that has just opened up at the end of the street and
have decided to do a quick click and collect order
before you head back home. Once you’re home,
you were taken away with the quality of your meal
that you book a table to take your partner to the
Shot Spot on Saturday after your couples workout”
TASK 1
The user is creating an
account on the Shot Spot
website
The user is creating an
account on the Shot Spot
website
The user is creating an
account on the Shot Spot
website
Account Creation
Account Creation
Account Creation
TASK 2
The user is making a
reservation for a table
The user is making a
reservation for a table
The user is making a
reservation for a table
Table Reservation
Table Reservation
Table Reservation
TASK 3
The user is making an online
order using click and collect
The user is making an online
order using click and collect
The user is making an online
order using click and collect
Click and Collect
Click and Collect
Click and Collect
RESULTS ANALYSIS
RESULTS ANALYSIS
RESULTS ANALYSIS
The majority of users who tested the app found it highly intuitive and easy to navigate, demonstrating a strong level of usability. This feedback confirms that the app’s design effectively meets user needs for simplicity and ease of use.
Overall feedback was positive, with testers praising the product’s aesthetic design and user-friendly interface. However, some constructive recommendations emerged. Testers suggested modifying the calendar booking system on the mobile version, as elements appeared too small when presented in the same layout as the desktop interface. Additionally, users recommended using a lighter font colour when displayed on darker backgrounds to enhance readability and usability.
These insights provide valuable direction for refining the app, particularly in ensuring that it offers an optimal experience across devices and prioritises accessibility in all interface elements.
The majority of users who tested the app found it highly intuitive and easy to navigate, demonstrating a strong level of usability. This feedback confirms that the app’s design effectively meets user needs for simplicity and ease of use.
Overall feedback was positive, with testers praising the product’s aesthetic design and user-friendly interface. However, some constructive recommendations emerged. Testers suggested modifying the calendar booking system on the mobile version, as elements appeared too small when presented in the same layout as the desktop interface. Additionally, users recommended using a lighter font colour when displayed on darker backgrounds to enhance readability and usability.
These insights provide valuable direction for refining the app, particularly in ensuring that it offers an optimal experience across devices and prioritises accessibility in all interface elements.
The majority of users who tested the app found it highly intuitive and easy to navigate, demonstrating a strong level of usability. This feedback confirms that the app’s design effectively meets user needs for simplicity and ease of use.
Overall feedback was positive, with testers praising the product’s aesthetic design and user-friendly interface. However, some constructive recommendations emerged. Testers suggested modifying the calendar booking system on the mobile version, as elements appeared too small when presented in the same layout as the desktop interface. Additionally, users recommended using a lighter font colour when displayed on darker backgrounds to enhance readability and usability.
These insights provide valuable direction for refining the app, particularly in ensuring that it offers an optimal experience across devices and prioritises accessibility in all interface elements.
systematic changes made to the design of a product
systematic changes made to the design of a product
systematic changes made to the design of a product
design revisions
design revisions
design revisions
REVISION 1
REVISION 1
REVISION 1
Users felt that the calendar on the booking system was too small
Users felt that the calendar on the booking system was too small
Users felt that the calendar on the booking system was too small
During creating the calendar booking system feature for the mobile interface, I copied the same interface used for the desktop version but scaled it down. Users felt that the overall design was small and hard to read unless zoomed in.
To eliminate the difficulty users felt when viewing the different dates of availability I completely re-designed the interface on the calendar for the mobile version of the Shot Spot’s digital experience.
During creating the calendar booking system feature for the mobile interface, I copied the same interface used for the desktop version but scaled it down. Users felt that the overall design was small and hard to read unless zoomed in.
To eliminate the difficulty users felt when viewing the different dates of availability I completely re-designed the interface on the calendar for the mobile version of the Shot Spot’s digital experience.
During creating the calendar booking system feature for the mobile interface, I copied the same interface used for the desktop version but scaled it down. Users felt that the overall design was small and hard to read unless zoomed in.
To eliminate the difficulty users felt when viewing the different dates of availability I completely re-designed the interface on the calendar for the mobile version of the Shot Spot’s digital experience.
REVISION 2
REVISION 2
REVISION 2
Users believed the contrast ratio within the buttons were low
Users believed the contrast ratio within the buttons were low
Users believed the contrast ratio within the buttons were low
The testers felt that the background behind the fonts used on some of the buttons screens made the letters/words unreadable or felt that they blended a little too well together.
To increase the contract ratio between the font and rectangle colours, I used a contrast ratio ratio to ensure that it fell between 90%-100%.
The testers felt that the background behind the fonts used on some of the buttons screens made the letters/words unreadable or felt that they blended a little too well together.
To increase the contract ratio between the font and rectangle colours, I used a contrast ratio ratio to ensure that it fell between 90%-100%.
The testers felt that the background behind the fonts used on some of the buttons screens made the letters/words unreadable or felt that they blended a little too well together.
To increase the contract ratio between the font and rectangle colours, I used a contrast ratio ratio to ensure that it fell between 90%-100%.
VIEW THE FINAL PRODUCT WHILST DISCUSSING FURTHER STEPS
VIEW THE FINAL PRODUCT WHILST DISCUSSING FURTHER STEPS
VIEW THE FINAL PRODUCT WHILST DISCUSSING FURTHER STEPS
conclusion
conclusion
conclusion
In conclusion, developing the end-to-end application for The Shot Spot was a rewarding journey aimed at enhancing the coffee shop experience and meeting the needs of both customers and staff. With features like click-and-collect ordering, table reservations, and account creation, the app creates a seamless, efficient process for patrons, allowing them to enjoy their experience even before they step inside. This project was a meaningful opportunity to blend technology with community, building an app that makes everyday interactions smoother and more enjoyable.
For the next steps, gathering user feedback is essential to refine the app further, especially focusing on the usability of the reservation and ordering systems. Additional features, such as loyalty rewards for frequent visitors and personalized recommendations based on previous orders, could also add significant value, strengthening customer loyalty and engagement. As The Shot Spot continues to grow, scaling the app to support events, special promotions, and perhaps even delivery options could bring even more convenience and connection to the local community.
In conclusion, developing the end-to-end application for The Shot Spot was a rewarding journey aimed at enhancing the coffee shop experience and meeting the needs of both customers and staff. With features like click-and-collect ordering, table reservations, and account creation, the app creates a seamless, efficient process for patrons, allowing them to enjoy their experience even before they step inside. This project was a meaningful opportunity to blend technology with community, building an app that makes everyday interactions smoother and more enjoyable.
For the next steps, gathering user feedback is essential to refine the app further, especially focusing on the usability of the reservation and ordering systems. Additional features, such as loyalty rewards for frequent visitors and personalized recommendations based on previous orders, could also add significant value, strengthening customer loyalty and engagement. As The Shot Spot continues to grow, scaling the app to support events, special promotions, and perhaps even delivery options could bring even more convenience and connection to the local community.
In conclusion, developing the end-to-end application for The Shot Spot was a rewarding journey aimed at enhancing the coffee shop experience and meeting the needs of both customers and staff. With features like click-and-collect ordering, table reservations, and account creation, the app creates a seamless, efficient process for patrons, allowing them to enjoy their experience even before they step inside. This project was a meaningful opportunity to blend technology with community, building an app that makes everyday interactions smoother and more enjoyable.
For the next steps, gathering user feedback is essential to refine the app further, especially focusing on the usability of the reservation and ordering systems. Additional features, such as loyalty rewards for frequent visitors and personalized recommendations based on previous orders, could also add significant value, strengthening customer loyalty and engagement. As The Shot Spot continues to grow, scaling the app to support events, special promotions, and perhaps even delivery options could bring even more convenience and connection to the local community.
final prototype
final prototype
final prototype
As the project came to a conclusion, my final deliverable was an interactive, high-fidelity prototype. I added the iterations to the prototype and handed off my wireframes, design files, and the prototype to my collaborator, whose task now was implementation.
As the project came to a conclusion, my final deliverable was an interactive, high-fidelity prototype. I added the iterations to the prototype and handed off my wireframes, design files, and the prototype to my collaborator, whose task now was implementation.
As the project came to a conclusion, my final deliverable was an interactive, high-fidelity prototype. I added the iterations to the prototype and handed off my wireframes, design files, and the prototype to my collaborator, whose task now was implementation.