View Live Project

Groove Music Taste Profile

Collect user signals to create personalized music recommendations mapping to user’s tastes, ultimately driving retention and engagement.

See Live Project
Release
2014
Role
Product Designer
Responsabilities
UX Design
UI Design
Prototyping
User Testing
Challenge

Project overview

Video

Watch the video

Gallery

Some sreenshots

No items found.
Challenge

Project overview

In 2014 Xbox Music was rebranded Groove Music. We joined the Release Studio team under the direction of Claudio Guglieri to focus our attention on the Groove apps. One of my first challenges was to improve the first-run experience to delight users and ultimately improve retention.

  1. Increase Microsoft Groove usage
  2. Improve retention by providing personalized content that’s always fresh
  3. Improve App rating
Problems

Three main problems

01

Many users don't use Groove to stream music

Recurrent file activates users don't see the value of Groove. For them, Groove is just the a player that plays music from their local drive.

02

Building a music collection takes time

New users have to dig in our catalog of songs and playlist to find music they will like and start building a collection.

03

No personalized experience

Recurrent Groove users expect to see fresh music tailored to their taste every time they visit the application.

research

User research

Research helped us identified two main personas. The file activates user and the music streamer. We recruited six participants using the Groove Application to better understand their journey. All participants mentioned they have a valuable collection of music they maintained but also used different kinds of music streaming services. We then ask all participants to use the Groove application to perform two tasks. Open a music file from their local drive and discover new music from our service. For the first task, most participants communicated that they were anxious during the cold start experience when asked to choose a free trial before using the product. For the second task, all participants succeeded in discovering new music. Still, most participants said that it was a tedious task.

File activate users

Convert file activate users

We looked at the telemetry and notice that 70% of users who start the app don't stream music. With additional research, we discovered that most of these users are those who usually open media files directly from folders instead of using corresponding apps. A lot of these users are not adopting Groove to manage their music and keep launching it through a file activate (aka. Recurrent file activate users). How can we slowly transition these users in using Groove to organize their local collection and ultimately upsell them to the premium experience?

File activate

music folder

User goes to his local music folder to play a song from his favorite artist

File activate

Now playing screen

Groove opens on the Now Playing screen. Thanks to the Groove Scrapper, the song is identified, and all the relevant metadata are displayed. In parallel, we automatically provide a list of similar songs so the user can continue exploring new music on the service. Lastly, we automatically scan the local folder and add the two songs to his Groove collection.

File activate

Album page

Switching to the album page, the user will now see songs from his collection organized by albums. Clicking on an album will show the album page with the artist's discography and similar artists.

File activate

Artists Library

Inside the Library the user will see a prompt asking to point Groove to his main music folder.

File activate

Adding local music

In a few second the user was able to bring all his local music inside Groove. Groove was able to recognize and organize all his music.

cold start experience

Personalized onboarding

With the flow for the file activates user optimized, I then focused on the second persona the music streamer. To reduce churn, I decide to focus on the cold-start experience to improve the music personalization. The main goal is to gather signals from the user with a fun and delighting experience to provide personalized recommendations later on in the service. I've created several prototypes on Mobile and PC and tested them with 8 participants found in the office but not working the product. The results were enlightening and helped us frame the direction of the taste profile. Below are some key insights from the participants.

“I saw a similar experience on Netflix. Here I'm giving you inputs for music recommendations, can wait to see the results”
Carolina
  —  Netflix user
“Hearing a sample for these artists is really cool. I listen to a lot of music but I always forget the names."
JOSEPH
  —  Listen to music everyday
“I prefer when I see the artist image instead of just the names, I'm a visual person, it helps a lot”
sandra
  —  Casual music listener
“I would love to get back to this experience once in a while to edit my profile”
david
  —  Music creator
user flow

Understand the user path

To get a clear overview of the end to end experience, and make sure that I don't miss a use case, I've lay down the different user path from launching Groove to viewing the result of the taste profile on the recommended page.

Taste Profile

Concept 1

