UX Designer projects
Front-end Developer projects
Demian Luna

Role: User researcher, Interaction Designer, Front-end Developer


Demian Luna is a contemporary music composer with a great activity in Europe.


Client: Demian Luna – Composer

Job Description: Heuristic Analysis, Information architecture, Prototiping, User Testing, Front-end Developer

Duration: September 2015 / December 2015


UX Designer tools:

Research, Surveys, Pencil, Paper, Axure, inVision, Sketch, Validately

Front-end developer tools:

Bootstrap, Css/3, Html/5, Wordpress, Php, jQuery, Wordpress plugins, Less, Sublime text
captura de imagen Demian Luna


Customer needs

The client raised the need for users to get to know his compositions, easily and without obstacles and to clearly assess the agenda of events.

One of the main objectives was that the user could contact the musician in the simplest way, to facilitate the user’s access to the musician.

The platform must have a multimedia section where videos and photographs coexist.

Having a great activity, the musician raised the need to manage the content of the platform intuitively.

User needs

After interviews with users who responded to customer surveys and opinions, one of the objectives was the need to access the multimedia content without problems.

The user should easily check the activity of the musician and the alerts of the events should be displayed clearly.

The platform has more than one way to contact the musician.


The musician raised the need to create a platform mainly where his compositions and the publication of his works are known.

On the other hand, another of the main objectives of the client was to inform the user of the activity of the musician, with current and future events.

The image that the musician wanted to show was that of a fresh and minimalist atmosphere.

The solution


The analysis of the research began by studying the context of potential users, from there 2 profiles were generated, classical music composers both teachers and students and users with affinity to contemporary music.

My search began mainly in music schools where I met teachers with whom I had a great chat, the comments provided by the user were enough to give form to part of one of the profiles.

With the help that the musician gave me, I was able to gather information related to the user with affinity with this musical style. He gave me access to his students and friends of students who find in this musical style a daily company.

In this way, we configure the target user and redesign the user’s objectives defined in the beginning.

Finally, with all the information, we were able to create people that would help define the functionality of the site.

The criteria when defining people were the following:

  • Persona project definition.
  • That reflect the patterns observed in the research.
  • Focus on the current state, not the future.
  • Realistic.
  • That describe a design goal.
  • That help us understand the needs of users.
  • Understand the context in which they move when they use the platform.
  • Their behaviors, attitudes and motivations.

Persona 1

captura de imagen Demian Luna

Persona 2

captura de imagen Demian Luna

Card sorting

Next, a benchmarking study was carried out to extract the virtues and defects of the competition.

Through card sorting we define the navigation of the platform. We opted for closed card sorting.

Content architecture

A conceptual map was created to define the information architecture.

captura de imagen Demian Luna


After analyzing the information and defining the guidelines to follow to work on the design, sketches were done based on the ideas that emerged from the design thinking process. Next I included the definition of the architecture and the distribution of the content ordered by hierarchy.

captura de imagen Demian Luna
captura de imagen Demian Luna
captura de imagen Demian Luna
captura de imagen Demian Luna


After iterating in sketches, we worked on the idea of ​​receiving the user in a minimalist environment and with the essence of the composer at first sight.

When the user scrolls the accesses to the main sections appear in card format.

The structure was created on a responsive layout with 3 breakpoints, 1280px, 786px, 420px. A fixed header was defined with the drop-down menu complying with the client’s need to hierarchize the components, this led us to create an icon with the hamburger type fixed menu so that the user did not lose access at any time.

captura de imagen Demian Luna
captura de imagen Demian Luna
captura de imagen Demian Luna
captura de imagen Demian Luna


The final step, after the analysis, the definition of the profiles, the ideas and the architecture the interface is implemented with a minimalist style. The result was positive in the users.

It was mainly carried out soft colors, such as white for background of the content, or soft grays for the source, which offered a comfortable reading and no saturations. To emphasize calls to action, such as links and for the background of the main navigation. saturated colors were used.

The combination of dark red with white offered a relationship of minimalism and seriousness, necessary to mix the image that the client wanted to impose, and that would directly relate to a fresh environment.

captura de imagen Demian Luna captura de imagen Demian Luna captura de imagen Demian Luna captura de imagen Demian Luna

© 2017 Copyright Pablo Goris