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!

The thomann.io team - where tech meets passion

Meet and see what others are up to!
Meet and see what others are up to!
Join our yearly open space.
Join our yearly open space.
Nice merch awaits you.
Nice merch awaits you.
Share your musical passion.
Share your musical passion.
Bring new features and yourself on the road!
Bring new features and yourself on the road!
Enjoy tech and techno at the office.
Enjoy tech and techno at the office.
Get end-to-end tests out-of-the-box.
Get end-to-end tests out-of-the-box.
Jam along with colleagues.
Jam along with colleagues.
Get awarded for your anniversaries.
Get awarded for your anniversaries.
Celebrate when old tech gets shut down.
Celebrate when old tech gets shut down.
Bring yourself, no disguise needed.
Bring yourself, no disguise needed.
Have a sip with team members!
Have a sip with team members!
Meet up with your team to create the next awesome feature.
Meet up with your team to create the next awesome feature.
Dive deep into the tech side of e-commerce.
Dive deep into the tech side of e-commerce.
Share your knowledge across domains and divisions.
Share your knowledge across domains and divisions.
Maybe just smile at the camera.
Maybe just smile at the camera.
Be busy without acting busy.
Be busy without acting busy.
Get started with your next new instrument.
Get started with your next new instrument.
Enjoy snacks, enjoy networking.
Enjoy snacks, enjoy networking.
Tag your commits or tag some bridges (as team event!!!).
Tag your commits or tag some bridges (as team event!!!).
Learn how tech works under the hood.
Learn how tech works under the hood.
Meet for regular team events with the people you work closely with.
Meet for regular team events with the people you work closely with.
Start your jam with us today!
Start your jam with us today!
That's us. In person. And you can join as well!

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

...or any questions for us? Give Anne a call!
+49 176 32373617

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 EU.

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.

Welcome to Treppendorf, welcome to Thomann Music

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