Usability Testing

OLD COUNTRY INN WEBSITE REDESIGN

This case study documents how my team and I reimagined Old Country Inn's digital experience, from research and sketches to a fully functional high-fidelity prototype.

Year :

2025

Industry :

Food

Client :

Old Country Inn

Project Duration :

6 weeks

Featured Project Cover Image

Introduction:

Old Country Inn is a charming Austrian restaurant on Main Street Unionville in Markham, Ontario. Established in 1978, it is beloved for its authentic European atmosphere and cuisine. However, its outdated website lacked essential modern features like online ordering and reservations, limiting its reach and convenience for both loyal patrons and curious newcomers.

This case study documents how my team and I reimagined their digital experience, from research and sketches to a fully functional high-fidelity prototype.

Challenge:

Ensuring design consistency across mobile and web, despite working asynchronously in a team with tight deadlines.

  • Simulating complex interactions (like cart updates and customizations) within Figma’s non-code environment, which proved cumbersome.

  • Reconstructing pages from scratch due to the original website’s missing visuals and broken links, forcing us to research or improvise content.

Results:

RESEARCH & DISCOVERY:

We delivered a cohesive high-fidelity prototype for both web and mobile, featuring online ordering, reservations, and a seamless user flow.

  • Enhanced the brand’s online presence with a design that retains Old Country Inn’s rustic European charm.

  • Created a platform that not only improves convenience but also positions the restaurant for higher sales through online orders and increased booking capacity.

PROCESS:

Understanding the problem:
We explored the existing website (currently suspended), noting its outdated interface, security warnings, and lack of mobile optimization. We also reviewed competitors’ websites to understand modern standards for restaurant sites.

Identifying the audience:

  • Local, often European-descent patrons familiar with Austrian cuisine.

  • Visitors to Main Street Unionville seeking unique dining experiences.

  • Individuals or couples exploring venues for weddings and banquets.

User Flow:

Based on the research findings, to ensure consistency across platforms, our team first created master user flows detailing key tasks:

  • Browsing the menu

  • Adding items to cart

  • Customizing orders

  • Signing up / continuing as guest

  • Completing secure payments

This served as the backbone for both our web and mobile experiences.

Sketches/Wire Flows:

We began by hand-sketching screens to explore layout ideas. Then moved to low-fidelity wireframes to establish core structures.

Key decisions:

  • Use simple, medieval-inspired typography to maintain brand’s character.

  • Modular card layouts for menu items, enabling flexibility for future additions.

  • Pop-up modals for adding items to cart, reducing page hops.

Low-Fidelity/Mid-Fidelity Iterations:

Building low fi/mid-fi prototypes allowed us to validate structure and flows before adding visual style.

Feedback-driven improvements included:

  • Switching from vertical to horizontal scroll for categories to reduce clutter.

  • Adding a search bar for easier menu browsing.

  • Displaying prices consistently throughout checkout for transparency.

Style Guide & UI Foundations:

After completing our mid-fidelity prototypes and gathering feedback, we developed a comprehensive style guide to align our team’s work and ensure consistency as we moved to high fidelity.

Key elements included:

  • Typography: Chose a combination of Almendra, Spectral SC, and Lancelot to reflect the restaurant’s European heritage while maintaining readability.

  • Color palette: Built around the rich red from Old Country Inn’s existing logo, complemented by warm neutrals to keep the rustic feel.

  • Iconography: Adapted simple icons with a medieval twist to tie into the restaurant’s brand story.

  • UI components: Defined buttons, cards, input fields, and pop-ups, ensuring reusable modules across web and mobile.

By solidifying these elements in a shared document, we made it easier to keep the look and feel cohesive across screens, especially important given our distributed team workflow.

High-Fidelity Prototypes:

With our style guide in place, we translated our structure into polished, interactive interfaces. This phase was all about bringing the brand to life visually and functionally.

