Susie's Delicatessen
web design
hospitality
Designed to emphasize the bright and cheerful brand, this website invites visitors in with a playful color palette and a feeling of genuine hospitality.
Background
Susie’s began as a pop-up in Richmond, Virginia, building a strong social media presence through Instagram as its primary channel for promotion and communication. Susie’s follower count was growing, lines were forming, and sales were increasing. The pop-up was ready to find a permanent space to call home.
Problem
Susie's had the social media following, but with the opening of a brick-and-mortar, they needed a digital space that was accessible to everyone. By relying on word of mouth to reach people who didn't have an Instagram account, their reach could only go so far. They needed a space to house essential information, streamline online ordering, and reflect the the vibe of this beloved local spot.
Solution
A website that delivers an accessible and delightful experience with simple user flows for ease of navigation, a clear call-to-action for placing orders online, and a strong connection to Susie’s brand and values.
Timeline
4 weeks
MY ROLE
Research
UX/UI Design
Developer
TOOLS
Figma
Squarespace
CSS/HTML
research + discovery
Getting to know the client and the users
To get things started, I met with the client to understand their goals for the website and what they were looking for in content and aesthetics. We talked about restaurant websites they liked and what specifically appealed to them. I conducted a competitor analysis to identify industry trends, patterns and opportunities.
Next, I conducted interviews to learn how everyday people utilize a restaurant's website, and what affects their overall impression.
“If it gives off a vibe of the place through design and look and feel... the way the website is designed and presented to me is a reflection of how they see themselves and how they present their restaurant to the world.”
– interview participant
Through affinity mapping, I organized responses, gather insights, and identify the following themes across user motivations, needs, and pain points.
HONEST REPRESENTATION BUILDS TRUST
A website that reflects the aesthetic and general atmosphere of the restaurant lets people know exactly who they are and what they do.
ACCURACY SHOWS A CERTAIN LEVEL OF CARE
Providing accurate and up-to-date information including hours, menu, and reservation etiquette shows respect for people and their time
USABILITY IS AN EASY WAY TO IMPRESS
People are often looking up restaurants on their phones. A mobile responsive site with intuitive, user-friendly navigation makes all the difference.
Meet the Low-Key Foodie and the Out-of-Towner
IDEATION + DESIGN
Simple, informative features
When I spoke with the client at the beginning of the project, one of the things we talked about was which features they wanted on the website. They wanted to keep it simple and informative.
Having decided on content that aligned with both business and user needs, I started thinking about how the user would navigate through the website given different scenarios. Thinking back to insights from interviews, I mapped out user flows for basic actions users might take on the website.
USER FLOW FOR PLACING AN ONLINE ORDER
Laying it all out
I revisited websites the client had previously mentioned and took note of layouts, patterns and general aesthetics. Initially the client said they liked the look of a few smaller photos as opposed to one large photo, so I sketched out two versions of the home screen. I sketched one with a hero image and the other without. We went with the hero image for its visual impact.
To maintain brand consistency across platforms, I gathered old menus from the Susie’s Instagram account to use as reference for the menu design.
old menu for design reference
Taking note of the color blocking and untraditional alignment, I translated these elements into the mid-fidelity wireframes.
TESTING + ITERATION
Validation through usability testing
For the first round of usability testing, six participants completed an unmoderated test with the mid-fidelity mobile and desktop prototypes. I wanted to see how users worked through the given scenarios of navigating to the menu, checking upcoming events, and placing an inquiry for catering.
All of the tasks were completed successfully in good time and with no errors, which gave me the confidence to move forward with high-fidelity wireframes.
"It was very user friendly, especially for accessing it on a phone. It also has all the items that I’d normally look for when trying to learn more about a restaurant and everything seems easy to navigate to."
– usability test participant
Incorporating Susie’s bright and cheerful brand
During the discovery phase of the process, the client shared the brand kit which was put together by a local graphic designer. I pulled up the file to reference for the high-fidelity mockups, and it was a PDF. While that was fine for the typography and colors, I needed the logo as a PNG. That's when I learned my first lesson in working with clients: be specific when asking for files, and always double check upon receiving them. This wasn't a huge set back, but it did cause a bit of lag time waiting for the logo in the proper format. In the meantime, I focused on getting my own mini style guide together.
Now for the fun part of infusing the design with the cheerful vibes that come from the brand’s elements and personality.
While moving from mid-fidelity to high-fidelity, I was informed that the lunch and dinner menus had been combined into one, which meant more screen real estate. I used auto-layout to efficiently experiment with different menu layouts. This is also where I made the decision to change the alignment of the menu headers after receiving quite a bit of feedback from testing and a group critique.
Menu headers adjusted to align with MENU TEXT per user feedback
Testing the menu layout
Since the first round of usability testing went smoothly and didn’t require any priority revisions, I opted to use this round to conduct an A/B test to see which menu layout was preferred.
The results showed that 22% preferred Version A, while 78% preferred Version B.
A
single column, less busy
B
TWO COLUMNS, LESS WHITE SPACE
final design
Priority revisions on the fly
Prior to the development of the website, the restaurant's build out was finished and the client had new photos taken and updated their brand elements to match the aesthetic of the physical cafe. I reached out to the graphic designer for the updated colors, typography, and other assets to ensure consistency with Susie’s brand. Using CSS and HTML, I translated the custom design to Squarespace with a couple extra touches, like a button hover effect and subtle animations.
Reflection
As my first client project and live website, I’m thankful for every part of this process. I learned to remain flexible and welcome challenges as they arise, like the changing of the menu during wireframing, and the update to branding elements at the end of the process.
A key takeaway from this project was the importance of clear communication – being specific about file formats and technical requirements. I was fortunate to not be on a tight deadline this time, but I can see how a simple misstep like this could cost valuable time.
2026 JANE HIRSCH
Thanks for stopping by!