Final Project of Memorisely UI Design Bootcamp

Case Study Mahogany

Overview

Role

Product Designer

Team

Solo Project

Tools

Figma, Figjam, Notion

Timeline

about 3 weeks as final project (conceptual product)

Mahogany Music is a music channel on YouTube that features live performances and intimate sessions with emerging and established artists. While the YouTube channel has been successful in attracting viewers, there is an opportunity to expand the brand by creating a dedicated music app that offers a more immersive and personalized experience for users.
The goal of this project was to design a desktop, tablet, and mobile experience capturing how new users to Mahogany would browse and play music on the platform. As an experience, I prioritized designing the experience across light and dark themes to ensure their users can listen and watch music in the mode of their liking.
Young working professionals interested in discovering new music. This user segment consists of young professionals aged 25-35 who enjoy exploring new music and discovering artists across different genres. They are likely to have an active social life and enjoy going out to concerts and music festivals. They may be passionate about music but don't have as much time as they used to for discovering new artists or listening to albums from start to finish. As a user segment, they mainly listen on iOS devices or via their desktop at work.

Design Process

Research

I began the Mahogany project by conducting thorough research to lay a strong foundation for my design decisions. Here's a breakdown of my research process:

Competitor Benchmarking & Information Architecture

To gain insights into the music player market, I started with competitor benchmarking, information architecture analysis, and user flows. This step allowed me to understand the strengths and weaknesses of existing products and identify areas where Mahogany could excel.

I have to admit that I struggled with finding the Unique Value Proposition for this project as competitors like Spotify, Apple Music, and YouTube are such powerful apps in the user experience that it felt a bit arbitrary to design a competitor, and I was often drawn to best practices that especially Spotify has already successfully implemented.

One of the key aspects I observed during my competitor analysis was the importance of aesthetic design. While Spotify excels in this regard, other popular music apps often fall short. Recognizing this, I aimed to make Mahogany visually appealing and user-friendly, offering a design that rivals Spotify's aesthetics. Additionally, I chose to include a light mode as this is one thing that Spotify has never offered to its users.

Understanding the significance of customization, I decided to give Mahogany a competitive edge by offering a light mode. This option not only adds a unique touch but also caters to users who prefer a brighter interface, setting us apart from Spotify and other competitors.

Ideation & Wireframing

The ideation phase of Mahogany consisted of brainstorming and sketching the initial design concepts. To bring these concepts to life and visualize the design process, I created low-fidelity wireframes that served as the blueprint. These wireframes are intentionally minimalistic, emphasizing functionality over aesthetics, and play a pivotal role in iterating and refining the user interface before advancing to the high-fidelity prototype stage. They allowed me to focus on the core user interactions and layout structure, ensuring that the foundation of Mahogany was sound before diving into the finer design details.

Accessible Color Styles

A lesson I learned was to make sure our color palette was passing accessibility standards. I realized how strict these actually were as I would have never thought, some of the combinations would not pass the test, again learning that I am not my user, and that designing a successful, accessible product needs to be inclusive to everyone.

Nested Component Sets

When I think about my main takeaways from working on the Mahogany project, the nested component comes to mind immediately. Learning how to not only build reusable components but elevate their intelligence by nesting them and prototyping each element was incredibly tedious work but so very rewarding at the same time. I think this is when I really fell in love with Figma and how powerful it is.

Example of Nested Component
"Playing Music"

Design Solutions

To transform the initial sketches into a fully interactive experience, I leveraged the capabilities of Figma to create dynamic prototypes for Mahogany. Using Figma's intuitive interface, I translated the wireframes into clickable prototypes, ensuring that every user interaction and transition was accurately represented.

In Mahogany, I placed a strong emphasis on creating an engaging and immersive user experience through thoughtful interaction design. Leveraging Figma's capabilities, I incorporated navigation elements, transitions, and animations that simulate real-life application behavior. From "after delay" animations to overlay effects, these interactions were meticulously crafted to enhance the prototype's realism, making the navigation experience closely resemble that of the actual application. Hover prototyping was used extensively to ensure users could intuitively explore and interact with the interface, resulting in a dynamic and user-friendly environment that fosters engagement and usability. These interactive elements collectively contribute to Mahogany's goal of delivering a compelling and user-centric music player experience.

Mobil in Dark & Light Mode

Tablet in Dark & Light Mode

Desktop in Dark & Light Mode

Usability Testing

Once the prototypes were ready, I conducted usability testing sessions with some of my fellow classmates, teachers, and friends to gather valuable feedback. Due to the scope of the project, I only got a limited number of feedback and did not turn to measures, such as A/B testing. If this were a real-life project that would be built for the public to use, this step would have had to be a lot more extensive.

User feedback and usability testing significantly influenced Mahogany's design decisions. One key change involved simplifying the sign-up process by moving optional choices like music genre selection and dark/light mode to a separate screen. This adjustment improved the sign-up flow's clarity and offered users the flexibility to skip optional preferences. Additionally, users' requests for loading screens, while not initially implemented, are under consideration for future updates. These refinements underscore Mahogany's commitment to enhancing the user experience by continuously incorporating valuable user input.

Conclusion & Learnings

As I look back at the journey of creating the Mahogany Music app, it becomes evident that this project was more than just a final assignment for my UI boot camp at Memorisely. It was a solo expedition into the world of design complexity, highlighting the immense power of collaboration and teamwork, which I came to appreciate even more during this independent endeavor.

Being at a junior level, Mahogany challenged me to not only craft an appealing design but also to learn and implement advanced techniques like component sets and auto-layout, all while adhering to best-practice design principles. These hurdles, combined with the constraints of time and project scope, made it a challenging endeavor. I discovered that design refinement is an art, a delicate balance where innovation meets precision.

One significant takeaway was grasping the potency of Figma as a design tool within the realm of software development. It became clear that a well-defined design serves as the foundational blueprint for seamless execution.

Ultimately, the Mahogany Music app, despite its fictional nature, was a personal growth journey. It underscored the immense value of collaboration, taught me the nuances of design refinement, and emphasized the pivotal role of meticulous design in the successful delivery of a project.