Highlights of our high-fidelity design:

  • Applied our carefully chosen serif typefaces and warm color palette to create an inviting, old-world feel aligned with the restaurant’s Austrian roots.

  • Used rich, authentic imagery for dishes and decor to strengthen the sense of place and culture - sourcing photos thoughtfully to fill gaps left by the original website.

  • Focused on clear, intuitive layouts with strong visual hierarchy, ensuring that calls-to-action like “Order Now” and “Book” were prominent without overwhelming the rustic aesthetic.

Additionally, we built modular components in Figma that allowed us to maintain visual consistency while efficiently designing both web and mobile experiences.

Testing & Feedback Integration:

Peer reviews were invaluable. Key changes included:

  • Adding “Continue as Guest” options on signup.

  • Using pop-ups for adding items to cart, reducing disruptive screen changes.

  • Ensuring quantities and prices updated live in the cart to match user expectations.

Conclusion:

This project taught me that balancing brand authenticity with modern UX practices is essential, especially for businesses with deep cultural identities.

It also highlighted the power of clear communication and documentation when collaborating asynchronously to maintain design consistency.

In the end, we created a prototype that positions Old Country Inn for increased visibility, easier customer ordering, and a streamlined reservation process.

What I’d Do Differently:

If I could revisit this project:

  • I’d conduct direct interviews or short surveys with actual Old Country Inn customers to validate our assumptions and prioritize features based on real needs.

  • I’d also prototype and test more micro-interactions (like animated cart transitions) to further refine the user experience.

Usability Testing

OLD COUNTRY INN WEBSITE REDESIGN

This case study documents how my team and I reimagined Old Country Inn's digital experience, from research and sketches to a fully functional high-fidelity prototype.

Year :

2025

Industry :

Food

Client :

Old Country Inn

Project Duration :

6 weeks

Featured Project Cover Image

Introduction:

Old Country Inn is a charming Austrian restaurant on Main Street Unionville in Markham, Ontario. Established in 1978, it is beloved for its authentic European atmosphere and cuisine. However, its outdated website lacked essential modern features like online ordering and reservations, limiting its reach and convenience for both loyal patrons and curious newcomers.

This case study documents how my team and I reimagined their digital experience, from research and sketches to a fully functional high-fidelity prototype.

Challenge:

Ensuring design consistency across mobile and web, despite working asynchronously in a team with tight deadlines.

  • Simulating complex interactions (like cart updates and customizations) within Figma’s non-code environment, which proved cumbersome.

  • Reconstructing pages from scratch due to the original website’s missing visuals and broken links, forcing us to research or improvise content.

Results:

RESEARCH & DISCOVERY:

We delivered a cohesive high-fidelity prototype for both web and mobile, featuring online ordering, reservations, and a seamless user flow.

  • Enhanced the brand’s online presence with a design that retains Old Country Inn’s rustic European charm.

  • Created a platform that not only improves convenience but also positions the restaurant for higher sales through online orders and increased booking capacity.

PROCESS:

Understanding the problem:
We explored the existing website (currently suspended), noting its outdated interface, security warnings, and lack of mobile optimization. We also reviewed competitors’ websites to understand modern standards for restaurant sites.

Identifying the audience:

  • Local, often European-descent patrons familiar with Austrian cuisine.

  • Visitors to Main Street Unionville seeking unique dining experiences.

  • Individuals or couples exploring venues for weddings and banquets.

User Flow:

Based on the research findings, to ensure consistency across platforms, our team first created master user flows detailing key tasks:

  • Browsing the menu

  • Adding items to cart

  • Customizing orders

  • Signing up / continuing as guest

  • Completing secure payments

This served as the backbone for both our web and mobile experiences.

Sketches/Wire Flows:

We began by hand-sketching screens to explore layout ideas. Then moved to low-fidelity wireframes to establish core structures.

Key decisions:

  • Use simple, medieval-inspired typography to maintain brand’s character.

  • Modular card layouts for menu items, enabling flexibility for future additions.

  • Pop-up modals for adding items to cart, reducing page hops.

Low-Fidelity/Mid-Fidelity Iterations:

Building low fi/mid-fi prototypes allowed us to validate structure and flows before adding visual style.

