Studio Yum Yu UI Style Guide

Studio Yum Yum, a curated marketplace for vintage table and homeware, launched an e-commerce website to revitalise the vintage sector.

As the lead designer, my goal was to create a visually stunning platform that integrates auction items and exclusive stock while deviating from the conventional antique aesthetic. Part of this meant coming up with a robust design system realised as design components inside of Figma. We aimed to capture timeless elegance infused with a bold and playful digital brand that resonates with modern audiences.

Project Breakdown

  • Leveraging Figma's design tools, we created responsive components that adapt to different screen sizes and devices. During prototyping, we iteratively explored layouts, interactions, and refined visual styles to ensure an engaging user experience.

    Using Figma, we translated insights into high-fidelity mockups with customisable components. We designed primary, secondary, and ghost buttons for different actions. The Horizontal Menu Item facilitated efficient navigation, and pagination components divided long product lists into manageable pages. Additionally, we created intuitive input fields for user input.

  • The development team utilized Figma's design assets to implement the website, ensuring seamless integration of UI components. Responsive and customizable Dropdowns, Buttons, Horizontal Menu Items, and Pagination were developed. Rigorous testing validated performance, compatibility, and responsiveness across browsers and devices, ensuring a high-quality product.

  • The Studio Yum Yum e-commerce website project demonstrated the power of captivating UI design. Leveraging Figma's capabilities, we created an immersive platform that blended vintage charm with modern aesthetics.

    Responsive and customisable UI components, including Dropdowns, Buttons, Horizontal Menu Items, Pagination, and Inputs, resulted in a user-friendly and visually appealing website. Positive user feedback and the impact on the vintage sector affirmed the success of our UI design approach.

Cards and Date Pickers

Cards: Cards play a significant role in displaying and organising information on a website. In the context of Studio Yum Yum's e-commerce website, we designed visually appealing cards to showcase product information, including images, descriptions, and pricing. The card layout, created using Figma, ensures consistency and aesthetic appeal throughout the website, allowing users to browse and explore products in an organised manner.

Date Picker: The Date Picker component provides users with a convenient way to select dates. Whether it's for scheduling deliveries or choosing event dates, the Date Picker enhances the user experience by simplifying the date selection process. Our Figma design for the Date Picker includes intuitive calendar interfaces and seamless interactions, allowing users to easily navigate through dates, select single or double dates, and complete their desired actions.

Buttons, Dropdown, Horizontal Menu and Pagination

Buttons: The primary button is designed to be eye-catching and customisable, serving as the focal point for important actions like "Add to Cart". Secondary buttons are used for secondary actions such as "Compare Items”. Ghost buttons, on the other hand, offer a subtle and minimalistic appearance, suitable for actions that don't require immediate attention.

Dropdown: By hovering or clicking on the trigger, a dropdown menu appears, allowing users to choose an option and execute the relevant action. The dropdown component we designed provides an interactive and convenient way for users to select their preferred option from a range of choices.

Horizontal Menu Item: The Horizontal Menu Item provides users with a clear and organised way to move around the site quickly and efficiently. We crafted a visually appealing and interactive horizontal menu that adapts to different states and levels, making it easy to explore and access various sections of the website.

Pagination: We designed a Pagination component that seamlessly integrates with the overall UI design, offering users a smooth browsing experience. In cases where a long list of items needs to be presented, Pagination becomes an essential component. It allows the list to be divided into several pages, with only one page loaded at a time.

Input: Inputs are crucial for collecting user input in form fields or search inputs. In this project, we focused on creating user-friendly input fields that meet the specific needs of Studio Yum Yum's e-commerce website.

Disciplines: UI Design System

Client
Studio Yum Yum

Role
UI design

Previous

Marry Yourself