Website re-design for a charming Italian eatery in my neighborhood
Lella Alimentari is a homey and welcoming Italian cafe located in Williamsburg, Brooklyn. I helped design a responsive website (desktop and mobile) that tells Lella’s story, showcases their tasty dishes, takes online orders, and displays other important information about the cafe.
User Research, Ideation, Sketching, Interaction and Visual Design, Photography, Prototyping and Testing
February - April 2023
Figma, Miro, Maze, Camera, Otter AI
Introducing the client
In 2015, Lella was established in Williamsburg, Brooklyn with a mission to share the flavors of Italian comfort food with New Yorkers. Over the next several years, Lella has garnered much love from the New York community, especially Italian Americans in the Williamsburg neighborhood. Whimsically adorned with quaint toys, cooking pans, and Italian goods, Lella is truly a hidden gem that serves scrumptious Italian flatbreads, pastries, and salads.
Although popular among locals, Lella lacks a strong and consistent online presence. Its menu and online order are managed by third party websites and its website is currently defective.
Enamored with Lella's atmosphere, food, and beverages, I decided to bring Lella's adventure to life with a fun website that works on both desktop and mobile devices.
Kickoff meeting: understanding client's needs
I visited the cafe to learn more about Lella's business and to gauge Chicco's interest in letting me help him redesign Lella’s website. Delighted to hear my ideas, Chicco shared about his vision for Lella and what he hopes to see on the new website.
“My goals are to create adventures and to preserve Lella’s homey and cozy atmosphere, even if it means making less profits. Lella’s policy is to treat everyone like family and to help everyone feel at home.”
According to Chicco, Italians like their coffee served fresh with the right amount of warmth, which explains why he currently does not offer pickup/delivery options for coffee. Other food and beverage items can be found on the pickup/delivery menu. Chicco wants the new website to integrate an online order service, excluding coffee.
Loyalty program is a feature that Chicco would love to implement, but instead of rewarding customers with food or beverages after a certain amount of purchases, he prefers giving out Lella merch.
Chicco hopes that the new website would capture the convivial atmosphere and achieve the following goals:
Insights from user interviews
In order to better understand the needs and frustrations of Lella's customers, I interviewed 9 first-time or regular visitors at Lella. I categorized my findings into 6 categories.
Loyalty programs attract and retain customers
Customers all expressed interest in Lella implementing a loyalty program, describing how it would make them more likely to revisit Lella frequently. They loved the concept of discounted purchases and mentioned how other cafes with similar business models had incentivized them to revisit and spend more in exchange for free food or other rewards.
To prevent users from losing track of their paper punch cards, I decided that digital punch cards would be the ideal way to implement a loyalty program.
Customers want to see the space, menu, and story
Overall, customers would love to learn about Lella's story, food and beverages, and space through its website. A top pain point that users brought up during interviews was that many other eateries had outdated store information or menu pdfs that were awkward to peruse. Ability to quickly access crucial store information and "feel the vibe" of a cafe were top priorities that promote customer interest and engagement.
I researched several other cafes in the Williamsburg neighborhood to see if there was anything valuable I could learn and apply to my designs for Lella.
I loved the vivid photos some of the competitors had, which evoked nostalgia, comfort, and warmth. The combination of artistic imagery and good visual hierarchy helped these competitors establish strong brand identities that I strive to achieve for Lella as well.
The interview results reveal that a cafe website represents different tools to Lella's various customers. Some customers simply want to browse the menu or place online orders; others want to see the story behind the food business. To empathize with our target user groups, I created 2 user personas.
These personas were crucial for helping me better understand my users' experiences, behaviors, and goals, which guided my design choices later throughout this project. Identifying both the goals and pain points of customers helped clarify what customers needed on an eatery website.
Lella's customers wanted a website that was both comprehensive and simple to navigate. Many wanted to see the menu, photos of the food and space, and other store products. Others loved the idea of an online ordering system directly through Lella's website.
Based on user interview feedback, I brainstormed webpages and features that I would like to include on Lella’s website.
Website layout exploration
After some initial brainstorming, I created mid-fidelity designs for Lella's website while keeping customers' goals in mind. I envisioned a landing home page with an auto-rotating carousel of delicious food and charming ambience photos that draw customers in. I designed the home page to be scrollable, with call-to-action buttons distributed throughout the webpage to direct users to other key webpages, including About and Menu.
Lella's primary colors are black and red, as shown on their in-store menu and brand illustrations. To ensure consistency, I kept black and red as the website's primary colors while incorporating a bit of yellow and green as secondary and tertiary colors to highlight the playfulness of the cafe. I chose fonts that conveyed quaintness, comfort, and adventure.
Aside from color and typography choice, another essential visual element on an eatery website is photos. I brought my camera to capture Lella's food, space, and character.
Assessing the initial design
To test assumptions for my design explorations, I conducted 5 usability tests on both mobile and desktop devices.
Main takeaways from user feedback
All participants thought the website was user-friendly, intuitive, and aesthetically pleasing. They were able to navigate between the different webpages, buy merch, and place food and beverage orders. I learned that while users were generally able to complete the tasks, a few improvements could be made to enhance the website.
Aside from logo, "Home" button adds clarity
For navigation bar simplicity, I initially decided not to include a "Home" button and planned to direct users back home via Lella's logo instead. However, I discovered that without a "Home" button, users found it less straightforward how to navigate back home and that by excluding it, I wasn't accommodating my target audience – people who love Italian coffee and snacks, whether they're tech-savvy or not. The bottomline was that a clickable logo isn't yet a universally understood way of returning home even if it's widely used that way.
"Shop" and "Order online" are ambiguous
I noticed that many hospitality websites use "Order online" and "Shop" to refer to their companies' online food ordering and merchandise, which I utilized in my initial designs as well. This wording brought confusion to my users, leaving them unsure whether "View products", "Order online" or "Shop" directed them to store merchandise or food ordering.
I took all the testers' feedback into consideration and revised my prototype, prioritizing the frustrations brought up repeatedly during testing.
A responsive website that captures the essence of Lella Alimentari’s brand, relays important store information to customers, and streamlines the online food/beverage and merchandise order system.
This website is designed to work on both desktop and mobile devices, ensuring that customers can access what they need, wherever they are.
Customers can navigate from Home page to About, Menu, Merch, and Order Online. As a customer scrolls through the hero page, they will receive overview information that helps them get a feel of Lella's business. If they want to learn more, call-to-action buttons direct them to the relevant webpages, which reveal more details.
To help customers express their affinity for Lella, I designed a Merch webpage where they can find a variety of lifestyle products that are quality, useful, and authentic to Lella’s brand.
Online food & beverage order
In response to customers' pain points, I added an Order Online feature to minimize long wait times and the friction of ordering through third-party websites. Customers can select either the pickup or delivery option and directly place food and/or beverage orders through Lella's website.
What I learned
Although it was initially nerve-wracking to approach and collaborate with Lella’s staff, I pushed myself out of my comfort zone to try out this fun design project. Throughout the designing process, I actively communicated with Lella’s staff, kept them updated on my progress, and organized multiple meetings to discuss big-picture goals. Due to a time constraint of 80 hours, I prioritized meeting the overlapping business and user goals.
I would love to assist Lella in implementing the website as a future milestone for the project, to see the website come to life based on my designs and to have customers enjoy using it!
Check out my other work