Transforming the Vanilia E-Shop
.png)
My role
Redesign, Information Architecture, Prototyping, Interaction Design.
Defining product design concepts, information architecture, and creating wireframes. Making decisions around content, design and product strategy informed by metrics and research.
Timeline & Status
2 weeks, handed off for implementation
Overview
This project is a redesign of e-shop. Vanilia was born out of the addiction to discover, to find and to fall in love. Falling in love with the softest fabrics and tiniest details.
From design to styling, fitting and testing of clothing - at Vanilia we do this with passion for craftsmanship. “It only takes one-fifth of a second to fall in love. And when you do, you know.”
Release creation and royalties split was the biggest request from the community. Above all else, it was the right thing to do, and an opportunity to overdeliver.
Tight deadline, because we had to launch
before the sunset date.
Access nuances for Beatclap: users had to navigate a rarely-used "advanced settings" mode to complete the update.
Features Overload. Implementing a prioritisation Matrix.
Cross functional teams. Misalignment with the backend team slow down processes.
Clear, informative, and straight-forward instructions.
Anticipate and communicate progress and errors.
Overdeliver with design.
The Beatclap team provided me with a list of mandatory update instructions which included access to the existing Web App and a list of major competitors (Figure 3.0).
Missing Visual Hierarchy for CTA Discovery
Inefficient Information Architecture and Page Real Estate Utilisation
Overlapping and Redundant CTA Placement
Overlooking legibility & formatting.
Lack of visual treatment to support longer entries and text wrapping.
To make sense of an otherwise unconventional set of steps for creating a release, I started by exploring ways to foster a perceived sense of progress.
Shown in Figure 3.1, categorising releases into two stages helped mitigate the cognitive load of seeing all the steps at once.
Additionally, overly-technical terms were revised to better cater to a general audience.
Having structure also helped surface some heuristic issues; whichmainly involved confusing navigation and lack of edge case considerations.
I conducted three in-depth interviews, these interviews allowed me to explore participants' past experiences with music distribution platforms and their expectations for Beatclap services.
The findings confirmed my assumption that users prefer managing their music revenue and distribution on a computer, as they believe it minimises errors and streamlines the process.
One participant expressed their frustration:
"I find it incredibly inconvenient to track my music revenue across different platforms every single time. It's frustrating and time-consuming."
The Beatclap team provided me with a list of mandatory update instructions which included access to the existing Web App and a list of major competitors (Figure 3.0).
To make sense of an otherwise unconventional set of steps for creating a release, I started by exploring ways to foster a perceived sense of progress.
Shown in Figure 3.1, categorising releases into two stages helped mitigate the cognitive load of seeing all the steps at once.
Additionally, overly-technical terms were revised to better cater to a general audience.
Having structure also helped surface more heuristic issues; which mainly involved confusing navigation and lack of edge case considerations.
I conducted three in-depth interviews, these interviews allowed me to explore participants' past experiences with music distribution platforms and their expectations for Beatclap services.
The findings confirmed my assumption that users prefer managing their music revenue and distribution on a computer, as they believe it minimises errors and streamlines the process.
One participant expressed their frustration:
"I find it incredibly inconvenient to track my music revenue across different platforms every single time. It's frustrating and time-consuming."
A standard set of layout grids and breakpoints (Figure 4.0), was critical in ensuring we could design and build quickly and consistently.
A standard set of layout grids and breakpoints (Figure 4.0), was critical in ensuring we could design and build quickly and consistently.
It was essential to ensure that users could seamlessly access all content related to their account in a clear, organized manner. The catalog was designed with a focus on clarity and ease of navigation, presenting relevant data in a structured, intuitive layout.
The Beatstore empowers users to create and personalise their own merchandise seamlessly. With a streamlined flow, users can easily navigate through color selection, print customisation, and final product previews.
The label overview centralises key metrics, offering a clear snapshot of releases, artists, and recent activity. Its clean, intuitive layout allows users to easily navigate essential data and quickly access detailed information.
The release creation process is broken down into clear, manageable steps, allowing users to easily select asset types, add metadata, and upload tracks from any device
Create and access to your royalty splits, terms and payees.
Throughout the design process, balancing user needs with technical constraints was crucial. The iterative feedback loop allowed for constant refinement, ensuring a user-centric approach. This project highlighted the importance of seamless cross-platform experiences and the value of clear progress indicators in complex workflows.
Viewing constraints from different perspectives helped brew new approaches to tackle other constraints.
Beatclaps' design resources were limited — knowing where to find them and when to use them saved immense time and overhead.
It ensured that the project was progressing holistically —
effectively accounting for content strategy and technical
feasibility early.
If an added extra step led to a more intuitive and error-free experience, it was worth the additional manual effort.