• UI/UX Design · Full-stack Web Development

    Eleganza Violin Studio

    A full-stack e-commerce and lesson booking experience designed and developed from scratch for a violin studio.

    Eleganza Violin Studio desktop website
    Eleganza Violin Studio mobile website
    Eleganza violin shopping experience

    About the Project

    Bringing the violin studio experience online

    Eleganza, meaning “elegant” in Italian, is a full-stack e-commerce website for a violin studio, enabling users to purchase instruments, accessories, and lessons, book available lesson times, and explore educational content—all within one digital experience.

    View GitHub Repository
    Role

    UI Designer
    Full-stack Developer
    Project Lead

    Timeline

    Jan – May 2024

    Team

    5 Full-stack Developers
    2 also serving as UI Designers

    Domain Contribution

    Classical Music · Music Education
    Studio & Lesson Context

    Tech Stack

    React · Next.js · Node.js · Express.js · MySQL
    HTML · CSS/SCSS · Bootstrap · Figma

    Product Experience

    Feature Overview and My Contribution

    The experience was designed and developed responsively across desktop and mobile, connecting discovery, shopping, lesson booking, and customer account features across devices.

    01 / Discover & Explore

    Bringing the studio’s expertise online

    Guided content helps beginner and advanced players discover classes, masterclasses, instruments, violin knowledge, and the latest stories and events.

    My Contribution
    Homepage Experience · User Journeys · Interaction Design · Design System

    Eleganza Violin Studio
    Eleganza responsive desktop experience
    Eleganza responsive mobile experience Eleganza responsive mobile experience

    Responsive Experience — Desktop & Mobile · Scroll to explore ↓

    02 / Shopping Experience

    From product discovery to checkout

    Customers can filter instruments and accessories, explore product details and reviews, add items to their cart, and continue through checkout.

    My Contribution
    Feature Planning · Cross-functional Collaboration

    Eleganza Violin Studio

    03 / Lessons & Booking

    Making lesson scheduling more flexible

    Students can explore instructor profiles, group classes, or individual lessons, choose an instructor, and book directly from their available weekly time slots.

    My Contribution
    Interaction Design · UI Design

    Eleganza Violin Studio

    04 / Customer Account

    Bringing bookings and purchases together

    Logged-in customers can return to their account to review lesson bookings and previously purchased products.

    Independently Developed

    My Contribution
    End-to-End Feature Ownership · UI Design · Authentication · Backend Development · SQL Database Integration

    Explore my contribution

    Connected Experience

    Discover. Learn. Book. Purchase. Return.

    Impact

    01

    Reduce Decision Time & Uncertainty

    Transparent product, pricing, lesson, and instructor information helps customers evaluate their options before visiting the studio.

    02

    Connect the Customer Journey

    Discovery, learning, booking, and purchasing are brought together into one connected digital experience.

    03

    Enable Flexible Booking

    Students can explore lessons, instructors, and available time slots online to arrange future classes with greater flexibility.

    01 / Information Architecture

    Structuring a multi-purpose music website

    Eleganza brings together several experiences that would typically exist separately: shopping for instruments and accessories, discovering and booking lessons, exploring educational content, and managing purchases and bookings through a user account.

    We organized these functions into a clear information architecture that separates the main user journeys while keeping them connected within one digital experience.

    The resulting structure established the foundation for the site's navigation, page hierarchy, and feature development across the e-commerce, lesson, and account experiences.

    Information Architecture — Connecting shopping, lesson booking, educational content, and account management within one platform · Click to enlarge ↗

    02 / UI Design

    Designing the Experience

    As one of two UI Designers, I co-created Eleganza’s design system, establishing a visual language that balances the elegance of classical music with clear and usable web interfaces.

    Visual Direction

    We combined serif typography for headings and brand elements with sans-serif body text, using low-saturation violin wood tones and grayscale colors to create a refined and cohesive visual identity.

    Responsive Components

    I led the design of the header and footer across desktop and mobile, and designed responsive layouts for the homepage, teacher, and lesson pages.

    Design System

    The system defined typography, color, logo treatment, and reusable component states such as buttons, helping maintain consistency across the website.

    Design System — Eleganza visual language · Click to enlarge ↗

    03 / Database and Data Dictionary Design

    Building the Foundation

    The database structure evolved throughout development as the website's content and features were refined. Several key decisions supported the e-commerce experience.

    Shopping Cart

    Temporary changes to items in the shopping cart are stored in the shopping_cart table before the order is confirmed.

    Order History

    Orders are divided into order and order_detail tables. I joined the users table with order, then connected it with order_detail to ensure updates could be reflected in the Order History page within the Account Center.

    Database Integration

    I also set up routes to fetch data from the database using SQL, connecting the backend data with the website interface.

    ER Diagram — Eleganza database structure · Click to enlarge ↗

    04 / Technical Architecture

    Connecting interface, logic, and data

    The site connects a responsive frontend with backend routes and a structured SQL database, allowing product, class, account, cart, and order data to flow across the experience. I worked across the interface and data layer, connecting SQL queries and backend routes to the frontend to support core e-commerce and account features.

    Technical Architecture — Connecting the frontend, application logic, and SQL database · Click to enlarge ↗

    05 / Feature Development

    Building the User Account Experience

    Independently Developed

    I independently developed the user account experience, connecting the frontend interface with backend logic and database data. My work covered authentication and registration, account management, form validation, and dynamically displaying user-specific information across the website.

    01

    Authentication & Registration

    I developed the registration and login experience to support authenticated account access through off-canvas panels triggered from the header profile icon.

    Form Validation

    Client-side validation and regular expressions check user input before submission, while a password strength indicator provides immediate feedback during registration.

    Authentication

    I implemented JWT-based authentication to connect the frontend with the backend authentication flow and reflect the user's login state throughout the interface.

    Eleganza Violin Studio
    Eleganza mobile registration interface
    02

    Account Centre

    I developed the Account Centre as a centralized space where users can manage their profile and access account-related information.

    Profile Management

    Users can update their personal information after registration, including optional fields that do not need to be completed during initial account creation.

    Persistent Account Data

    Profile changes are connected to the backend and database, allowing updated information to persist across the application. Users can also access their purchased products and lesson records from the Account Centre.

    Eleganza Violin Studio
    Eleganza mobile Account Centre interface
    03

    Dynamic User Data

    Beyond creating static account pages, I connected user data to the interface so that content and navigation could respond to the current user's state.

    Dynamic Interface

    The application detects authentication state and updates the interface accordingly, while profile information and account-related records are retrieved for the current user.

    Data Integration

    I implemented data retrieval through backend routes and SQL queries, connecting database records with the corresponding frontend views.

    Eleganza Violin Studio
    User Interaction Frontend Auth / API SQL Database Dynamic UI
    Results

    Key Takeaways

    01

    Working Within Constraints

    The final product prioritized the core shopping experience while leaving room for future development.

    Guided product discovery form concept designed for Eleganza

    Guided Product Discovery — Concept and questionnaire designed by me; implementation deferred due to project constraints.

    Future Opportunities
    Interactive Violin Anatomy Third-party Payment Integration Personalized Recommendations AI Chatbot
    02

    Project Coordination & Delivery

    01 PLAN
    →
    02 DEVELOP
    →
    03 INTEGRATE
    →
    04 DELIVER
    Team Alignment

    Weekly meetings, individual check-ins, and task coordination.

    Git / GitHub

    Version control, code integration, and collaborative development.

    Technical Support

    Collaborative debugging, problem solving, and integration support.

    Delivery

    Timeline reviews and workload reallocation toward final delivery.

    03

    Reflection

    Eleganza taught me to think beyond individual screens—connecting user experience, visual design, application logic, and data as parts of one digital product.

    Working across design and development strengthened my understanding of how interface decisions translate into technical implementation.