Bruno Gross
Timon Czarny
3 months
2024/25
Research, Ideation, Wireframes, UI/UX, Prototyping
UX (evaluation user interviews, survey)
UI (Figma)
Why RecordStore?
We wanted to develop an app based on SoundCloud that is specifically tailored to the needs of independent artists. Through UX research and AI – powered optimisation, we created a solution that specifically supports their creative process and fits seamlessly into their workflow.
User Research & Insights
Through interviews with musicians at different levels of experience, we have identified key challenges: Digital reach is essential, especially on platforms like Instagram, to gain listeners and fans. Feedback from the community encourages further development, while financial and technical hurdles make access to professional production and marketing more difficult. Despite these challenges, most artists prioritise the emotional connection to music over commercial success.Based on these insights, we defined a user persona-Charlie Müller, a 26-year-old student and passionate DJ-whose creative routine, challenges, and needs guided our design decisions throughout.
Main functions of the app
RecordStore — This is the starting point for creating a setlist. Users can explore tracks based on their previously defined preferences. The experience is similar to browsing through a digital record collection, making discovery feel personal and engaging. Once they find a song that fits their set, they can drag it into one of the dashed boxes to add it to the beginning, middle, or end of the set.
Setlist — Here, users can arrange, edit, and fine-tune the order of their set. This space is designed to support quick experimentation: rearranging songs, testing transitions, and optimizing the overall flow.
Shelf — Acting as the central hub of the app, the Shelf stores all previously created setlists. Users can access, manage, and organize their sets, revisit older versions, or start something new. The metaphor of a physical shelf helps ground the experience in something tangible and easy to grasp.
This tri-level system supports both spontaneity and structure-ideal for artists who want control without constraints.
Design decisions
TypographyIn our design, we chose a deliberate combination of Roboto and
Space Grotesk to balance functionality with a strong thematic connection.
Roboto for body text
Roboto is optimized for digital use and offers excellent readability across different sizes. Its clean lines and open letterforms make it ideal for longer passages of text, ensuring a smooth and accessible reading experience.
Space Grotesk for headings
For headings, we use Space Grotesk. With its geometric structure and subtle retro character, it evokes the visual language of classic record covers—a nod to the music-focused theme of our app. This choice strengthens the visual identity while maintaining clarity and contrast.
Responsive design
Our app follows a mobile first approach, with a specially optimised desktop version that makes effective use of the additional screen space.Key aspects of the desktop adaptation:
-> Reduced grid for a clear layout and improved user guidance.
-> Efficient arrangement of elements, such as the extended timeline and the side-positioned preference modal.
-> Enhanced functionality with desktop-specific features like the profile icon in the top left corner.
-> Visual consistency in colour scheme, typography, and design principles across all devices.
Integrating AI
Throughout the project, we explored the use of AI not only as a feature for end users but as a supportive tool within our own design process. AI assisted us in generating and structuring ideas, simulating user behavior and iterating on both visual and functional elements.While these tools helped us speed up certain workflows, they also highlighted the need for critical reflection. Every machine-generated suggestion required careful review, contextual understanding, and alignment with real user needs. In the end, we came to see AI not as a shortcut, but as a creative co-pilot—enhancing our process without replacing human insight.