Discover Your Rhythm.

Project Disciplines

01
Research
02
Strategy
03
UI/UX Design
04
Website Development
05
App Interface Design

Dynamic Design System for Music Production Technology

The music production space is rich with technology that makes creation possible. SoundSculptor, a software music production company, is taking it another step further by streamlining music production with AI algorithms. The growing company collaborated with ArtVersion’s design team for website design and development, to further their reach across sectors that could utilize their technology such as education, business, and even personal use. ArtVersion created a dynamic graphic system with modern aesthetics to encapsulate SoundSculptor’s innovative software and make a memorable audience association with their brand. Further enhancing the user experience, they designed an intuitive UI kit tailored for SoundSculptor’s software.

Digital Design

The website experience was developed to encapsulate the offerings of SoundSculptor’s services within their software. With this in mind, ArtVersion incorporated SEO best practices to further SoundSculptor’s reach and demographic. To ensure alignment with the latest web design best practices, the layout utilized clean, accessible design principles, enhancing usability while maintaining a sleek, professional look. The team also outlined and executed optimal funnels and user pathways, particularly drawing attention to the community page, which provides access to tutorials, tools, and inspiration for music creators. ArtVersion structured the user flow of the website to strike a balance between spotlighting the software and offering a visually engaging design that reflected SoundSculptor's authority and authenticity.

Web design example designed by ArtVersion agency.
Falling vinyl record disc

A Complete Visual Story

In addition to the website design, ArtVersion worked with the SaaS company to design a comprehensive UI Kit for their software and dashboards.

The SoundSculptor team envisioned their overall design development to feel contemporary, sleek, and easy to use. After conducting competitor analysis to find a fresh angle to position Sound Sculptor with a unique style, the graphic design team at ArtVersion formulated their visuals to align with the brand’s vision. The UI kit was a comprehensive system designed to cover all possible user flows, including layout screens for each music genre, musical instrument, and other specific keywords. The team composed a minimalist design language, rich with large graphic elements brought to life with CSS animations and custom coding. The dynamic motion of the graphics was intentionally built to emulate the rhythm of music and sound. 

Responsive Ready Design

Carrying out the user experience across devices and resolutions, ArtVersion designed the UI kit and the software itself across resolutions—desktop, mobile, and tablet.

The accessibility across devices encouraged a unified system and gateways for users to access the AI software. Whether on the go or when inspiration struck, users had the opportunity to continue creating with their mobile devices. The structure for responsive modes attained an organized layout with that same rich burnt red color story, coalesced with deep black for contrast. The interactive elements were formed with thin line strokes and rounded edges to create a compact, yet clear navigation. The interactivity and structure were further carried out in the UI design for the SoundSculptor’s AI chat functionality which allowed users to modify the AI technology with their musical needs.

All in the Details

The visuals told a musical story—redolent to musical items such as an abstract circular design for a vinyl record, or knobs and switch from a soundboard for custom iconography. To tie in another element of modernity, ArtVersion incorporated burnt gradients to the design for vibrancy when in conjunction with the beige, muted background. The overall design system strengthened SoundSculptor’s growing impact in the music industry, with a unique visual story. All elements were carried out without tutorial pages and in the AI chat navigation itself with sleek, graphic visuals.

Designed to be Dynamic 

Across each layer, the design language was created for engaging microinteractions.

To spark life into static layouts, ArtVersion designed UI elements to be flexible enough for embedded motion and microinteractions. Designed for pulsing animations, growing visuals on hover or scroll, and color interactivity within the navigation, the dashboards emulated a visual rhythm to heighten user engagement. 

UI/UX Mobile Design of the Genre Search Feature

Neulis Sans
Regular
Neulis Sans
Medium
Neulis Sans
Semi-Bold
Neulis Sans
Bold

Typography

Neulis Sans, in regular, medium, semi-bold, and bold weights, was selected for its modern and clean aesthetics that aligned with advanced technological interfaces. The typeface enhanced usability with its clear and legible design, which was needed for navigating the app's features. The regular weight provided a comfortable reading experience of extended text, while the medium weight provided subtle emphasis for interactive elements. On the bolder side of the typeface style, semi-bold and bold drew the user’s eye to key sections and important features for an intuitive user experience.

Color Selections

The design system's color palette significantly enhanced its modern aesthetic. ArtVersion chose a rich gradient of burnt red and orange hues to set SoundSculptor’s branding apart from competitors. These colors, associated with confidence and creativity, were specifically selected to resonate with the software’s goal of fostering these qualities in its users. This strategic use of color helped establish a distinctly contemporary palette.

Melody
#FFECA2
Tame Tempo
#FFCB57
In Tune
#FF8D37
Allegro
#DF501B
Electric Riff
#A30000
Half Measure
#000000
Web design example shown on the mobile design and designed by ArtVersion team.

Social Media Campaign

As engagement was a pivotal factor in the launch of SoundSculptor’s technology, ArtVersion created a social media campaign to access a wider audience on social platforms. Utilizing the newly implemented design language, the social posts spotlighted why SoundSculptor was a differentiator, and how it could help musicians with their projects. The gradient dual-tones and custom icon designs were also included in the social campaigns to introduce users to their design language for user memorability and brand association. The campaign also helped further establish SoundSculptor’s brand activation and enablement across channels.

UI/UX Design of the AI Learning Hub Portal for Members

The Outcome

The collaboration between ArtVersion and SoundSculptor significantly enhanced the SaaS company's position as a leading-edge authority in the industry. The launch of their website attracted a global audience of music aficionados, contributing to an expansion of their user base. Furthermore, SoundSculptor's innovative design system refreshed its brand identity, introducing a unique color palette and custom graphic elements that established them as a distinct differentiator in the music production space.