Website Case Study

Project Overview

Capparelli’s is in need of a refreshed, modern website that reflects the tradition, quality, and care behind every dish they serve. A new design will showcase their culinary craft, elevate their brand presence, and offer guests an inviting and seamless online dining experience.

Original website screenshot
Original website screenshot
Original website screenshot

Our Objectives

1. Modernize

Capparelli’s is in need of a refreshed, modern website. Not only for a more up-to-date look, but also to offer a more comprehensive user experience. A new design will showcase their culinary craft, elevate their brand presence, and offer guests an inviting and seamless online experience.

2. Elevate

An updated website following a brand overhaul will elevate the status of Capparalli’s. This will both make the establishment seem more credible and approachable to audiences and foodgoers all around. The modernized digital presence makes Capparelli’s a contender amongst competitors.

3. Communicate

A modernized website will better reflect the tradition, quality, and care behind every dish they serve. The new look will better communicate not only the quality, but the core values that makes Capparelli’s unique. This will make it easier to understand both the brand and the presence.

Content

At this stage of development, we were gathering content in order to better understand not only what we need to design, but what needs to be communicated. This allows us to have a starting point instead of designing blind.

Personas

I created three personas to see my potential diversity in target audience. There personas are used to give the me a point of reference. Personas help developers and designers understand users’ goals, behaviors, and pain points, guiding decisions on layout, functionality, and content to ensure the website meets real user needs effectively.

Persona 1

Sarah

32
Student
Southside San Antonio

Sarah is a full-time student and struggles to eat a high quality hot meal. She finally has the time to get a decent meal for herself but does not have much to spend. She really needs her comfort food, Italian, but doesn’t have very many options except fancy sit down restaurants. She struggles to find an option that won’t break the bank, but has a higher quality to their craft.

Persona 2

Lorenzo

24
CEO
Calabria, Italy

Lorenzo recently moved to San Antonio from Italy. He started his own business in marketing and has found the San Antonio is great market for his business. While Lorenzo enjoys being here in San Antonio, he has recently become very homesick. He has tried common Italian restaurants but finds himself unsatisfied as they are chain based and are missing that authentic homecooked feeling.

Persona 3

Analisa

45
Mother
San Antonio, TX

Analisa is a stay at home mom with a family of 5. She struggles to find availability to cook a decent full meal for her large family as she juggles the responsibility of three children. Going out gets pretty expensive as ordering five individual meals adds up. She hope to find some sort of meal option that has a family style option that she can easier pickup for her family to enjoy on a busy weeknight.

Scenario

Scenario building is used in website development to imagine how different users might interact with a site in real-world situations. These narratives help designers anticipate user needs, identify potential issues, and design experiences that support specific goals, ensuring the site is both intuitive and useful across various contexts. I wanted to orchestrate how the new website would attract customers with their main advantages over their competitiors.

1.

The user is hungry for Italian food but still wants great quality.

2.

They search for high quality Italian food but they all have high prices.

3.

They are unfortunately unable to afford your standard options for Italian food without sacrificing good quality.

4.

They search for affordable authentic Italian and stumbles on Capparelli’s website and see’s the high quality presence while getting more for their buck.

5.

The user decides on eating Capparelli’s and rushes to pick up their order. 

6.

They are happy with their decision as they got more for their buck, authentic Italian at an affordable price, while having an enjoyable user experience.

Site Map

At this stage, I began building site maps for both the home page, and website entirely. Site maps are used in website development to plan and organize the structure of a site’s content. They provide a clear visual layout of all pages and how they connect, helping teams ensure logical navigation, improve user experience, and streamline development by aligning everyone on the site’s architecture.

Website site map
Home page site map

Wireframe

Wireframes are used in website development to outline the basic layout and structure of a page before visual design and content are added. The goal with this website was to aim for a wireframe that was comprehensive. I wanted to implement a wireframe that was both funtional and promoted user flow.

Website wireframe

Prototype

While the structure may have seem bare, I knew it would not only complement the branding guidelines, but let it thrive. I wanted to implement as much of the design language as possible while still being tasteful. This way the user was both engaged and had clarity.

Website prototype

Final Conclusion

I thoroughly enjoyed this project. It was a delight getting to not only expand a previous branding project, but explore new things I can do with web development. I found it enjoyable in the sense that it made my brand very that much more immersive and tangible. This project felt like a very complete process interms of an immersive dynamic web system. I am very pleased with the final results and hope to keep expanding it.

Desktop mockup
Mobile mockup