UX/UI DESIGN • WEB DEVELOPMENT
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.
- Tons of content including entire channels, live streams and playlists
- Popular and familiar interface
- Completely FREE
- Video can be static or live action
- No downloads
- Not always easy to find what you want
- 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)
- No video content
- Have to pay for advanced features
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.
- AGE: 63
- Lives in Marin, CA
- Trauma therapist
- Her mother has a terminal illness
- 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
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.
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.
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
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).
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.
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