Habro Music Brazil

Habro Music is an importer and distributor that provides major brands in music equipment. They work directly between Sales and Retail.

The main problem was the online catalogue. They did not have product information and images to share with each other to make deals.

We started with a huge brainstorm with stakeholders and the Digital Team — what would be great, and what would save time for both departments.

In order to solve the problem, first you need to understand the problem.

• What data are we working with?
• What platforms will we be deploying to?
• Are there any special dependencies, such as “user must be logged in”?

• What are the deadlines?
• If the deadline is short, is there anyone we could ask to help out?
• What are the goals and expectations of this project or feature?
• Do we need to collaborate with other departments, and if so, how can they support us?
• What would success look like?
• How does the user get to your product?
• How does your product present itself in the browser?
• How do you keep communication going with your audience?
• What happens when they leave your app/site?

Provide an information architecture for easy management, with functional updates across all screen resolutions, easy creation of new brands, and visual identity customization for each one — plus a better user-flow to reach goals and a store locator with available products for sales.

With this diagram, we explore the multiple (and sometimes invisible) steps taken by the consumer as they engage with the product. It allows designers to define motivations and needs at each stage.

For example, buying a new instrument in the store via the dealer.

The company had most of the visits there — so we integrated catalogue and sales pages into one user flow.

Basically, I always start with a few scribbles on paper to create the initial concept of the structure. This makes it easier to engage the vision and ideas discussed with the client during discovery.

After brainstorming and sketching, I create wireframes — most of the time navigable. It is the best way to understand the product and visualise how it will work.

Menu

We decided to use a side menu on all devices. Because of the many categories and subcategories, this was the ideal solution for this product.

Filters

The filters were an important factor in the catalogue, thinking about the day-to-day of who would use it.

UI Components

A complete library to maintain consistency and standardize use across multiple screens and professionals.

Responsive web design (RWD) allows desktop pages to respond to screen size. The same support across devices for a single website — see below for mobile deliverables.

The pride of having participated in a promising project. Statistics show what we are learning, mistakes and correctness, what the user wants, what works and what had to be improved.