Re-Imagining the biggest and more influential music outlet in Mexico

indierocks web design home

IndieRocks! needed to connect with the younger alternative Mexican audience.

In the research, one of the results was that to attract that audience, the website had to look attractive, modern, and be super easy to navigate.

indierocks web design initial
indierocks wireframes

To improve the user experience on the site, we analyzed all the existing content and categorized it using different taxonomies.

Based on the goals and analytics IndieRocks! had, we designed different sections and organized the components for each page.

indierocks design organisms

Thinking about the design of the components as a unit instead of as part of a section or page allowed me to create independent organisms that we could re-use on different segments of the site. And at the same time, it kept the site consistent since it followed a predictable pattern.

For this project, I handled the dev team code examples of all the components, in HTML and SCSS, along with rules for visual attributes and clear naming conventions for each component and its variations.

Web Design for Indie Rocks! Mexico

Even when the site has a lot of attractive sections like music reviews, interviews, concerts, and columns, the most visited section is and was the Agenda.

As you can imagine, the amount of events in Mexico City is massive, and the IndieRocks! team wanted to present the events graphically.

We solved this by breaking the event list by month, then by day, and finally, we organized everything to look like a calendar featuring the information for each event.

indierocks web design

When we were testing the Agenda, I knew we had to improve the visitor experience, so we worked on making the navigation simple and also, on giving the visitor a way to find and filter the events.

To achieve this, we included a simple search bar with three options, a month selector, a city selector, and an input area to write down the artist. Apart from that, we included two arrows that allow the visitor to go to the next and previous month.

indierocks web design

Even with an exciting project like this, there is a lot of friction with clients. But, as designers and developers, our work is to find the best solutions for every project.

The design of the IndieRocks! website, definitively took the magazine to a new level of professionalism, allowing the brand to successfully move to the digital space by increasing the site's visits and revenue, eventually replacing the monthly print magazine.

mobile design indierocks

Team Luis Morenoweb designer, Ignacio M.lead developer, Juan Gradilladeveloper, Armando Espinozacopywriter

Wanna say hi?

mail: luis[at]chicharitomagnetico[dot]com

text: +52 322 158 2754