Royal Music Latin America

In 2015, distributors of music equipment in Brazil has been transformed. – Introducing the Royal Music Latin America, a new product catalog. This is the story of how I made a positive difference to a company of a segmented market.

To comply with my confidentiality agreement I omitted confidential information. This project is a re-interpretation of the original.

Starting with the Interfaces Design

I’ll introduce all the main deliverables of the process of User Interface Design that I’ve done for this company. If you feel interested to know more, there at the final bottom of this page has a link for you to read all the UX process.

What I Did

Research
90%
Wireframe
100%
User Interface
100%
Development
20%
Branding Design
80%
Cross-Platform UX Strategy
80%
Planning
100%

Plan

Strategy
80%
Interfaces
90%
Plan
60%
Place
15%

Sketches

I scribbled a new interface using pen and paper. Sketches can be very useful to quickly validate product concepts and design ideas with other team members and users. Usually I love make a sketch before to start designing the wireframes.

scketch-01scketch-02

Wireframes

This is the part I like most to do a visual guide that represents the page structure as well as its hierarchy and the main elements that compose it. Useful for discussing ideas with the team and with the customer, and also to inform the work of the Art Directors (in the case of this work was done by myself).

telas-wireframe-01

Prototypes

The InVision as it always does his homework. Lately I’ve been working more with prototypes which have greatly facilitated the life. A prototype is a simulation of navigation and functionality of a site, normally comprise clickable wireframes and layouts. It’s a quick way to validate and test a product before you develop it from start to finish.

InVision

Desktop Interfaces

Here I’ll show you what were the main deliverables in all versions of devices such as: Desktop, Tablet and Mobile. They are a true representation of all project.

Final deliverables

We wanted all within the same standard layout grids, wanted the main website and the websites of the brands within the same structure and can align everything in a practical way for when the user was browsing in any one of the brands they know what was on the same website , different from what we did in the past creating a website for each different brand.

DESKTOP-HOME-840


Usability in navigation

Two important factors were high regard navigation brands. We had 15 different brands the need to provide easy access to the user and the merchant. We decided to put all brands in a single drop-down menu and with just one click, the user can access fast way the required Brand.

menu-royal

Brands Identity

We care to provide the colours and images related to the visual identity of each brand. Here you can see some screens focused on the same structure and with different colours

Usability on the scroll

To create a comfortable navigation, we use Parallax effects on almost every website. To make the usability of the website even better, we play with the scroll of the website. When the user uses the scroll bar, it does not lose the brand and the website menu.

Untitled

Mobile Version

As all good and actual project, web site without version for mobile, tablet can not. Every time we plan to be a responsive website and work properly on any screen size. The task was not easy as we needed to provide a visual identity for each brand.

Brands Mobile Version

I worried available in all versions of the websites of the brands in the mobile version for the user to browse the catalog of products where and any place he had. Here follows some screens:

Tablet Version

All versions of the websites of the brands in the tablet version were required for a complete navigation in the product catalog. Here is some screens:

Find out more about all UX/UI Design Process

see full PROCESS

Next work