Habro Music

Thinking in connecting stores and users, Habro Music Brazil launches a new online catalog with an exclusive space dedicated to retailers. Here are some elements of the product.

Understanding the Problem

In order to solve the problem, you need to understand the problem. Get to the facts. What data are you working with? What platforms will you be deploying to? Are there any special dependencies, such as ‘user must be logged in’ etc?

What are the deadlines? If the deadline is short, is there anyone you could ask to help out? Do you need to collaborate with other departments, and if so, how can they support you?

What are the goals and expectations of this project or feature? What would success look like? This sort of information will guide you through the design process and help you propose a solution that will suit everyone.

The Challenge

Provide an information architecture for easy management, with functional updates, using all screen resolutions, insertion of new brands and the possibility of customization of the visual identity for each one. Find a way for a better ‘user flow’ experience to reach its goals and a store locator showing information of available products for sale.

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 the different stage of the journey, creating design solutions that are appropriate for each of them.

Sketching Ideas

Basically, I always start with a few scribbles sketches on paper to create the initial concept of the structure. This makes it easier to engage the vision and ideas that are discussed with the client during the discovery meeting. Undoubtedly, this is an inevitable process and it is the way I find easy to get the creative process flowing.

Wireframing

After the brainstorming and sketching phase, I start creating wireframes. Most of the time they are navigable. It’s the best way to understand the product and to visualise how it will function.

Visual Design

When the wireframes and prototypes are validated, the early design work and user interfaces go into development. At this stage the product start to take form.

Responsive Design

The whole project is analised to see how it will work on different screen resolutions. This is always on top of my list.

The Product

The delivery and presentation of the start page for the ‘user flow’.

Responsive Design

Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with.

In addition it’s important to understand that Responsive Web Design tasks include offering the same support to a variety of devices for a single website.

See below for all deliverables for the mobile version

Strategic planning and results

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