My DJ Cloud

A cloud music solution for DJs

UX / UI design for <b>desktop app</b>

building a full-blown cloud application

UX / UI design for <b>mobile app</b>

enabling DJ to access files on the move

Webdesign for <b>startup landing pages</b>

enabling conversion

My DJ Cloud

Visit website

INDUSTRY

Music Tech

Timeframe

Several Projects in 2022 / 23

TEAM

Lead Design
Designers UX / UI

About the project

My DJ Cloud's founders have extensive experience in the music tech industry. They envisioned a new service that could create a new market segment. This service provides cloud storage for DJs, allowing them to bring their existing music collection to the cloud with tailored backup functionalities. Working alongside the founders, we imagined a collection of mobile and desktop apps that work together seamlessly to create a consistent service and brand experience.

<section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud-pic05-desktop-crates-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud-pic05-desktop-crates-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud-pic05-desktop-crates-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud-pic05-desktop-crates-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>Immersive app experience<br> for different touchpoints</h3> <p>The desktop application offers DJs cloud storage and backup options, while the mobile app for both iOS and Android enables on-the-go access to files and easy playlist editing. With this comprehensive solution, DJs can efficiently manage their music libraries from any device with internet access, ensuring seamless access to their music collection whenever and wherever they need it.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>Desktop library<br> synced</h3> <p>My DJ Cloud is an insurance policy that provides protection against various scenarios such as hard drive failures, lost external drives, stolen devices, or missing backups. The app automatically backs up DJ libraries and files, ensuring that users never lose their carefully crafted music collection. The platform offers a clear overview of files and crates, with the option to manually offload files that are not needed.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud----sync-desktop-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud----sync-desktop-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud----sync-desktop-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/01._tile-image-1/Mydjcloud----sync-desktop-1x.jpg"> </picture> </div> </div> </div> </section> <section class="padding-largest no-padding-bottom module-portolio-detail-headline bg-grey-05"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Your music where you need it, when you need it. </span> <br class="not-on-s">And in the cloud when you don't. </h2> <p class="sn-text section-paragraph center">My DJ Cloud app seamlessly integrates with all major DJ software, including Serato, rekordbox, and Virtual DJ. The project scope included designing an onboarding wizard and third-party setup process to ensure that users can quickly and easily connect the app with their preferred DJ software. This integration enables DJs to manage their music libraries and backups more efficiently and with greater flexibility, giving them the freedom to use the software they prefer. </p> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom bg-grey-05"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="topic color bold">Integrated in your existing work flow</div> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/03._full-width-no-margin-image-1/mydjcloud----full-wifth-integrated-in-workflow-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/03._full-width-no-margin-image-1/mydjcloud----full-wifth-integrated-in-workflow-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/03._full-width-no-margin-image-1/mydjcloud----full-wifth-integrated-in-workflow-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container reverse-order"> <div class="flex-item-left img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile----crate-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile----crate-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile----crate-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile----crate-1x.jpg"> </picture> </div> <div class="flex-item-right"> <div class="vertical-middler"> <h3>System tray</h3> <p>Desktop app comes with a system tray that keeps users updated on the syncing progress. Our team considered various aspects when designing the app, including file status, error states, and syncing conflicts. Additionally, the app features a series of isometric illustrations that enhance its overall design and communicate next steps for the user.</p> </div> </div> </div> </div> </section> <section class="section modular-portfolio-detail-list"> <div class="wrapper portfolio-detail-list"> <div class="item flex-container"> <div class="flex-item-left"> <div class="vertical-middler"> <h3>An app for<br> mobile use case</h3> <p>The UX design for the mobile app prioritizes simplicity and intuitive navigation, ensuring users can accomplish tasks effortlessly while on the go. By incorporating a clean and responsive interface, the app provides a seamless and enjoyable user experience across various mobile devices.</p> </div> </div> <div class="flex-item-right img-mobile"> <picture> <source media="(max-width: 767px)" srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile-crates-1x.jpg" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile-crates-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile-crates-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/04._tile-image-2-3/mydjcloud-mobile-crates-1x.jpg"> </picture> </div> </div> </div> </section> <section class="padding-largest no-padding-bottom module-portolio-detail-headline"> <div class="wrapper"> <h2 class="l-text center"> <span class="color">Landing page</span> <br class="not-on-s"> </h2> <p class="sn-text section-paragraph center">We redesigned the website and launched a design system that established a strong brand identity. The new landing page messaging was aligned with the brand's core values to drive conversions and foster a connection with potential users.</p> </div> </section> <section class="section modular-portfolio-detail-list no-padding-sides no-padding-bottom"> <div class="headline-large-image"> <div class="item-wrapper"> <div class="item"> <div class="image img-mobile"> <picture> <source media="(max-width: 767px)" srcset="" /> <source srcset="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/06._full-width-no-margin-image-2/mydjcloud-fullwidth-1x.jpg 1x, https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/06._full-width-no-margin-image-2/mydjcloud-fullwidth-2x.jpg 2x" /> <img src="https://boanastudio.com/user/pages/04.cases/digital-dj-cloud/06._full-width-no-margin-image-2/mydjcloud-fullwidth-1x.jpg}"> </picture> </div> </div> </div> </div> </section> <section id="cta-your-project" class="section padding-largest modular-call-contact "> <div class="wrapper"> <div class="flex-container"> <div class="flex-item-left"> <picture> <source media="(max-width: 767px)" srcset="/user/themes/boanastories/img/sales/s-profile-j2-mobile.jpg" /> <source srcset="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg 1x, /user/themes/boanastories/img/sales/s-profile-j2-2x.jpg 2x" /> <img src="/user/themes/boanastories/img/sales/s-profile-j2-1x.jpg" alt="Johannes Holl" /> </picture> <a href="https://boanastudio.com/team/johannes-holl" class="xs-text text-grey-60 image-caption"><b class="bold text-grey-40">Johannes Holl</b> <span class="not-on-s">• </span>Managing Director</a> </div> <div class="flex-item-right"> <div class="text"> <div class="headline l-text"> <span class="color">Let’s talk about</span><br>your project. </div> <div class="teaser n-text text-grey-60"> We can help reduce complexity and identify quick wins upfront. </div> <div class="actions"> <a href="https://boanastudio.com/contact" class="button primary">Get free consultation</a> </div> </div> </div> </div> </div> </section>