UX/UI DESIGN • WEB DEVELOPMENT

“Music is the sound of life, celebrating itself.”

– John Ortiz

THE STORY

Emmy Award Winning composer, Gary Malkin, has been scoring for television and film for the past 40+ years, compiling a vast library of music that he was seeking to find a way to get out to a wider audience. In particular, he had been working on a project called Wisdom of the World Wellness with co-founder and author, Clint Rogers Ph.D, which would showcase his music, sometimes combined with professionally filmed video and the spoken word of a wide variety of thought leaders in the human development movement including Deepak Chopra, Ram Dass, Marianne Williamson and Thich-Nhat Hanh to name but a few.

Gary and Clint approached me to create the website, which was also to be a vehicle to acknowledge others who are contributors to the project, for both Gary and Clint to share their individual presentations, for Gary to offer his music production and composing services, and to include a store with Gary’s extensive discography, in particular his signature product, Graceful Passages: A Companion for Living and Dying, a critically acclaimed award-winning album.

TOOLS

  • Figma
  • Photoshop
  • Illustrator
  • InVision
  • WordPress
  • Divi

UX

  • Competitive Analysis
  • User Research
  • Personas
  • Information Architecture
  • Wireframes & Prototype
  • Usability Testing

UI

  • Branding
  • Wireframes
  • Logo & Icons
  • Palette & Typography
  • Front-end Development

COMPETITIVE ANALYSIS

The amount of music available online (much of it for free) is staggering. From major paid services and applications like Spotify, iTunes and Pandora to YouTube and the many personal websites of music artists globally, the amount of competition is significant.  In conducting my research, I zeroed in on websites and mobile apps offering music similar to Gary’s to see what we might learn from their success. 

PROS:

  • Tons of content including entire channels, live streams and playlists
  • Popular and familiar interface
  • Completely FREE
  • Video can be static or live action

CONS:

  • Ads
  • No downloads
  • Not always easy to find what you want

 

 PROS:

  • Nice interface
  • Large community
  • The timer itself along with a number of other specialized tools
  • Easy to use and to find quality content
  • Free version offers a lot with the option to do even more with a Members Plus plan (like courses, an advanced player and offline listening)

CONS:

  • No video content
  • Have to pay for advanced features

 

LESSONS

While music and guided meditations online are ubiquitous, something I’ve learned as a musician (of 30 years) myself is that the hope for individual artists lies where it always has, in building their fanbase. To do this, part of my consultation for Gary was that distribution is critical, and that, in addition to leveraging his mailing list, he should also have his music available on websites like YouTube, Spotify, iTunes, and Pandora. Other solutions generated were the idea of adding membership subscriptions, a live stream of his material, and even the possibility of creating a mobile app. 

USER RESEARCH & PROTO-PERSONA

After the competitive analysis, I conducted 2 rounds of user research, one quantitative, the other qualitative. The first was a short survey given to 20 users to get a sense of who the audience was and what they wanted. The second round was personal interviews, where I was able to go a little deeper with each user. Aggregating my findings, I created a user persona.

MEET GRACE

DEMOGRAPHICS

  • AGE: 63
  • Lives in Marin, CA 
  • Trauma therapist 
  • Her mother has a terminal illness

BEHAVIORS

  • Has been into new age philosophy, yoga and meditation since her early twenties
  • Regularly uses YouTube and InsightTimer for guided meditations
  • Likes to sing Kirtan
  • Has a spiritual approach to trauma therapy

NEEDS & GOALS

  • Always looking for new guided meditations and meditation music
  • Craves peace and quiet – wants to retire by 65 and move to the tropics
  • Needs ways to provide comfort to her ailing mother and wants to find meditations and music to ease her passing

INFORMATION ARCHITECTURE

Now equipped with a proto-persona and a better sense of what kind of users we are targeting, I started to dive into user flows and the information architecture. Using Figma, I focused on creating flows that would make it easy for users to sample and purchase our products, opt in to our mailing list and stay engaged. 

USER FLOWS AND SITEMAP

WIREFRAMES

With a clear understanding of the user flows, I set to work on my first wireframes, again using Figma. I created a unique homepage and a standard inside page format to follow throughout the website, then created specific templates for blog posts, product pages and the WisdomCard page.

USABILITY TESTING

With the approval of the wireframes, which I had been developing simultaneously with the brand and UI, I began putting together the website using WordPress and the Divi theme. Based on my mockups, I established the templates within the site  and applied them to the sitemap. I conducted usability tests with 5 users and recorded the results, making a few improvements. 

branding

When we first began the project, Wisdom of the World already had a logo, though not quite a brand. As I began to work with their logo, I was becoming very frustrated. I wasn’t happy with it’s look or layout, and so I persuaded Gary to let me take a swing at it. Below shows the before and after results. I liked the multi-colored concept the original logo was taking, but it’s vertical layout was wonky and difficult to integrate in an appealing way. To speak to the spiritual and global nature of the project and make use of the multi-color concept, I utilized some sacred geometry to create a more recognizable and practical icon. I went with a horizontal approach to improve the layout, and I tried a sans-serif font (Josefin Sans) to create a more modern and fresh look. Some options with gold added a bit of pizzazz. The client was ecstatic with the changes.

LOGOS & ICONOGRAPHY

BEFORE

AFTER

ALTERNATE OPTIONS

PALETTE & TYPOGRAPHY

With the palette, I was seeking to have a complementary selection of warm and cool colors, all “earthy” and pleasing to the eye. I used the same font as the logo for the navigation font for consistency and another sans-serif (Lato) for clean body text, opting for large font sizes to improve legibility (especially considering the age bracket of my users). 

PROTOTYPE

Using the previously created wireframes from Figma, I laid out a working prototype of the site in WordPress using the Divi theme. I created page templates for all of the main pages, posts and post types and applied the approved UI design styles. 

Click on image to view full screenshot

CONCLUSION

Working with Gary was a great experience, and he was very happy with the results (see his testimonial below). The website launched in sync with the premiere of the much awaited documentary, Thrive 2, which Gary finished composing the score for during the development of the site. 

After debuting the site, Gary has received many compliments on the site’s design and seen a spike in the sale of his products and in subscribers to his list. 

This was a perfect site for me to practice my UX skills with, and Gary was thrilled with the thorough approach to the design process. The user research and testing was actually quite fun and enlightening. 

 

“When you’re introducing your life’s work to the world, you want to ensure that it’s created by a master like David Shakiban. Whether for website design, logo creation, optimal user experience, or branding, David’s a first-rate professional who delivers the kind of look, feel and functionality that will last for years. Creative, easy to work with, and focused on results that matter, I can’t recommend David highly enough. David’s the real deal.”

Gary Malkin, Emmy award-winning composer and
Co-Founder of Wisdom of the World Wellness