- Front-end Dev
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.
After a month-long design marathon, our design team had achieved a big milestone and successfully addressed the challenges identified.
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.
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.
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.
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.
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
This allowed us to tackle one of our user's issues
it gives me a supermarket feeling and doesn't feel
The new menu became more playful, with thumbnails for top categories, as well as adding marketing possibilities.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Mobile-first & fully responsive
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.
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.
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.
Even though the roll-back decision was a hard one, a lot of the learnings, UX and technical improvements were adopted by the platform.