vafr

Going fully responsive

Nadine, Product Owner - Dec 8, 2021

Our store becomes fully responsive, finally! One quick sentence, but in reality, it’s a huge effort over several months for the entire Web Team. All the more so, if they have to manage a redesign at the same time. Doesn't that sound like a mammoth task? It is. But the joint effort is worth it - for us and more importantly for our customers.

No responsiveness, no Google

In addition to the app, we currently operate our online store on two separate platforms: one for the mobile and one for the desktop version of thomann.de. Double the work and the Web Team wanted to change this for some time already. But you know how it is: When things are running smoothly and there's no urgency, other projects have priority.

This was the case until 2020. When Google switched to a pure mobile-first indexing, this has changed. Customers could previously use our full range of features and content in the desktop store only and we didn't want to deprive the Google crawler of all the glory. It was clear to us that the time has come. We are switching. To one platform. Fully responsive. And add a redesign on top as a goodie.

Responsive design

Responsive design

A redesign on the side?

Sounds like unnecessary extra work at first: Our store is becoming fully responsive and is getting a new design at the same time. But to combine the two makes more sense than it seems at first. The fact is that our desktop design is four years old, and our mobile store is twice as old – a relaunch is long overdue. And if we're going to change all the pages, why not do it properly? Ok, let’s go.

A few months have passed since the decision was made and our framework for the new design is in place. The result is a much slimmer, cleaner design, kept in simple black and white - and with a bright purple as the highlight color, it shakes things up. The reasons for our design decisions are straight forward: Our main priority was to offer as much visual guidance and overview as possible to our users.

The fact that purple was chosen as the accent color is also due to its properties. Unlike most other colors, it provides sufficient contrast, is barrier-free and is not associated as a warning color. Only blue has similar properties but we already have that in the logo. We think that's enough blue and look forward to something new.

Same features for all!

Full responsive. Redesign. Very melodic words - but what does it mean for our customers? What are the real benefits of this buzzword bingo?

via GIPHY

Firstly, equal rights on all devices! Until now, only desktop customers had access to some popular features. By standardizing our online store, we are responding to a large amount of customer feedback that evolved around exactly these services, including:

  • The address book at checkout
  • The writing of reviews in the customer center
  • The selection of delivery stations during purchase
  • The customization of our "creative bundles"
  • Our service tools such as the cable finder "CableGuy" or our live testing of effects units "Stompenberg FX"
  • The classified ads area

With making it responsive however, we have gone one step further. We are doing more than "just" replicating what already exists. We have challenged ourselves and checked whether we are living up to our claim towards our customers. Do we really offer the most inspiring shopping experience for musicians online? And if not, what can we do better within the scope of the project?

The answer lies in the redesign: It will make the store, which has grown organically over many years, much more user-friendly. New customers in particular often feel overwhelmed by the range of our products and have difficulty finding their way around the store. That's why we've focused on showing limited content that is relevant to our users on each page. Plus, we have tidied up our menu structure so that it can be used intuitively. SlimFast for the store, so to speak.

An upgrade - also for the Web Team

What feels better for customers doesn't leave us cold either. The team benefits at least as much from the move to one platform - with noticeable improvements in the daily business.

The most obvious improvement is just that: The move to one platform.

via GIPHY

Because it spares us from double the maintenance, double the feature release - simply double the work. With the newfound focus, we automatically become faster, more flexible, and overall more professional. We have the freedom to try out new things - and the certainty that the things we implement work really well.

Making our store responsive also brings a few fundamental innovations in the workflow: For example, the introduction of Twig as a template engine or the building of a holistic design system. Hence, we're working on the core of how we design and build sites in the future. While we have already been working with reusable components in the past, we didn’t do it consistently. Reusable components make the creation of a design or the implementation of a feature noticeably faster. With the introduction of such a system, the associated tools and the integration of the entire team, we are well on our way to realizing projects even more smoothly - and saving nerves at one point or another.

Are you already live live?

Yes, yes! At least this is true for most of the store pages. But since the Thomann cosmos is a very big one, some of the less frequently visited pages are still under reconstruction. Also, the clean-up work of such a conversion is not to be underestimated. But we are confident that we will not drag too many "old burdens" into the new year.

Now we are really looking forward to the reactions. After we put so much energy into the project and we still do, we obviously hope for the best. But even if some things are not so well received - we still have our obligatory feedback button in the footer. And you can press it without hesitation. Because, thanks to the reorganization of our platform, we will be able to implement future customer request even more efficient!

Our offices

Remote. Distributed. Together.

Work from home or any of our offices. Our team is 100% remote and will stay this way. You need a stable internet connection and your laptop. Currently our way of work supports the central European timezone +/-2h.

Treppendorf

Our Thomann headquarters. Just a few minutes’ drive outside of Bamberg. Come by to visit our shop or meet with colleagues outside of tech & data.

Berlin

Our thomann.io office in the heart of Berlin. Easily reachable at Rosenthaler Platz. Perfect for workshops and team building.

Erlangen

Our thomann.io office in Nuremberg's metropolitan area. Just a few minutes by foot from Erlangen station. Nice, quiet location to do some deep work.

Our thomann.io Blog

Nov 10, 2022 - Markus Melber

The right amount of spice makes our solutions tasty

The right amount of spice makes our solutions tasty

Sep 21, 2022 - Frederik Heins

Team Competency Matrix

Finding your next team member by mapping your team’s skills and visualizing what is currently lacking.

Jul 13, 2022 - Oliver Dolgener

Are you Appic enough to join us?

Developing the most appic Thomann App while hunting for 5-star reviews and perfect burndown charts!

Jun 30, 2022 - Heiko Terfloth

A day at the BK-nusprig drive-in

Bad jokes, burgers, and developers... Did someone call us?

May 13, 2022 - Ralph Cibis

Thomann.io goes Cyberpunk

We went fully cyberpunk! Our branding community's last side and heart project.

Jan 3, 2022 - David Beuchert

DIY software: Why it's the one and only way to do it and everyone else is wrong

My provoking approach wooing for more in-house development.

Dec 8, 2021 - Nadine

Going fully responsive

Why we redesigned our shop - and why purple's the new blue.

Oct 18, 2021 - Julia Manger

Open Space 2021

Summer 2021 - Home office, lockdown, a fourth wave and: huh?! An Open Space!

Aug 6, 2021 - Stefan Stammler

Bits, Beats, Ops-Team

Someone needs to bring our shop online. This is our mission.

Jul 7, 2021 - Ralph Cibis

Hello, Webteam

We are the Thomann Web Team. We create thomann.de and the Thomann App.

Jan 27, 2021 - Nadine

What Kan Kanban do

The idea behind moving cards - with a crispy epilogue.

Sep 7, 2020 - Francesco

Guitars to Oslo or: The Art of Offering the Right Shipping Methods

Our developer Francesco provides you with behind the scenes insights

Jul 14, 2020 - Thomas Tischner

How Thomann is mastering the move to Kubernetes

Our Sysadmin Thomas tells you from his day-to-day work

Nov 4, 2019 - Domi

Thomann Dev Camp 2k19

This year under the Slogan "ready for our collective take-off".

Severe case of I-wanna-work-with-you?

...or any questions for us? Give Anne a call!

Welcome to Treppendorf, welcome to Thomann Music

We're inspiring and enabling people to speak music, everywhere. 24/7.