All my UX Process about Royal Music
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.
The Customer
Founded in 1994 and with representatives in all states of the country, ROYAL MUSIC presents the musical instruments market as a leading importer, a pioneer in promoting access to musicians and the best equipment in the world audio professionals.
From the 20 brands that the importing Royal Music has, at least half refers those that are most desired by musicians and competitors. It’s not just gather under one roof expressions like Gibson, Paiste, Zoom, Music Man, Orange, Ernie Ball. Stars of the musical instruments market in the world, the challenge in Brazil is to work with high tax burdens competing with a multitude of products with similar design and lower quality. Read more
Testimonials
Paulo Faysano – Marketing Manager at Royal Music
improvements ★★★★★
Marcelo was always there, was always punctual in everything we asked for. Recently remade once again our website, adapting it to mobile format and other screen formats. Speed, great layout suggestions, always in tune with the market trend and excellent money Marcelo make a great partner, someone I recommend to any company that wants a website and quality services.
My Role
I was part of the field team and responsible for strategy and experience design a new website and lead the UX work, producing all major deliverables and provide customer, between May and July 2015. I worked alongside a Senior Front-End Developer and Senior IA, to the set with me.
The challenge
Build a website in 45 days 🙂
Our client approaches us with two main objectives – to increase the functionality of its catalog of online products and usability apart from its competitors; to promote an active life in the music community in Brazil – Customer x stores. Our major challenge was the short delivery website in just 45 days.
We work with two main objectives:
- Increase the functionality of the online product catalog promoting clear access using mobile and tablet.
- Promote greater usability apart from its competitors, encouraging the active life in the music community in Brazil, strengthening the ties between client x stores.
To coincide with a possible expansion of the scheme, our team was under extreme pressure to move quickly. We have the task of delivering a responsive website prototype HiFi in different kind of devices and the principal, connect tenants x business x users. The perfect combination to entertain users to buy products through to customer. Drafts and usability testing meant that I needed to get the right experience in the first four weeks.
The prototype responsive website High fidelity in different types of devices that connect retailers x company x users to provide the best experience to users of the site with the perfect combination to entertain users and assist in the selection order to purchase the products. This design was made in a short time but with all the steps well planned with drafts and usability testing that ensured direct experience in the first four weeks of the project.
I created a schedule on google docs with all the steps to share with other team employees:
Process Overview
Keep the distribution of imported products in a time of economic and governmental crisis in Brazil. A competitive market in a country which the government charges high tax rates and which is seen in the world by corruption, would not be an easy task.
The main objective of the project is to connect the end user to the shopkeeper, and the Royal Music had many hits to your virtual catalog. In our new design capture leads through contacts on the website was what we needed to start research processes to promote better usability and navigation for users.
We proposed a simple process for this project
Strategy definition
We created methods that would be used in the initial stage of the project, when the strategy was being set and the team was concerned to direct the product to one side or the other. Unlike the more famous cases, such as wireframes and sitemaps, the concern here would be to document how the interface would work, but more abstract to base decisions on the “reason for being” of the product in this project
Blueprint
I used an application called FullStory for a more complete analysis of a map showing all points of contact between consumer and brand, as well as the internal procedures necessary for this interaction to happen. It was useful for viewing the way that consumers run across multiple channels (site, customer service, physical store etc.) and to identify opportunities for improvement.
Consumer Journey Map
With this diagram we explore the multiple (and sometimes invisible) steps taken by the consumer to the extent that they engage with the product. It allows designers to define the motivations and consumer needs at different stage of the journey, creating design solutions that are appropriate for each of them.
Metrics Analysis
Analysis of the numbers provided by some metrics tool that give insights into how users interact with the product: clicks, shipping time, keywords searched etc. The numbers help to uncover valuable insight into consumer behavior, which often can not be captured in a usability test.
User Flow
We create a visual representation of all the steps the user scrolls on the website to complete tasks within the product. With this flow we analyze if the user follows the steps designed to develop a project. Analyze if the user starts from the homepage, then enters in the page of a product, then goes to the shopping cart – and so on. It is the user’s perspective on the organization’s website, which helps identify what steps need to be improved or redesigned.
Ideas Generation
With the generation of ideas, we put in question the methods used during the creative phase of the project. They help collect ideas from all team members and ensure that they are aligned with respect to the new product and its launch.
Brainstorming
The collective process of generating ideas without restrictions, that respond to certain creative briefing. Helping the team to view a wide variety of design solutions before actually deciding on which option they will follow on.
Product planning
At this stage all the studies and analyzes were performed and discussed between the team and the professionals involved. With the product planning we entered in the stage of development of the product concerned.
Content Audit
I’ve always used Google Docs to manage content. With the sharing functionality, we work with the activity of listing all the available content from the old website. The organization of content has been used in various stages of the project, helping to see the entire project, define the content strategy and to ascertain the details of each page.
Task Analysis
This detailed informations and actions are necessary for the user to complete a task. Help designers and developers understand the current system and how information moves within it. It also helps to correctly distribute tasks in the new product being designed.
Sitemap
With the planned content, we set the sitemap, one of the most known UX methods, consists of a diagram of a site’s pages organized hierarchically. With him we visualize the basic structure and navigation between different parts of the system.
Taxonomy
An exploration around the multiple ways of categorizing content and information: as the editors on a news site or the product categories in e-commerce, for example. In this way we help the analysis so that designers define the structure and content of labels that will help the user to move around the site.
Interfaces Design
These are the most common deliverables UI / UX Design: those documenting how particular screen should work. Are great tools to communicate ideas with other members of team and customers all parties involved in the project.
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.
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).
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.
Launch
The most anticipated stage of the project in this period spent 45 days working on many analyzes, studies and alignment of ideas to come up with a product that revolutionized the music market in Brazil in the middle of a crisis. We got with this website the customer objective and transform the doubts of users on a client acquisition in order for retailers. Below I will show some of the results of this work:
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.
UI Pattern Library
With the help of Creative Cloud Libraries this task was easy. A list of practical examples (and sometimes code) of the patterns of interaction that will be used throughout the site. Not only helps to maintain consistent design on different screens, but also organizes and facilitates the progress of the project before developers when implementing the elements.
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.
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.
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:
Impact
With the launch of the new website and e-mail marketing actions in social networks …. We achieved a surplus of more than 12,000 visits in the first two days. This is a significant increase over 1000 before the daily visits with a 23% increase. Analyses show that our proposal and user interaction was positive to our project aimed.
Check out the online project now, visit: www.royalmusic.com.br