Cutting-edge AI tools for amplifying creativity.

Spring AI Studio

COMPANY

SPRING DESIGN STUDIO

ROLE

    VISUAL DESIGN,   INTERACTIVE DESIGN

DURATION

2 WEEKS

TEAM

        LEAD UX DESIGNER,       VISUAL DESIGNER

TOOLS

FIGMA, SPRING AI GENERATOR

Project Background

After the establishment of Spring's AI generator, a newly developed section of the site known as the "Creator" was envisioned to elevate the user experience post generating content. The targeted audience for this platform focuses on institutions and businesses to collaborate with Spring for content creation, structuring websites, and overall marketing purposes.

Ideation

My head designer conducted research and recognized the need for incorporating UI graphics when it came to customers' concept creation processes for their individual companies, aiming to broaden the capabilities of Spring's content.

Entering the poject mid-way, I formed a personal goal to enhance users' website and portfolio-building experience by introducing new visual concept ideas.


Advancing Existing Elements

Centered on establishing an area for UI graphics and moodboards, I drafted several lo-fi concepts where I identified a style that harmonized effectively with the current user interface of Spring's platform.

Sketch 1: UI Kit Component Modal

Sketch 2: UI Kit Moodboard Modal

Design Concepts

UI Kit Pane

For the Creator editing features, I created a tab for the left pane to showcase UI Kits for users building their web structure.

From components to patterns and widgets, the scrollable pane would hold various user interface elements that can be added to the canvas.

Enlarged Pane Visual

“View All” text link for UI Kit modal

UI Kit Pane Location in Creator

UI Kit Modal Window

To see the features in an expanded view, I formed a modal window when selecting the “View All” text link to display all UI attributes and branches associated with each UI category.

If a user wishes to select more than one element, I added a right pane in the modal titled “Selected Designs” that lists all multi-selected objects. This pane allows editing color, duplication and deletion of any element.

Moodboard Modal Window

Designed primarily for individuals in the fashion industry, I created a modal window for moodboards featuring customizable templates. Through an exploration of style genres and current trends, each theme was categorized, and the most frequently utilized boards were highlighted under the "Popular" category.


In addition to templates, I introduced an Elements tab to enhance the creative process, allowing users to browse transparent PNG and SVC images of garment pieces, patterns, swatches, and other elements. This feature empowers users to craft unique moodboards tailored to their preferences.

Elements Tab

Thumbnail States

Users can explore these elements by selecting and previewing each object, as well as uploading their own designs and images.

Hover State

Hover Button State

Click Button State

Next Steps

From the approval given by my lead designer, my next plan following the concepts is to create an interactive prototype which would allow participants in the usability testing session to provide feedback on the overall designs.

Feel free to explore Spring current features below!

https://spring.design/

Previous
Previous

Picture This