Ladenzeile, E-commerce platform redesign

Redesigning one of the top e-commerce platforms in Germany with 1 million daily users in 12 countries, offering over 142 million products from 4.000+ partner shops.

Year:
Role:
  • UX
  • UI
  • Front-end Dev
Stack:
  • Sketch
  • SCSS
  • JSP
  • Javascript
  • Java
Ladenzeile, E-commerce platform redesign

challenge

Being over ten years old, with very little visual updates over the years, the Ladenzeile's web platform was being perceived by its users as “old-fashioned”, “unprofessional”, and even “untrustworthy”.

We aimed to verify the consistency of these claims and to identify potential solutions.

Ladenzeile's old homepage design

Result

After a month-long design marathon, our design team had achieved a big milestone and successfully addressed the challenges identified.

Ladenzeile's homepage design

A new friendly face

The homepage is the face of Ladenzeile and it has to communicate what the platform is all about at first glance.

The platform's unique selling proposition is “Search products from thousands of Shops in a single place”. By placing the search bar front and center together with the slogan, we increased the user's engagement with the search and the understanding of the platform's concept.

Ladenzeile's search results page redesign

Search Results Page

The results page is the single most important page on the platform, accounting for over 80% of the total revenue.

The new layout clearly separates categories from filters and introduces a cleaner product card.

Ladenzeile's search filters redesign

Improved filter experience

A more streamlined filter experience does away with the old filter jungle that would go up to 26 filters on a page, displays now only the most relevant 4 options for a given category.

In the case of Fashion, those being gender, price, size and brand filters.

Ladenzeile's detail page redesign

Product Detail Page

Decluttered and to the point, the updated detail page prioritizes the most relevant product information to the user and provides clear actions.

Ladenzeile's main menu redesign for desktop and mobile

Brand new main menu

Although hiding the menu behind a burger menu button can hinder discoverability, testing and analytics data showed that in the majority of user journeys, the platform users didn't switch verticals.
This allowed us to tackle one of our user's issues it gives me a supermarket feeling and doesn't feel trustworthy.

The new menu became more playful, with thumbnails for top categories, as well as adding marketing possibilities.

Approach

The biggest challenge for this project was its scope, since we had a very small design team of three, we had to be very efficient and mindful of our resources.

We decided to narrow the initial MVP’s duration to 1 month and limit the scope to the 3 most important page types: Homepage, Results page and Product Detail Page. These 3 contributed to around 90% of the platform’s revenue.

With this in mind, we agreed on an agile process consisting of 5 steps: Understanding the user, Market Research, Ideation, Prototyping, Testing, Repeat.

Triangle representing the balance between the user, seo and partner shops.

A balancing act

Given the platform’s nature of being an Affiliate Marketing aggregator for thousands of partner shops and relying so much on organic traffic, it was extremely important to find the right balance between the Users needs, together with SEO marketing and the Partners’ needs.

These three aspects form a tripod that when pushed too much to one side, the other two tumble down.

User interviews and usability testing with Ladenzeile's users.

User interviews

In order to get a better picture and scope of the problem, our design team conducted a series of user interviews with people of different age groups, and shopping habits, to gain insights into their user journeys, expectations and pain points.

The users gave feedback on the platform experience, confirming that it was indeed aesthetically unpleasing, while we analyzed their interactions and identified usability issues.

Market Research

We collected analytics data from our users, and together with the learnings from the user interviews, defined the 2 most common user flows on the platform.

Conducted Market research and Competitor Analysis, to gather insights and help inform our design decisions.

Pictures from the ideation process.

Ideation

After having a good grasp on the problem at hand, we set out to put the first ideas on paper and conducted card sorting tests, where we asked the users to organize core component blocks and share their feedback.

Once a good result was reached, we moved on to the visual exploration.

Defining the Design Language

The driving concepts for the platform’s new visual identity became fresh, playful and clear.

One big challenge, however, was that the re-design was limited to the current brand identity and colors.

Concept style board for Ladenzeile's redesign.

Style Boards

To help with the exploration and set the visual identity's direction, we created a set of inspirational style boards with content from multiple medias.

Example of the design language

Design Language

In order to move fast and stay consistent, once the initial design decisions were reached, we took some time to define a styleguide with the new design language, consisting of Typography, Color Scheme, Core Elements and Spacing.

This allowed our team to work on different page types in parallel, while staying consistent.

Testing & Prototyping

Every week our team prepared a high-fidelity prototype of a page type that we worked on to test the user flow and gather insights from our users and iterate for the next week.

Prototyping and testing the new design with users.

Development

When the time came to implement the redesign, while aside from some minor Controller improvements, the backend and business logic were barely touched, on the frontend side of things it was a very different story.

New Beginnings

In order to break away with a decade of legacy code and patches, we built the client-side from scratch. Ditching old dependencies like JQuery, outdated practices, a lot of baggage, and not so good architecture decisions.
This included all HTML (JSP), javascript and CSS.

Mobile-first & fully responsive

Until this point the platform was adaptive, with mobile, desktop and tablet having their own set of CSS, HTML and Javascript, leading to a lot of duplication and issues. With mobile user share surpassing desktop, it was no longer acceptable.

Every component and layout was designed and developed to be fully responsive and sharing the same client-side code. This ensured the best user experience and sped up feature development.

Going Live

Once the Homepage was ready, we started AB-testing our design in production, while developing the other page types.

The Homepage went first live to only 5% of users on one country, to gather analytics data and assess its stability. It was then rolled-out to 50% of the traffic.

After 2 weeks of positive KPIs it was 100% rolled out to one country, with the remaining countries going live in the following weeks.

Other page types redesign.

Remaining Pages

Results Page followed a similar test cycle, with the remaining page types going live soon after.

Fast Page Load Speed & Performance

In e-commerce, the initial page load speed is crucial and a longer load time directly translates to revenue loss and higher Bounce Rate.

With this in mind, we developed the new platform with a lot of optimizations such as code splitting, asset lazy loading, and many more, to make it as light-weight as possible.

We managed to achieve a very positive outcome, increasing the Google Page Speed score from < 30% to 86%.

Learnings & Mistakes

The redesign performed quite well on multiple KPIs, including Bounce Rate and User Session Duration, specially on Desktop, where the design changes were more significant.

Even though the mobile experience became a much better one on many levels, it was unfortunately, it was suffering from a sneaky bug that was difficult to identify and only affected some specific browser versions, lowering the overall Conversion Rate on those sessions.

Everyone was a bit too optimistic in the project's success that even though we had requested better user tracking data in order to understand how the user was interacting with the platform, it was deemed unnecessary and led to the project going live with only high-level KPIs to rely on.

This later came back to bite us since we had no proper data to analyze were engagement issues might come from.

Corona, Hard Times

When Covid struck, e-commerce was severely affected in the initial weeks and the revenue sank.

Although the team had a plan to solve the platform issue, at this point we still didn't know the exact source of the bug and we needed more time, while the company needed revenue now.

Management made the hard decision to roll-back the redesign indefinitely, and later decided to do a rebranding.

Closing thoughts

Even though the roll-back decision was a hard one, a lot of the learnings, UX and technical improvements were adopted by the platform.