After 4 years without changes, I added responsiveness, new features, and modernization to Arthur's Garden Deli's website
After 4 years without changes, I added responsiveness, new features, and modernization to Arthur's Garden Deli's website
Was my mad experiment successful? Let's see…
Was my mad experiment successful? Let's see…
Was my mad experiment successful? Let's see…
10 min read · May 8, 2025
Updated menu page prototype
Updated menu page prototype
Project Summary
Project Summary
Project Summary
Length
4 weeks
My Deliverables
- 6 user interviews & summaries
- 3 user flow charts
- Affinity map
- Low and mid-fi prototype site
- 2 rounds of usability tests
- Hi-fi prototype site
Length
4 weeks
My Deliverables
- 6 user interviews & summaries
- 3 user flow charts
- Affinity map
- Low and mid-fi prototype site
- 2 rounds of usability tests
- Hi-fi prototype site
Length
4 weeks
My Deliverables
- 6 user interviews & summaries
- 3 user flow charts
- Affinity map
- Low and mid-fi prototype site
- 2 rounds of usability tests
- Hi-fi prototype site
Problem
Problem
Problem
The website arthursgardendeli.com is not responsive and lacks common interactive features. It has fallen behind the times and can use quite a bit of modernization to improve customer experience.
The website arthursgardendeli.com is not responsive and lacks common interactive features. It has fallen behind the times and can use quite a bit of modernization to improve customer experience.
The website arthursgardendeli.com is not responsive and lacks common interactive features. It has fallen behind the times and can use quite a bit of modernization to improve customer experience.
Why you should read on…
Why you should read on…
I was VP of Arthur's Garden Deli and created the current site 4 years ago. I was a total noob. I did not reach out to a single customer to get their opinion on what should be included on the site.
Design goes out of style in the blink of an eye. Arthur's Garden Deli's site hasn't been updated in 4 years and isn't responsive. The current site has videos of employees with masks on. Yikes.
I was VP of Arthur's Garden Deli and created the current site 4 years ago. I was a total noob. I did not reach out to a single customer to get their opinion on what should be included on the site.
Design goes out of style in the blink of an eye. Arthur's Garden Deli's website hasn't been updated in 4 years and isn't responsive. The current site has videos of employees with masks on. Yikes.
Why you should read on…
I was VP of Arthur's Garden Deli and created the current site 4 years ago. I was a total noob. I did not reach out to a single customer to get their opinion on what should be included on the site.
Design goes out of style in the blink of an eye. Arthur's Garden Deli's site hasn't been updated in 4 years and isn't responsive. The current site has videos of employees with masks on. Yikes.
This time around, I decided to include the customers voice. Even though I made somewhat minor changes to the site, the design will be more interactive and effective for them to use - hopefully increasing customer traffic.
User Insights
User Insights
A couple bits of knowledge gained in the initial user interviews…
A couple bits of knowledge gained in the initial user interviews…
This time around, I decided to include the customers voice. Even though I made somewhat minor changes to the site, the design will be more interactive and effective for them to use - hopefully increasing customer traffic.
Appearance score for Arthur's Garden Deli's current site:
9.29/10
9.29/10
9.29/10
I learned a valuable lesson - interview some people that aren't familiar with your product, to hear more criticism. I only interviewed loyal Arthur's customers and the business owner.
The most-voted featured requests:
#1 Menu item calorie counts
#2 Downloadable food menu
#3 Employee recognition page
#1 Menu item calorie counts
#2 Downloadable food menu
#3 Employee recognition page
#1 Menu item calorie counts
#2 Downloadable food menu
#3 Employee recognition page
It was very intriguing to hear customer opinions. It's something I did not do when I created the current site.
I heard from all 6 users that they really liked the current site. This made me decide to not make drastic changes. Instead, I will add responsiveness and smaller new features throughout, to bring it up to date.
The following persona exemplifies that…
I heard from all 6 users that they really liked the current site. This made me decide to not make drastic changes. Instead, I will add responsiveness and smaller new features throughout, to bring it up to date.
The following persona exemplifies that…
I heard from all 6 users that they really liked the current site. This made me decide to not make drastic changes. Instead, I will add responsiveness and smaller new features throughout, to bring it up to date.
The following persona exemplifies that…
Jack
The Almost Content Online Customer
About
38
Chicago
Teacher
Bachelor’s
Male
Married
Intuitive
Tech Savvy
High Energy
Giving
Supports Local
Loves simpliciity
Wants
Wants the menu to be transparent on calorie counts and gluten free options
Would like to see any community involvement
Would like to see the website updated a bit since it has not been updated in years
Wants the mobile version to resemble the desktop version more
Pain Points
The mobile version doesn’t have the same character and animation as the desktop version and it leaves him wanting more. He uses mobile version nearly every time to access the site and thinks it could be more appealing and eye-catching. It also causes slight confusion as to why there is a difference between the two versions.
The website doesn’t adjust well to different screen sizes causing a somewhat clunky experience
The menu could use some engagement features and nutritional info. It is not as transparent as he would like.
Personality
Introvert
Extrovert
tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Thinking
Feeling
bbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfd
Judging
Prospecting
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Assertive
Turbulent
nbbubbubbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxddfghvhcftxfxfxdxrdrdfrfd
Intuitive
Observant
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Technical Skills
Internet
Social Networks
Online Ordering
Background
Jack is a big proponent of supporting local restaurants. He loves to place orders online. The most important thing to him regarding restaurant websites is that they are easy to navigate, simple to place orders on, give a strong and accurate glimpse of the resturant’s culture, and an uncluttered interface.
There is one restaurant in particular that he LOVES but he notices that their site is not updated very often, is missing some key info on the menu page, and they don’t have a community page on their site even though they are active with local charities.
He also notices that the desktop and mobile versions have various deviations (videos, animation, etc.). He likes the desktop version better and wishes the mobile version resembled the desktop since he uses the mobile site nearly evert time.
He thinks the website looks great and is intuitive, but could use a little fine tuning here and there to showcase the restaurant in an even better light.
Jack
The Almost Content Online Customer
About
38
Chicago
Teacher
Bachelor’s
Male
Married
Intuitive
Tech Savvy
High Energy
Giving
Supports Local
Loves simpliciity
Wants
Wants the menu to be transparent on calorie counts and gluten free options
Would like to see any community involvement
Would like to see the website updated a bit since it has not been updated in years
Wants the mobile version to resemble the desktop version more
Pain Points
The mobile version doesn’t have the same character and animation as the desktop version and it leaves him wanting more. He uses mobile version nearly every time to access the site and thinks it could be more appealing and eye-catching. It also causes slight confusion as to why there is a difference between the two versions.
The website doesn’t adjust well to different screen sizes causing a somewhat clunky experience
The menu could use some engagement features and nutritional info. It is not as transparent as he would like.
Personality
Introvert
Extrovert
tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Thinking
Feeling
bbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfd
Judging
Prospecting
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Assertive
Turbulent
nbbubbubbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxddfghvhcftxfxfxdxrdrdfrfd
Intuitive
Observant
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Technical Skills
Internet
Social Networks
Online Ordering
Background
Jack is a big proponent of supporting local restaurants. He loves to place orders online. The most important thing to him regarding restaurant websites is that they are easy to navigate, simple to place orders on, give a strong and accurate glimpse of the resturant’s culture, and an uncluttered interface.
There is one restaurant in particular that he LOVES but he notices that their site is not updated very often, is missing some key info on the menu page, and they don’t have a community page on their site even though they are active with local charities.
He also notices that the desktop and mobile versions have various deviations (videos, animation, etc.). He likes the desktop version better and wishes the mobile version resembled the desktop since he uses the mobile site nearly evert time.
He thinks the website looks great and is intuitive, but could use a little fine tuning here and there to showcase the restaurant in an even better light.
This persona added clarity on what key features I needed to include in the low-fi wireframing phase. And after establishing the problem and creating the user persona, I was ready to begin the fun part: the design process…
This persona added clarity on what key features I needed to include in the low-fi wireframing phase. And after establishing the problem and creating the user persona, I was ready to begin the fun part: the design process…
This persona added clarity on what key features I needed to include in the low-fi wireframing phase. And after establishing the problem and creating the user persona, I was ready to begin the fun part: the design process…
Design Process
Design Process
Design Process
Phase 1
User Interviews
Interviewed 5 Arthur's customers and the business owner. I used their insights to craft my low-fi prototype site.
To Interview Insights
Phase 2
Low-Fi Prototype Site
After the user interviews, I gathered common user requests and implemented them into my low-fi prototype site design
To Lo-Fi Prototype
Phase 3
Unmoderated User Tests
All 6 users tested my low-fi site and then filled out a questionnaire to help me see which requests were most common
To Lo-Fi User Test Results
Phase 4
Hi-Fi Prototype Site
After assessing the responses on the user questionnaires, I was able to add more features, color and media to the site
To Hi-Fi Prototype
Phase 5
Hi-Fi User Tests
The 6 users then tested the hi-fi prototype site with me and gave further recs on what to improve and what they liked.
To Hi-Fi User Test Results
Phase 6
Final Prototype Site
After the final round of user tests, I incorporated their new insights into my design to improve customer-friendliness
To Final Prototype
1. User Interviews
1. User Interviews
Including customer opinion in my updated design was something new and led to some unexpected insights and requests.
Avg user rating of the importance of liking and rating menu items
7.14/10
Avg user rating of Arthur's Garden Deli's current site
9.29/10
Avg user rating of the importance of website responsiveness
9.71/10
"I love the addition of the allergy icons on the menu. The menu is easier in this format to get to exactly what you want." - user
The user interviews provided me with the clarity I needed to make the website more user-centered. For instance, I had never considered the idea of creating a community page to highlight the organizations that Arthur's supports through donations. Additionally, I was surprised to learn how aware customers are of Arthur's contributions to non-profits.
Lastly, I learned in the interviews that the current site is very highly thought of. Had I not conducted the interviews, I likely would have COMPLETELY reworked the website in an entirely different style.
1. User Interviews
Including customer opinion in my updated design was something new and led to some unexpected insights and requests.
Top 3 User Insights
Users were given a questionnaire to complete after the interviews and it grouped everyone's responses together. The following were the top 3 responses:
Avg user rating of the importance of liking and rating menu items
7.14/10
Avg user rating of the importance of liking and rating menu items
7.14/10
Avg user rating of Arthur's Garden Deli's current site
9.29/10
Avg user rating of the importance of website responsiveness
9.71/10
The user interviews provided me with the clarity I needed to make the website more user-centered. For instance, I had never considered the idea of creating a community page to highlight the organizations that Arthur's supports through donations. Additionally, I was surprised to learn how aware customers are of Arthur's contributions to non-profits.
Lastly, I learned in the interviews that the current site is very highly thought of. Had I not conducted the interviews, I likely would have COMPLETELY reworked the website in an entirely different style.
The user interviews provided me with the clarity I needed to make the website more user-centered. For instance, I had never considered the idea of creating a community page to highlight the organizations that Arthur's supports through donations. Additionally, I was surprised to learn how aware customers are of Arthur's contributions to non-profits.
Lastly, I learned in the interviews that the current site is very highly thought of. Had I not conducted the interviews, I likely would have COMPLETELY reworked the website in an entirely different style.
2. Low-Fi Prototype Site
2. Low-Fi Prototype Site
2. Low-Fi
Prototype Site
Following the user interviews, I started creating the low-fi framework of the prototype site.
Users let me know which elements are most important to have on the homepage. The top 3 voted homepage elements were: 1. Order Online Button, 2. Menu Page Link, and 3. Hours. The following video shows the low-fi homepage…
3. Unmoderated User Tests
Including customer opinion in my updated design was something new and led to some unexpected insights and requests.
3. Low-Fi Unmoderated User Tests
3. Low-Fi Unmoderated User Tests
Then, I had users test out the low-fi wireframes and complete a questionnaire following their test to give me further insights. I was hoping to gain valuable insights about my low-fi design work that would make my hi-fi design very effective.
I wanted to know if the updated homepage, updated menu page, and community page addition were seen as positives in the users eyes.
These were some of the responses I received…
Navigability Rating
9.50/10
Menu Page Layout Rating
9.67/10
Community Page Layout Rating
8.00/10
"I love the addition of the allergy icons on the menu. The menu is easier in this format to get to exactly what you want." - user
Navigability Rating
9.50/10
Menu Page Layout Rating
9.67/10
Community Page Layout Rating
8.00/10
"I love the addition of the allergy icons on the menu. The menu is easier in this format to get to exactly what you want." - user
Navigability Rating
9.50/10
Menu Page Layout Rating
9.67/10
Community Page Layout Rating
8.00/10
"I love the addition of the allergy icons on the menu. The menu is easier in this format to get to exactly what you want." - user
4. Hi-Fi Prototype Site
4. Hi-Fi Prototype Site
4. Hi-Fi Prototype Site
Following the low-fi user tests, I designed the hi-fi prototype site. Using user input, the following is what I created…
See Hi-Fi Prototype
New Community Page
New Community Page
New Community Page
3 users during interviews commented that Arthur's Garden Deli should have a community page. But instead of just showing who Arthur's donates to, it gives customers a chance to donate themselves.
This page's primary purpose is to serve as a promotion tool for non-profit organizations.
5. Hi-Fi User Tests
5. Hi-Fi User Tests
5. Hi-Fi User Tests
After I completed my hi-fi prototype, I ran moderated users tests with all 6 participants. The primary purpose of this user test was to do an A/B comparison assessment - comparing the prototype site with the current site. The feedback was very positive.
However, while going through the tests, the users and I noticed responsiveness issues. I most focused on those issues in my final prototype site.
Responsiveness Rating
8.00/10
Top 4 User Takeaways of Hi-Fi Prototype
· Easy to navigate
· Modern
· Professional
· Efficient
Responsiveness Rating
8.00/10
Room for improvement!
Top 4 User Takeaways of Hi-Fi Prototype
Top 4 User Takeaways of Hi-Fi Prototype
#1 - Easy to navigate
#2 - Modern
#3 - Professional
#4 - Efficient
#1 - Easy to navigate
#2 - Modern
#3 - Professional
#4 - Efficient
6. Final Prototype Site
6. Final Prototype Site
6. Final Prototype Site
Following the last round of user tests, I created the final hi-fi prototype site. This version has some further improved design elements and responsiveness, which was the biggest reported issue in the last prototype draft.
See Final Prototype
Homepage A/B Comparison
Current Mobile Homepage
Current Mobile Homepage
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Updated Mobile Prototype Homepage
Updated Mobile Prototype Homepage
Updated mobile prototype homepage
Browse dozens of professionally designed templates. Click, duplicate, customize.
Browse dozens of professionally designed templates. Click, duplicate, customize.
Menu Page A/B Comparison
Current Tablet Menu Page
Current Tablet Menu Page
Install the Figma plugin and you’re ready to convert your designs to a responsive site.
Updated Tablet Prototype Menu Page
Updated Tablet Prototype Menu Page
Updated Tablet Prototype Menu Page
Browse dozens of professionally designed templates. Click, duplicate, customize.
Responsiveness A/B Comparison
Current site responsiveness
Current site responsiveness
Prototype site responsiveness
Prototype site responsiveness
User Success Metrics
"I love the changes you made to the website. The design looks amazing and it is easy to navigate. Your attention to detail really shows through in its design. Pictures are very true to life for the products. I love the motion videos as well." - User
"I like a lot of the newer features that create more of an interactive experience with Arthur's--it encourages patrons of Arthur's to return to the website to add feedback which increases traffic. I think my favorite new aspect is the community aspect." - User
100%
A/B Comparison Rating
All 6 users voted that the prototype site is overall better than the current site. Success!
9.17/10
A/B Comparison Rating (on a 1-10 scale)
The avg score when users were asked how well the prototype compares to the current site.
8.00/10
Responsiveness Score
Room for improvement! But a big upgrade over the original site.
9.83/10
Culture-Fit Score
User felt the prototype site fit the Arthur's culture extremely well.
8.50/10
New Feature Score
Users liked the the added feature of being able to like and rate menu items.
9.67/10
New Page Score
Users really liked the addition of the Community page. They felt it was a great idea to help promote non-profit organizations.
9.00/10
Updated Homepage Score
Users felt the appearance of the prototype homepage was a sizable improvement.
9.33/10
Updated Menu Page Score
Users felt the appearance the prototype menu page was a sizable improvement.
Received New Insights
In the final interview and questionnaire, users gave me additional insights for even further improvement of the site.
Up next…
Up next…
I would do another round of user interviews. However, I would interview at least 3 additional people that aren't familiar with Arthur's Garden Deli to gain different ideas and perspectives. I would then use the responses from those interviews to continue crafting the site.
I would do another round of user interviews. However, I would interview at least 3 additional people that aren't familiar with Arthur's Garden Deli to gain different ideas and perspectives. I would then use the responses from those interviews to continue crafting the site.
Appreciate your time!
I appreciate your time!
My other work…
My other work…
Phase 1
User Interviews
Interviewed 5 loyal Arthur's customers and the business owner. I used their insights to craft my low-fi prototype site.
Phase 2
Create Lo-Fi Prototype Site
After the user interviews I gathered together common requests and implemented them into my lo-fi design
Phase 3
Unmoderated User Tests
All 6 users tested my low-fi site and then filled out a questionnaire to help me see which requests were most common
Phase 4
Create Hi-Fi Prototype Site
After assessing the responses on the user questionnaires, I was able to add more features, color and media to the site
Phase 5
Moderated User Tests
The 6 users then tested the hi-fi prototyped site with me and gave me further recs on what to improve and what they liked.
Phase 6
Create Final Prototype Site
After the 2nd and final round of user tests I incorportated their newest insights into my design to improve customer-friendliness
Jack
The Almost Content Online Customer
About
38
Chicago
Teacher
Bachelor’s
Male
Married
Intuitive
Tech Savvy
High Energy
Giving
Supports Local
Loves simpliciity
Wants
Wants the menu to be transparent on calorie counts and gluten free options
Would like to see any community involvement
Would like to see the website updated a bit since it has not been updated in years
Wants the mobile version to resemble the desktop version more
Pain Points
The mobile version doesn’t have the same character and animation as the desktop version and it leaves him wanting more. He uses mobile version nearly every time to access the site and thinks it could be more appealing and eye-catching. It also causes slight confusion as to why there is a difference between the two versions.
The website doesn’t adjust well to different screen sizes causing a somewhat clunky experience
The menu could use some engagement features and nutritional info. It is not as transparent as he would like.
Personality
Introvert
Extrovert
tttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Thinking
Feeling
bbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfd
Judging
Prospecting
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Assertive
Turbulent
nbbubbubbbbbhbhbhbxdfghvhcftxfxdxrdrdfrfdbbbbhbhbhbxddfghvhcftxfxfxdxrdrdfrfd
Intuitive
Observant
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
Technical Skills
Internet
Social Networks
Online Ordering
Background
Jack is a big proponent of supporting local restaurants. He loves to place orders online. The most important thing to him regarding restaurant websites is that they are easy to navigate, simple to place orders on, give a strong and accurate glimpse of the resturant’s culture, and an uncluttered interface.
There is one restaurant in particular that he LOVES but he notices that their site is not updated very often, is missing some key info on the menu page, and they don’t have a community page on their site even though they are active with local charities.
He also notices that the desktop and mobile versions have various deviations (videos, animation, etc.). He likes the desktop version better and wishes the mobile version resembled the desktop since he uses the mobile site nearly evert time.
He thinks the website looks great and is intuitive, but could use a little fine tuning here and there to showcase the restaurant in an even better light.