Feedback-driven improvements included:

  • Switching from vertical to horizontal scroll for categories to reduce clutter.

  • Adding a search bar for easier menu browsing.

  • Displaying prices consistently throughout checkout for transparency.

Style Guide & UI Foundations:

After completing our mid-fidelity prototypes and gathering feedback, we developed a comprehensive style guide to align our team’s work and ensure consistency as we moved to high fidelity.

Key elements included:

  • Typography: Chose a combination of Almendra, Spectral SC, and Lancelot to reflect the restaurant’s European heritage while maintaining readability.

  • Color palette: Built around the rich red from Old Country Inn’s existing logo, complemented by warm neutrals to keep the rustic feel.

  • Iconography: Adapted simple icons with a medieval twist to tie into the restaurant’s brand story.

  • UI components: Defined buttons, cards, input fields, and pop-ups, ensuring reusable modules across web and mobile.

By solidifying these elements in a shared document, we made it easier to keep the look and feel cohesive across screens, especially important given our distributed team workflow.

High-Fidelity Prototypes:

With our style guide in place, we translated our structure into polished, interactive interfaces. This phase was all about bringing the brand to life visually and functionally.

Highlights of our high-fidelity design:

  • Applied our carefully chosen serif typefaces and warm color palette to create an inviting, old-world feel aligned with the restaurant’s Austrian roots.

  • Used rich, authentic imagery for dishes and decor to strengthen the sense of place and culture - sourcing photos thoughtfully to fill gaps left by the original website.

  • Focused on clear, intuitive layouts with strong visual hierarchy, ensuring that calls-to-action like “Order Now” and “Book” were prominent without overwhelming the rustic aesthetic.

Additionally, we built modular components in Figma that allowed us to maintain visual consistency while efficiently designing both web and mobile experiences.

Testing & Feedback Integration:

Peer reviews were invaluable. Key changes included:

  • Adding “Continue as Guest” options on signup.

  • Using pop-ups for adding items to cart, reducing disruptive screen changes.

  • Ensuring quantities and prices updated live in the cart to match user expectations.

Conclusion:

This project taught me that balancing brand authenticity with modern UX practices is essential, especially for businesses with deep cultural identities.

It also highlighted the power of clear communication and documentation when collaborating asynchronously to maintain design consistency.

In the end, we created a prototype that positions Old Country Inn for increased visibility, easier customer ordering, and a streamlined reservation process.

What I’d Do Differently:

If I could revisit this project:

  • I’d conduct direct interviews or short surveys with actual Old Country Inn customers to validate our assumptions and prioritize features based on real needs.

  • I’d also prototype and test more micro-interactions (like animated cart transitions) to further refine the user experience.

Usability Testing

OLD COUNTRY INN WEBSITE REDESIGN

This case study documents how my team and I reimagined Old Country Inn's digital experience, from research and sketches to a fully functional high-fidelity prototype.

Year :

2025

Industry :

Food

Client :

Old Country Inn

Project Duration :

6 weeks

Featured Project Cover Image

Introduction:

Old Country Inn is a charming Austrian restaurant on Main Street Unionville in Markham, Ontario. Established in 1978, it is beloved for its authentic European atmosphere and cuisine. However, its outdated website lacked essential modern features like online ordering and reservations, limiting its reach and convenience for both loyal patrons and curious newcomers.

This case study documents how my team and I reimagined their digital experience, from research and sketches to a fully functional high-fidelity prototype.

Challenge:

Ensuring design consistency across mobile and web, despite working asynchronously in a team with tight deadlines.

  • Simulating complex interactions (like cart updates and customizations) within Figma’s non-code environment, which proved cumbersome.

  • Reconstructing pages from scratch due to the original website’s missing visuals and broken links, forcing us to research or improvise content.

Results:

RESEARCH & DISCOVERY:

We delivered a cohesive high-fidelity prototype for both web and mobile, featuring online ordering, reservations, and a seamless user flow.

  • Enhanced the brand’s online presence with a design that retains Old Country Inn’s rustic European charm.

  • Created a platform that not only improves convenience but also positions the restaurant for higher sales through online orders and increased booking capacity.

