Project type
Responsive web design
Role
Research
UX/UI design
Tools
Figma
FigJam
Maze
Timeline
5 weeks
Designed to emphasize the bright and cheerful brand of Susie’s, this web design invites the user in with it’s playful color palette and feeling of genuine hospitality.
Although they already had a web designer set up, they were kind and patient enough to provide brand assets and feedback throughout my design process.
What began as a conceptual web design turned into a real-world project for a client. In the end, Susie’s chose to move forward with my design.
Background
Susie’s began as a pop-up in Richmond, Virginia and will be opening a brick and mortar cafe later this year. Described as a fast-casual cafe that mixes modern dining with the cozy vibes of Jewish and Mediterranean food traditions, Susie’s emphasizes the love of great food and genuine hospitality.
Problem
Having started out as a pop-up, Susie’s has developed a strong social media presence utilizing Instagram as a source of promotion and communication. With the opening of a brick and mortar, Susie’s needs to expand their online presence to include a full responsive website that caters to the user experiences of both locals and out-of-town visitors.
Goal
To design a responsive website featuring capabilities that enhance the overall experience, accessibility and interaction with Susie’s such as an inviting home page, about page, food/drink menu, merch, events and a way to place orders online. While Instagram plays a huge role in the promotional aspect of the business, a responsive website would provide a space for more in depth information to be displayed, a concrete online presence, and another avenue for the business to generate income via online orders and merch sales.
Exploring industry standards & its users
01 ResearchResearch goal
To learn what brings a user to a restaurant’s website so that we understand what features will satisfy those needs, attract new customers and increase traffic.
To kick off this project, I met with the client to get an understanding of what they were looking for in terms of content and aesthetics. We talked about other restaurant websites they liked and what specifically they liked about them. I took two of the websites they referenced, another that I found to be comparable, and a local spa and retail website as an adjacent comparison and conducted a competitor analysis.
Given the nature of restaurant websites, there honestly wasn’t a lot that stuck out to me with this analysis. However, only one of the four websites I looked at had all of the information easily accessible from the home page. I was a little surprised to find myself digging around for a menu, hours, or a general description of the restaurant itself.
I was looking forward to user interviews to see how others felt.
Research objectives
Understand what…
brings a user to a restaurant’s website and how they get there.
features users look for when visiting a restaurant's website.
information users find valuable when visiting a restaurant’s website.
conclusions users draw from a restaurant’s website.
I spoke with five individuals ranging in age from 29-40 who fell under at least one of the following categories:
People who regularly visit restaurant websites.
People who research restaurants before visiting.
People who frequently visit restaurants.
People who order food online.
People who prefer to make transactions online vs. in person.
Research insights & synthesis
02 Define“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.”
— Rebecca, interview participant
Here’s what stuck out to me initially:
Participants expect to see a menu, reservation policy and ability to make one if available, and hours
When researching restaurants for travel, most participants start with a general search, then look to social media, and lastly the restaurant’s website
Phones are typically used for quick and location based decisions
Desktops are typically used to search for an upcoming trip and more in depth decision making
People want to be able to pick up on the general atmosphere, aesthetic and vibe through the website
Key words mentioned: Minimalist, simple and clean, easy to navigate, and well organized
Through affinity mapping, I was able to pinpoint specific patterns of motivations and needs…
General information such as background or story of restaurant, reservation etiquette, menu and type of food offered, and price range.
Design considerations such as general aesthetic, user-friendly layout and responsive design.
Search methods ultimately leading the user to the website including comparative search, social influence and a location based search.
Challenges and pain points such as inaccurate or lack of information, not user-friendly and hard to navigate.
Meet the Low-Key Foodie & the Out-of-Towner
With both locals and out-of-town visitors in mind, I developed two user personas.
So, how might we…
feature frequently sought after information in a way that caters to both a local who is more familiar with Susie’s and an out-of-towner who is considering it among other restaurants?
get the attention of a local via online presence and get them to choose Susie’s over another restaurant?
convince someone traveling to Richmond to visit Susie’s based on the website?
create a user-friendly website that captures the overall vibe of Susie’s in a way that both potential and repeat customers find attractive and informative?
Settling on the “must-have” features
03 IdeateWhen I spoke with the client at the beginning of this project, one of the things we talked about were the features they would like on the website. They wanted to keep it simple and informative with the following:
Home
Menu
Merch
Events
About
Online ordering
After conducting user interviews, I had a few additional ideas. One of which being a social media window where users could see recent posts and easily access Susie’s Instagram page. This would simultaneously create more photography content on the website while promoting exploration of the brand.
Having decided on the content, I started thinking about how the user would navigate through the website given different scenarios.
Thinking back to insights from interviews, I mapped out a few user flows for basic actions a user may take on the website.
These flows ranged from the simple task of viewing the menu, to a more specific task of setting up a reminder for an upcoming event.
Wireframing
04 DesignI revisited websites the client had previously mentioned and took note of layouts, patterns and general aesthetics. I began sketching wireframes for both desktop and mobile. 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 ended up going with the hero image iteration due to it’s attention grabbing aspect.
Thinking about building brand consistency across platforms, I gathered a few old menus from the Susie’s Instagram account to use as reference for the menu design.
*Old menu for design referenceTaking note of the color blocking and untraditional alignment of the menu header, I translated these elements into the mid-fidelity screens.
Testing with mid-fidelity wireframes
05 ValidateFor 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 following scenarios:
Imagine you would like to see what kind of food is offered at Susie’s
Imagine you would like to learn more about what inWine is doing this month at Susie’s
Imagine you would like to inquire about having Susie’s cater an event for you
Imagine you would like to learn a little background about Susie’s
All of the tasks were completed successfully with good timing and no errors, so I felt good about moving forward with the 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."
— Meagan, interview participant
Incorporating Susie’s bright and cheerful brand
From the beginning of this project, I was excited about utilizing Susie’s brand. I loved the playful energy it gave off. As preparation for building the high-fidelity wireframes, I pulled up the brand kit that was sent to me at the beginning of this process to put together a style tile… and it was a PDF. Just like that, I learned my first real lesson in being a designer working with clients: it doesn’t hurt to be overly specific when asking for files (in fact… be overly specific), 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 was able to get the typography and color palette situated to keep things rolling.
Because the color palette was so fun and bright, I had to find a way to present the colors in a way that wasn’t too overwhelming and of course, passed accessibility standards.
Now for the fun part of infusing the design with the cheerful vibes that come naturally 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. With the use of auto-layout, I was able to efficiently experiment with different menu layouts. This is also where I ultimately made the decision to change the alignment of the menu headers after receiving quite a bit of feedback.
A/B testing with high-fidelity wireframes
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.
Five participants were provided with the full screen of version “A” on the left and “B” on the right, while the other four were provided with version “B” on the left and “A” on the right and were given the following scenario:
“Imagine you are planning a trip to Richmond and a friend recommends Susie’s as a place to grab some food. You go to the website, go to the “Menu” page, and look over the menu. Which menu do you prefer? Why?”
The results showed that 22% preferred Version A, while 78% preferred Version B.
“The other one [version A] feels kind of unfinished or in-progress”
— Anonymous, interview participant
Version A
Single column,
less busy.
Version B
Two columns,
less white space.
Happy with how the final screens turned out, I sent them over to the client and the response I got was a pleasant surprise…
Priority revisions per brand element adjustments
06 HandoffSince completing this design, the client had their graphic designer update the brand elements to match the aesthetic of the physical cafe, and had new photos taken.
In preparation for translating this Figma design to SquareSpace, I reached out to the graphic designer for the updated HEX codes and typography choices to ensure consistency with Susie’s brand.
With these updates, I created a new style guide and began refining the design in Figma.
After translating the design to SquareSpace with the help of CSS for some custom touches, I handed off the design to the client. While I’m still in contact with them and am available if help is needed, they now have full control of the website.
Reflection
A key takeaway from this project was the importance of effective communication between myself, the client and any others involved in the design process – in this case, the graphic designer. It’s not just about communication, but about being clear and specific to avoid confusion, especially when it comes to file formats and technical requirements. I was fortunate not to be on a tight deadline this time, but I can see how a simple misstep like this could really set you back.
This project was exciting because what started as a faux website, turned into an IRL design for a client. I’m thankful they were willing to take the time to work with me on this, and even more thankful that they ended up going with my design in the end.
My future with Susie’s
Since the handoff of the web design, Susie’s has been in control of keeping it up to date, however I remain available if any assistance is needed in the near future.
Next case study
An end-to-end mobile app designed to provide a space for discovery, community and education within the world of specialty coffee.