Soda & Swine
Website Redesign

When we first came to the client, we were told that management was actively looking for ways to increase both the sales and awareness of their beer selection and increase overall sales during weekends. To mediate these goals, our site presents the most important information before all else. This means that users have access to Food, Drinks, and other services offered by the restaurant as soon as they arrive on the landing page. The site manages this presentation while conveying a brand that is unique to Soda and Swine.

Soda & Swine UCSD is a casual restaurant that provides its patrons with old school Italian style food alongside an impressive lineup of beers. The goal is to allow patrons to feel transported from the academic school environment into their cozy, chic indoor/outdoor dining space. The website embraces elements from the in-person experience such as color palette, typography, and iconography. We tried to adhere to the “funky, direct, and unique” aesthetic the manager was looking for while maintaining a sleek and consistent design to provide a pleasant experience for users.
‍

To better understand user expectations and identify areas for improvement, we conducted a competitive analysis of both direct and indirect competitors in the restaurant and dining experience space. This helped uncover common UX patterns, content strategies, and opportunities for differentiation.

To better empathize with users and guide design decisions, we created user personas based on target customer demographics. These personas represent key user types with distinct goals and needs when visiting a restaurant website. The main takeaways were to keep the site design clean, simple, and direct while maintaining all necessary description and pricing information.

To define the visual tone and brand personality of the redesigned website, I created a moodboard that explored textures, colors, typography, and photography styles. This helped ensure that the visual direction matched both the restaurant's brand and user expectations.

The mood board served as a shared reference point to align the visual tone across the team. It laid the foundation for later decisions around layout, image treatment, and brand storytelling.

Before moving into high-fidelity designs, we created low- to mid-fidelity wireframes to explore layout structure, user flow, and content prioritization. This allowed me to test functionality and hierarchy without being distracted by visuals.

The wireframes helped validate structure early, exposed a few flow issues (e.g., where users expected links), and set a solid foundation for visual design and prototyping.

The final mobile prototype brings together the core goals of this redesign: making the restaurant experience accessible, intuitive, and visually inviting for users browsing on the go. It focuses on easy navigation, quick access to essential information, and an elevated brand presence that reflects the restaurant’s identity.

The final desktop prototype delivers a refined and accessible experience that reflects the restaurant’s brand while making it easy for users to explore the menu, make catering inquiries, and learn about the space. It builds on mobile-first decisions while taking advantage of the wider screen to enhance storytelling, layout, and interaction.