Marko Peric - Mixcloud

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.