I started this concept on mobile. The swipe interaction started by Tinder was a good fit for this experience. The user will start with some music Genres, and based on his selection we would ask him to pick five artists.

Taste Profile

Concept 2

Like the fist concept the user has to pick some genres first and then a few artists. The interaction here is simpler and less linear. The user decides how many inputs he'd like to give. The main down side of this experience was the lack of music samples on the artist selection.

Taste Profile

Concept 3

The third concept is similar to the second one but with a different visual treatment. The participant did like the possibility to search but prefers to see artists' images.

Taste Profile

Concept 4

With this concept I wanted to explore the concept of a vertical scroll timeline. Based on the user selection the timeline would refine and propose more accurate recommendations.

Taste Profile

Concept 5

For the last concept I wanted to explore a different interaction to discover related artists.

Taste Profile

Final experience

We ended up choosing the Timeline experience and refined the interaction to make it easy to understand and accessible on Mobile and Console.

recommended

Recommended music everyday

I then created a new page that showcased only personalized content based on the taste profile and user streaming favorites. The top of the page features two or three playlists depending on several conditions. The first one updates once a week, every Friday, when new releases are available. The second refresh daily with recommended music. Lastly, the third one is based on the time of the day and the user activity (commute, work, dinner...).

Challenge

Project overview

Browsers have been around since the early days of the internet. Innovation over the years has emphasized speed, compatibility and safety. But what people do on the web is so much more than just browse.

Our goal was to expand the type of content you can read within your browser and make it accessible to all users. We wanted users to have the best reading experience, allowing them to interact with the book in the same way they might do with a physical book but with more opportunities to enhance their understanding and engagement, with learning tools, notes, highlights, doodles or Cortana. I led a team of 5 designers to design the Windows Books Apps on five platforms (Windows 10, Xbox, Windows Phone 10, iOS and Android mobile and tablet). I've defined the scope and product vision, doing wireframes, user flows, visuals, prototypes, user tests, motions, redlines and supervised the quality of the development until releasing to production. We worked closely with three scrum teams in Paris and two design teams based in Redmond (GMT-7) and Hyderabad (GMT+5:30) working on other parts of EDGE.

Responsabilities

My Role

I was the design lead for Books in Edge defining the user experience and visual direction on Windows 10, WP10, iOS and Android mobile and tablet. I was leading a small team of two junior designers and worked closely with three scrum teams in Paris and two design teams based in Redmond (GMT-7) and Hyderabad (GMT+5:30) working on other parts of EDGE. I've defined the scope and product vision, doing wireframes, user flows, visuals, prototypes, user tests, motions, redlines and supervised the quality of the development until releasing to production.

Methodology

Design process

We did a comprehensive competitive analysis and ran several user studies with a diverse panel of readers. The goal was for us to have a good understanding of the market and ensure our product brings unique values to our users. Once the project planning was ready, I've built and costed a prioritized design backlog to keep track of our progress and ensure we deliver designs on time. With two junior designers in the team, I decided to create a design process to follow to ensure they have a good understanding of the problem before jumping too quickly on solutions while still giving them some room for autonomy. It consisted of a OneNote page that the designer would fill with, a problem definition, success metrics, list of job stories, competitive analysis, user flows and lastly links to prototypes and visuals.

Emphatize

Understand the experience, situation, and emotion of our target users.

User Interviews
Personas
Define

Synthesise the findings to have a clear understanding of the problems and pain points.

Problem definition
Pain points
Ideate

Explore a wide variety of ideas to solve solutions to a problem.

Competitive analysis
Brainstorm solutions
Sketches
wireframes
Prototype

A simple, cheap and fast way to shape ideas to test them.

Invision
Principle
Test

Ask for feedback on your prototypes and iterate on the ideal solution.

Guerilla testing
User testing
Research

User interviews

Research showed that users under age 30 are more likely to read their e-books on a phone or computer than on an e-reader or tablet. Additionally, the tablet is the preferred device for long-form reading, but the phone is often used when the tablet is left at home.

