We are a digital-first
agency that helps
businesses
advance
to the next
level
.
Back
Development — April 15, 2015

The design process behind Ožujsko website redesign

Profile Image
Marko Cvijetić & Mario Šestak Digital & UX designers

Designing a website for Croatia’s number one beer is the type of project you usually dream about, but when it comes to really making it happen, the process is what makes the difference.

Ožujsko gave us an opportunity to make their message resonate on the mother of all projects, redesigning their new website. One of the main inputs for this website was to delight the younger male population – proud Croats with a passion for sports, music and worshiping friendship above all.

As any project, it was a story of opposites – be innovative to appeal to the younger audience but don’t lose the authenticity of the brand that its older fans know and love, be true to Žuja’s whimsical spirit, but accentuate the significance Žuja puts on the quality of brewing.

According to the client’s goals, we isolated the 3 most important parts we needed to build this website on:

  • habituating brand communication
  • delighting users with the overall experience and thrilling them with special details
  • presenting the quality of the beer through informal storytelling

The (un)usual process

We knew one thing, we wanted to find a way to tell Žuja’s story by combining the creative use of technology, photo & video and user interaction to enable seamless experience no matter the device.

To get this to happen, it was important to include several teams and their specialties, so regarding the number of people included, amount of content and final implementation, we insisted on defining project steps and production strategy. We wouldn’t dive deeper into the project without defining responsibilities and the final expectations. To devise a process, we decided to use a commonly used design methodology and apply it to the entire project.

Although our 3-step process looks like nothing out of the ordinary, the direction of the process and final outcome made everything different.

1. Knowing the brand to the last drop

We researched usability principles, information architecture, design, content of all benchmark sites and explored food and drink industries and beyond.

Getting deep into the topic was essential and fortunately, we had an opportunity to learn about beer and the brewing process from Ožujsko’s professionals through a series of educational sessions. The research phase took quite a bit of time but it wasn’t in vain because it’s what helped us connect the brand with what we wanted to achieve.

2. Defining/Redefining a modern beer lover’s experience

In this phase, we incorporated the cooperation of all departments to get the best possible outcome. We held brainstorming sessions that we divided into 3 sections:

a) (What to tell) Content
Revisiting accumulated materials and structuring it in connected sections to create one fluid story.

b) (How to tell) Creative concept
Developing ideas and defining how to visualise the whole story, present certain sections and keep the genuine Ožujsko feel.

c) (How to execute it) Creative technology & UX
Figuring out technologies we can use to complement particular sections of pages, that will emphasize the content we’re presenting and take our story further. We focused on user interaction, video and motion to enhance user experience

While redefining a modern beer lover’s experience, we were influenced by Ožujsko’s “part of the team” claim and the fact that it’s the only Croatian beer with a fan-given nickname, so we approached the entire website as it was about a living person.

We started with the origin of the name (you would first introduce yourself), took a walk through the beer’s history (getting to know each other phase) and went on to Ožujsko’s nickname (once you become friends with somebody, you often call them by a nickname).

When you’ve befriended somebody, you get to know some interesting facts about this person, things only good friends would know, so we concluded with interesting and little known facts about Žuja.

We carried this through the entire website, introducing Žuja’s hobbies (music, soccer and bowling) and the rest of Ožujsko’s tastes as family members with their own unique characteristics.

3. Production

We began with production in the early stages of the project and started with photo shoots in the Ožujsko production line, as well as the extensive search through museum archives for finding some early age photos of Zagreb and Zagreb brewery. We never planned to focus on history, but a big part of the creative concept was to show some old footage that hasn’t been seen ever before.

Ožujsko beer website cover

Ožujsko beer website cover

The extra time we had because of early production start was used to experiment with video motion and front-end.

The iteration process of motion interaction design between UX, video and frontend department was quite extensive and challenging, but rewarding in the end.

We didn’t work linearly, all teams worked simultaneously and came together to test out how it all works together. With the final art direction, the parts seamlessly fit together and functioned in unison.

After the implementation of front-end and back-end development, we stress-tested the website on every possible device and network that we could get our hands on.

… RESULTS!

User feedback was the most valuable insight and recognition for all the work that we had done on the Ožujsko website redesign. It was definite confirmation that we didn’t make a mistake deciding to change things up a bit in the website production process.

Here are the results one month after the soft launch.

Comparison of analytics of the old vs. redesigned website

 Awards and recognitions

Besides user satisfaction and brand goals, we are proud to be recognized by international communities of web design professionals.

Awards won for the website redesign.

CSS Design Award — Website Of The Day
Awwwards — Honorable Mention
Css light — Website Of The Day

As designers, we have an opportunity to work on lots of different types of projects for various industries. We consider it our responsibility not to limit ourselves within our field but to recognize how to use and apply design thinking depending on the project.

The most valuable lesson we’ve learned here is that it’s not the process that defines the idea, the idea shapes the process.

If the process behind this website redesign made you curious to find out more about our work, take a look at some of our case studies.
For more details about our services, contact us directly.