← Back
Website Design
Utilized UX principles to redesign a website for Cafetal Quilombo, a local Seattle restaurant, enhancing their online presence and boosting customer engagement.
Date
January 2024 - June 2024
Role
Web UX Design
Organizations
UW Web Impact
Cafetal Quilombo
Link to Website↗
Skills gained
• Data Collection
• Social Media Monitoring
• Thematic Analysis
• Content Analysis
Details
Design Goal: The objective was to redesign the website for Cafetal Quilombo Café, a local restaurant that experienced a decline in sales post-COVID-19 and aimed to boost online engagement to help recover.
As part of a three-designer team, we were responsible for modernizing the website while highlighting the café’s distinct aesthetic and brand identity. Below, I highlight some of my key contributions and other collaborative efforts throughout the project.
Visual Design: Mood Board
The cafe features a bright yellow banner with red lettering, and its interior boasts vivid red walls that contribute to its unique ambiance. To maintain brand consistency, we incorporated the same red hue as the primary color for the website. While yellow elements were included to reflect the original aesthetic, we used them sparingly due to the potential for bright yellow to distract users.
Additionally, the owner valued sharing the story behind his motivation for founding the cafe and the inspiration behind its name. We ensured this narrative was included on the website, incorporating visual elements that complemented his story.
Catering Page: Low Fidelity
I was responsible for designing the catering page. The owner emphasized that catering is a significant part of his business and wanted to expedite and simplify the process of collecting catering orders.
During the initial design phase, I developed wireframes to outline the user flow and ensure a seamless ordering experience. By prioritizing essential elements and reducing unnecessary complexity, I aimed to minimize user effort and encourage more customers to utilize the catering service.
I chose a design with a visual and informational layout similar to many e-commerce sites, enhancing the intuitiveness for users when placing catering orders.
Catering Page: High Fidelity
I gathered the requirements for the information the owner needed from customers requesting catering orders. By using clear and precise language, I facilitated an easy process for users, minimizing the need for follow-up questions about their orders.
To further improve the user experience, I incorporated intuitive call-to-action buttons and streamlined the form design, ensuring customers could easily navigate and submit their catering requests with minimal effort.
Phones: Low Fidelity
Recognizing that many users access restaurant websites from their phones—especially when searching for a place to go—I focused on creating an appealing user interface and visual design to attract new customers. My goal in designing the mobile prototypes was to retain as much information, aesthetic, and functionality as the desktop version while adapting the layout for easy use on mobile devices. I prioritized keeping images and text uncluttered and large enough to read, minimizing the amount of scrolling required.
Final outcome: The website has been successfully launched, and I am proud of the contributions I made to this project. Through this experience, I significantly enhanced my visual design and Figma skills. One major challenge was coordinating the handoff of designs to the development team in a timely manner while maintaining an efficient workflow. The lessons learned from what worked and what didn't will inform my approach to future projects involving collaboration with multiple teams.
Although I wasn't directly involved in the front-end coding process during this project, the design skills I gained enabled me to design this website. After this project, I taught myself HTML and CSS so that I could code this website independently.
See the final outcome of this project for yourself!
Link to Website↗