Project Brief
Flui is a User Interface Design Hackathon held in February 2024 during reading week, where participants collaborate with business clients to solve real-world design problems.
View site
Client Information
Sooyu café is a cozy neighborhood brunch spot with Italian influence looking for a better online experience:
- Focus on affordability, quality, and family-oriented atmosphere.
- Aiming to maintain charm while expanding audience reach.
- Enhance customer experience and community engagement.
- Neighborhood connectivity.
- Elevating brunch experience.
- Establishing seamless online platform.
- Showcase menu pictures prominently.
Moodboard and Illustrations
Our team revamped Sooyu's logo with a fresh twist. One notable transformation involved our redesign of the figure in the logo, showcasing them holding a daily special menu item. This singular yet impactful adjustment injected vibrancy and relevance into the brand's visual identity. We focused on the aesthetics having the following:
- Strong strokes
- Digital drawing style
- Cartoon-ish illustration
Lo-Fi Prototyping
My main task was to design the user experience and designing the look and feel of the website that was compliant with the clients needs and wants. Here are some ideas I put forward about how the layout should look like and how to display the menu and the products. We also discussed how the interactions would work on this website and what creative way we can use Figma to create a site that is both appealing and achieves the objective of displaying the menu in new and creative ways. After much thought, we moved to the mid-fidelity prototypes where I would bring these ideas to action.
Mid-Fidelity Prototyping
During the design of the mid-fidelity prototypes, my responsibility was to create Figma interactions for all pages. This involved everything from designing elements to ensuring seamless inter-page activity and crafting user flows that supported a non-linear approach. This design strategy allowed users to fully explore Sooyo Café’s website and discover its complete range of products and services. Through extensive prototyping, we streamlined the menu into a single, intuitive component, enhancing navigation. Each menu item was designed as a variant, simplifying user access. Additionally, we introduced an engaging call-to-action for exploring the gallery. To overcome a challenge with hover components, we implemented a creative workaround using rectangles, ensuring a cohesive and accessible user experience.
Style Sheets and Inspiration for the Website
High-Fidelity Prototypes
Feedback
In our final meeting, we presented the website to the client, who actively explored the various pages and features. The client was particularly impressed with the incorporation of the hand-drawn illustrations, which they felt added a unique and personal touch to the overall design. They appreciated how these sketches contributed to the cozy and welcoming atmosphere that aligns well with the Sooyo Café brand.The client was pleased with the overall user experience, especially how we designed the menu noting that the navigation was intuitive, and they expressed excitement about the final product.