Design System
Mixcloud.com
Mixcloud is an internet streaming music service that allows the listening and distribution of radio shows, mixes and podcasts, which are uploaded by users.
Introduction
📋 Project brief:
Creating a whole design system starting from the colours, typography, iconography, to more complex component. Everything needs to be responsive, creating interactions with the different states of the element.
🎯 Challenge
Improving the Mixcloud interface following the human-centred design trough the standards of Atomic design and Google material. Better organisation of the files into the project and creating everything responsive for mobile.
👨🏻‍💻 Responsabilites:
• Design System
• UX Strategy
• Sketches & Wireframes
• Low-fidelity prototypes
• High-fidelity prototypes
• Usability Testing
• High-fidelity design
🛠 Tools:
• Sketch (UI Design)
• Marvel (Prototyping)
• Pen and Paper (Wireframing) ❤️
UX Strategy Blueprint
Challenges
What are the problems that I need to solve?
• Improve the Design System
• Improve various elements like (Player, Boxes, Notifications, Icons, etc.)
• Improve the colours palette
• Improve the typography
• Working with the website grid
• Creating component (Atomic Design)
• A / B Testing
Aspirations
What’s the ideal desired outcome? What do you want to achieve?
• Having a complete Design System
• Human-centred Design
• Design most user-friendly
• Perfect files organisation
• The project in Sketch needs to be perfectly organised for better collaboration inside the team
Activities
What're the types of activities solve the problems? What capabilities achieve your aspirations?
• Human-centred design
• Atomic Design
• Google Material
• Moodboards
• Sketching wireframes
• Creating iterative prototypes
• Design activities
• Testing and iterate
Measure
What types of measures will you employ? What metrics will be used to gauge success?
• Increase user satisfaction
• Give more value to Mixcloud to be a better competitor or leader on the market
Style guide
Creating the visual design
Following the old parts of the style guide that they have already in place, I created everything from scratch, all the styles, components and patterns. I followed the atomic design, and I created all the atoms, then I connected the molecules and created the elements (organism). The last step was to create the final visual design templates.
Selected organism
Following the human-centred design, I finished all the organisms or component that I needed for Mixcloud, and they are ready to be used in the final designs.
Final results
After a few iterations based on the users and client feedback, I found the best solution for the client, and I decided to present them also the difference between the old design components and the new.
Presentation old vs. new
This is the presentation and the difference between the old component and the new, the difference is huge because I followed the Google material standard and the human-centred design.
Conclusion
Reflection and learning
I understood the importance of why every product needs to have a design system. I'm impressed how it's easier managing the design elements when you have everything organised well.

Teams need to give also importance to this part of the work. We don't need to lose time because we don't have the design system and nothing is arranged, let's make the team life easier.

Designers need to learn how to pitch ideas and justify design decisions from the standpoint of how it's going to make the company money, grow an audience, or make their experience better.
Thanks for watching!
Go on top
GET IN TOUCH.
DribbbleLinkedinhello@markoperic.ch
© 2016–2019 Marko Perić. Made in Webflow with 💜