Soundlabs
As part of the Mobile App Design course, I designed and developed the UI/UX prototype for Soundlabs, a mobile app entirely dedicated to French-language rap. The aim of this project was to create a seamless and intuitive user experience (UX) whilst developing a strong, modern and immersive visual identity (UI).
My steps
- Research and Moodboard: To define the app’s visual style, I began by researching and benchmarking existing music apps. I then created a moodboard featuring visual inspirations, textures and the urban vibe characteristic of French-language rap, in order to lay the foundations for the app’s future identity.
- Information Architecture and Wireframes (Low-Fidelity): Before considering colour, I structured the user journey. I defined the app’s navigation tree and produced wireframes. These black-and-white diagrams allowed me to position key elements (button areas, images, text) to ensure optimal mobile usability, particularly for critical flows such as registration or checkout.
- Visual Design (High-Fidelity): Once the structure was approved, I moved on to the UI Design phase to design the final screens. I defined a precise visual style guide (components, buttons, icons, album cover management) to ensure perfect consistency throughout the entire application.
- Prototyping: The final stage involved linking the screens together to simulate real-world interactions (clicks on buttons, page transitions, opening the mini-player, payment flow).
My design
- Colour palette: The design is based on a strong contrast between a dark, minimalist background and vibrant pink/magenta accents. This colour scheme creates a dynamic, urban and resolutely modern aesthetic, perfectly in tune with the visual language of the music and rap scenes.
- Typography and Visual Elements: The use of sound wave visuals, minimalist icons and clear typography ensures optimal readability, even on mobile devices.
Key features
- Onboarding and Authentication: Welcome screens introducing the app (streaming and purchasing), registration/login forms, and subscription options.
- Navigation & Discovery: Home page highlighting the latest in French-language rap, dedicated artist pages (e.g. Gims), album tracklists, and a search screen.
- E-commerce & Streaming: A complete sales journey including the track page, the shopping basket (Cart), the payment details entry screen, as well as the loading and payment confirmation screens.
Conclusion
This meticulous work, from conceptualising on a mood board to refining the wireframes, enabled me to master the principles of mobile UX/UI by successfully integrating a streaming platform with an e-commerce journey.
Gallery
