Music Service

Music Service

A responsive site to allow residential customers manage a two-year long service to enjoy free music on their devices.


Manage a service with ease

We designed a manageable website to help all types of users to activate, administer, and cancel a long-term promotion offered by the company and its partner, as well as to manage the service itself.

The promotion allowed all the company’s customers to enjoy free streamed music on all of their devices for a maximum of 2 years, as a fidelity reward for being loyal customers. 

Project File


  • Kick-off
  • Problem mapping
  • Interviews
  • Desktop research
  • In-depth Interviews
  • Focus groups
  • Insight cards
  • Affinity diagram
  • Scenarios
  • Personas
  • Blueprint
  • Ideation workshops
  • Decision matrix
  • Sitemap
  • Flow diagram
  • Use cases
  • Sketching
  • Wireframes
  • Low-fi prototypes
  • Online A/B tests
  • Micro-usability tests
  • Remote user tests with beta testers


  • 2 UX Designers
  • 1 UI Designer


3 months




1. Framing the problem

Original problem:

For technical reasons -due to the partnership- the processes of activating the promotion and linking the company user’s login with the partner user’s account had to be performed outside the company’s official online channels.

Big-picture problem:

The company wanted the user to self-managed the service so, why not let the user perform all the actions related to the service in the same space?

Main challenge:

To deliver a smooth and seamless user experience, sidestepping all incompatibilities between the company’s and the partner’s systems.

2. User needs

What did users need?

  • To discover the service
  • To understand the details and conditions of the promotion
  • To activate the service
  • To cancel the service
  • To withdraw the promotion
  • To reactivate the service after a cancelation or a withdrawal
  • To learn about the service and resolve doubts
  • To change package
  • To link their account
  • ...

“So, how much it's going to cost me when the promo is done?”



We developed 2 personas to design for and several problem, activity, information, and task scenarios that helped us synthesize all the user insights we extracted from the exploration phase, in which, among other methods, we used interviews with users and colleagues, as well as with some partner’s employees to shape the project. 

Contribution: I am accountable for conducting most of the interviews. My proposal for using an interview grid made much easier the comparison of answers for the later analysis and synthesis.

3. Use cases

One of the most interesting exercises of the first stages of the project was to define all possible use cases, thinking ahead and taking into consideration all of the “what-ifs" of the promotion and the service.

As seen in the diagram above, we ended up defining 9 main use cases that would follow sometimes slightly different processes, sometimes completely different ones.

Use cases

4. Defining the flow

So the next exercise, key to the project, was to define the flow for each use case. Each use case was going to see different messages, screens and was going to have access to different actions within the website. This meant that there were simple flows with a few screens, like in the case of users that accessed the website after having canceled the promotion, and more complex processes, like in the case of users that logged in having delayed the payment of the promotion for different reasons.

Canceled promo
Delayed payment

5. Giving Structure

The first online service of many to come.

So we progressed designing structure and patterns as flexible as possible. First of all, to be able to adapt them to future changes on the terms and conditions of the music promo. Second of all, to be prepared to provide the same or similar functionalities for other online services. We forecasted that this partnership was the first of many to come.

Of course, we started with the wireframes of the mobile version. When we finished the wireframes of the desktop version we realized that there were so many subtle differences in between use cases that we needed to properly check each flow. For this, we visually represented the screens of each use case in flow, as seen in the examples below.

Achievement: We weren’t wrong: 5 new online services came along, in partnership with other firms. And we saved a lot of time and resources just adapting the structure and flow to them.

Canceled promo
Delayed payment

Contribution: A fascinating and intense exercise that I am accountable for was the information design with responsive copy, resulting in a lighter mobile version and a more extended desktop one.

6. Building the website

The part of the website that we iterated the most was the homepage, in terms of UX and UI. With online A/B tests in a pilot phase we tested and took decisions about different aspects of the artifact.

We had doubts about the activation Wizard, wether to take it to a pop-up box or embed it in the home itself. We ended up opting for the later.

We weren’t sure what relevance give to the Help butón (“Ayuda”) and at the end it turned to be quite important to make it visible and accesible.

Final result

The website was developed and published, has been updated and adapted to three changes on the conditions of the promotion, and has served hundreds of thousands of users since then. And yes, it’s still on the air (with a few branding changes in the commercial content).

Achievement: We were able to surprise the company with low records of complaints and calls to the call center asking for help, comparing it to previous services.



A site with a balance between the comercial and the functional. This project stands out for the struggle for balance between commercial objectives and UX principles. We managed not only to find a middle point between the comercial content and the functional one, but to divide these into separate areas so that they wouldn’t interfere with each other. 


False Step: We lost the battle of placing an access to the cancelation process in a visible and accessible place. For marketing reasons, we were forced to “hide it” inside the FAQ’s. So we decided, at least, to design it in the most informed and simple way possible. 

Cancelation Process


A site with a clear user experience: a plain navigation, dosed available options and dosed information in every point of the process, and a truly tailored experience for each use case. A good example of this is the step by step activation wizard.

Activation Process

Contribution: I am responsible for the information design and non-commercial copy of the website, from which all the FAQ’s from the Help screens, was the biggest challenge in terms of economy of language.

Help Screen


A responsive website with a desktop version and a mobile version -with even responsive copy- to adapt to the users momentum and device.