Artive |UI Design|

A creative enrichment centre app offering music, dance and art programs for young adults. Pages include 'Home', 'Programs', 'My Classes' and 'Registration'.

Key User Tasks

View registered classes, schedules, and venue details.

Browse programs and registered classes with filter, sort, and search functions.

Select and register for classes.

Check registration and payment status.

Design Process

I explored a visual direction inspired by colourful, pieced-together puzzles.

 A specific detail would be puzzles piecing together on consecutive dates in 'My classes', highlighting a streak, and programs piecing together to draw connectedness to creative arts play. This concept reflects vibrance, creativity, and a touch of playfulness that I have in mind— qualities that resonate with young adults and help create a livelier and more engaging interface.

The interface uses strong contrast between interface components and the background to enhance visual clarity, readability, and accessibility.

UI Design Principles

Flexibility and Efficiency of Use
The “Upcoming Classes” section on the home page provides quick access to scheduled classes, allowing users to retrieve important information immediately.

Visibility of System Status
Clear call-to-action buttons such as “Start Exploring” and “Book Now”, together with programme visuals and activity icons, guide users toward the next steps and indicate interactive elements.

Consistency and Standards
Consistent icons and a standardised time format are used across the interface to maintain familiarity and support seamless navigation.

A sitemap is being built as part of the information architecture, serving as a guideline for the wireframe along with the wire flow. This helps map out key user processes.

Wireframe

Final Design Screens

Reflections

Managing time effectively was important throughout the project. I realised that allocating more time for testing and revisions would improve the overall design outcome.

Link to prototype: https://www.figma.com/proto/dA...