PROCESS:

Understanding the problem:
We explored the existing website (currently suspended), noting its outdated interface, security warnings, and lack of mobile optimization. We also reviewed competitors’ websites to understand modern standards for restaurant sites.

Identifying the audience:

  • Local, often European-descent patrons familiar with Austrian cuisine.

  • Visitors to Main Street Unionville seeking unique dining experiences.

  • Individuals or couples exploring venues for weddings and banquets.

User Flow:

Based on the research findings, to ensure consistency across platforms, our team first created master user flows detailing key tasks:

  • Browsing the menu

  • Adding items to cart

  • Customizing orders

  • Signing up / continuing as guest

  • Completing secure payments

This served as the backbone for both our web and mobile experiences.

Sketches/Wire Flows:

We began by hand-sketching screens to explore layout ideas. Then moved to low-fidelity wireframes to establish core structures.

Key decisions:

  • Use simple, medieval-inspired typography to maintain brand’s character.

  • Modular card layouts for menu items, enabling flexibility for future additions.

  • Pop-up modals for adding items to cart, reducing page hops.

Low-Fidelity/Mid-Fidelity Iterations:

Building low fi/mid-fi prototypes allowed us to validate structure and flows before adding visual style.

Feedback-driven improvements included:

  • Switching from vertical to horizontal scroll for categories to reduce clutter.

  • Adding a search bar for easier menu browsing.

  • Displaying prices consistently throughout checkout for transparency.

Style Guide & UI Foundations:

After completing our mid-fidelity prototypes and gathering feedback, we developed a comprehensive style guide to align our team’s work and ensure consistency as we moved to high fidelity.

Key elements included:

  • Typography: Chose a combination of Almendra, Spectral SC, and Lancelot to reflect the restaurant’s European heritage while maintaining readability.

  • Color palette: Built around the rich red from Old Country Inn’s existing logo, complemented by warm neutrals to keep the rustic feel.

  • Iconography: Adapted simple icons with a medieval twist to tie into the restaurant’s brand story.

  • UI components: Defined buttons, cards, input fields, and pop-ups, ensuring reusable modules across web and mobile.

By solidifying these elements in a shared document, we made it easier to keep the look and feel cohesive across screens, especially important given our distributed team workflow.

High-Fidelity Prototypes:

With our style guide in place, we translated our structure into polished, interactive interfaces. This phase was all about bringing the brand to life visually and functionally.

Highlights of our high-fidelity design:

  • Applied our carefully chosen serif typefaces and warm color palette to create an inviting, old-world feel aligned with the restaurant’s Austrian roots.

  • Used rich, authentic imagery for dishes and decor to strengthen the sense of place and culture - sourcing photos thoughtfully to fill gaps left by the original website.

  • Focused on clear, intuitive layouts with strong visual hierarchy, ensuring that calls-to-action like “Order Now” and “Book” were prominent without overwhelming the rustic aesthetic.

Additionally, we built modular components in Figma that allowed us to maintain visual consistency while efficiently designing both web and mobile experiences.

Testing & Feedback Integration:

Peer reviews were invaluable. Key changes included:

  • Adding “Continue as Guest” options on signup.

  • Using pop-ups for adding items to cart, reducing disruptive screen changes.

  • Ensuring quantities and prices updated live in the cart to match user expectations.

Conclusion:

This project taught me that balancing brand authenticity with modern UX practices is essential, especially for businesses with deep cultural identities.

It also highlighted the power of clear communication and documentation when collaborating asynchronously to maintain design consistency.

In the end, we created a prototype that positions Old Country Inn for increased visibility, easier customer ordering, and a streamlined reservation process.

What I’d Do Differently:

If I could revisit this project:

  • I’d conduct direct interviews or short surveys with actual Old Country Inn customers to validate our assumptions and prioritize features based on real needs.

  • I’d also prototype and test more micro-interactions (like animated cart transitions) to further refine the user experience.