Users favored the computer for scenarios where they needed to learn, take notes, highlight content. Users plebiscite e-books over printed books when they are searching for a new book to read quickly. Lastly, e-books are easier to take with you when traveling or commuting and can enhance the reading experience with accessible content and rich media.

I enjoy being able to read any of my books wherever I am. I always have my phone on me, therefore my books come with me.

Factors discouraging e-book usage

Prefer reading printed books
27%
Looking at a screen for too long
24%
Like owning a printed book
23%
Don’t like reading from screen
22%
Cost of device to read ebooks
22%
Less suitable as gifts
17%
Print book are easier to read anywhere
15%
Not easy to lend or borrow
14%
Don’t know enough about ebooks
11%
Less suitable for children
9%

Factors encouraging e-book usage

Space compare to printed books
23%
Cheaper than printed books
21%
Easier to carry
21%
Easy to download
19%
Can download sample for free
17%
Better for environment
15%
Wide range of title available
11%
Can adjust font and book theme
11%
Can search in book
9%
Extra content such as audio and video
7%
Typically I start on the iPad and then if I am really into it, I will switch to my phone since I don't have my tablet on me all the time.
Research

Three main problems

01

Reading experiences not available everywhere

A lot of users mentioned that they tried to read digital books but that their experience was limited to one platform

02

Users don't get the value of reading digital books

Many users are hesitant to read digital books as they don't see what are the benefits compared to reading a physical book.

03

Users expect to use digital books like physical books

Some users expect to use a digital book similarly to a physical book (bookmarking, taking notes, highlighting paragraphs...)

Library

One place to manage my Books

Edge is the central place to manage content that you need to read, or already read, regardless of the content type and source. The books library let you manage your books purchased on the Microsoft Store. Your reading content and progress remain in sync across all your devices. Whether you're online or offline, your books stay with you. New users with no books can easily get popular samples directly from the library and start reading their first book in Edge.

Library

One place to manage my Books

Edge is the central place to manage content that you need to read, or already read, regardless of the content type and source. The books library let you manage your books purchased on the Microsoft Store. Your reading content and progress remain in sync across all your devices. Whether you're online or offline, your books stay with you. New users with no books can easily get popular samples directly from the library and start reading their first book in Edge.

Reader

Beautiful, engaging and easy to read

Reading a digital book should be fluid and enjoyable. The content beautifully reflows and adapts to my device sizes and reading preferences. Unlike a physical book, the reader provides interactive tools to get the most of your reading experience.

Reader

Customized for you

Most of the users don’t know how Verdana compares to Georgia or Segoe UI. We came up with some simple titles that best describe the font and make the selection easier and more friendly.

Reader

Reading simplified

Books in Edge makes the navigation in a book easy and intuitive. Readers have a very easy way to find exactly what they are looking for using the table of contents. It allows them to jump through chapters, read summaries in some cases, and more.

Reader

Reading designed for Learning​

Use digital ink and annotations to jot down your questions, thoughts and ideas directly on your Books and use Cortana to get answers about content without ever leaving the page you are on​. You can add highlights in four colors, underline, add comments or copy text.

Reader

Read out loud

Hear text read out loud. Just right-click (or press and hold) anywhere on the page and select Read aloud. Read aloud will begin automatically reading at the word you selected.

Reader

Grammar tools

Grammar tools can assist in reading comprehension by breaking words into syllables and highlighting nouns, verbs, and adjectives.

Reader

Reading themes

The user can customize his reading preferences and change font size, screen’s luminosity, select font that best suits his reading habits (news, typewriter, serif, non serif…) and most important of all, change the reading theme.

Design excellence

Design system

With new designers joining the team, the growing number or features, and platform to support. It became clear to me that I needed to invest time in building a robust design system to ease the work of the team and ensure a consistent product.

DEsign system

Materials & Shadows

DEsign system

components

DEsign system

Books cover states

DEsign system

Books cover

Read Our Story

Learn more about our creative team
View All Works

Contact Us

Let’s create something great together