When planning the user paths through the site, we took into account different scenarios depending on the starting point on the page, as well as the tasks the user wants to complete (which is not always shopping, after all).
Scope of work
UX/UI redesign, Shopify Plus development, Roll outs, Maintenance
While working on refreshing the brand image, the client decided to take care of one of the most common touchpoints between the brand and DTC’s customers – the e-commerce store. The need for changes resulted not only from the ongoing branding process but also from piling up problems in the website usability. Further conversion optimisations were no longer bringing expected results. In the beginning, we have set ourselves some goals:
More effective mobile
Most brands are noticing an increase in traffic from the mobile channel in their statistics. E-commerce sites that don't care about the ease of purchase on smartphones are letting go of an important piece of the market.
More effective content
When conducting extensive content marketing activities, it is worth ensuring that they translate into sales generated by blog pages.
Improved information architecture
How to group products in order to help users browse the range more easily?
Choosing insoles for shoes is not an easy task – what criteria to follow when choosing and what problem do insoles have to solve for us?
Research and Analysis
We began our work with stakeholder interviews to identify business objectives, challenges, concerns, measures of success, noticed problems, etc.
When carrying out an e-commerce redesign, it is necessary to gather all the knowledge about the optimisation activities carried out so far – which solutions worked well, what did not work, where we could notice the biggest impact on conversions.
We also extensively analysed statistical data, such as the typical path through the site, the distribution of devices according to age (the conclusions we came across here were not at all obvious), the most popular content and, above all, the effectiveness of the purchase path.
In addition to the figures, we also looked at behavioural data – how users behave on the site, what functional issues can be observed, what are the most common reasons for cart abandonment, what do the users click, what they ignore, how much engagement do they have on the site?
The research was complemented by competitive analysis – an overview of inspiring solutions and trends.
Armed with the data and findings from the research, we met with all stakeholders at the Kick-Off workshops to present our observations, conclusions and recommendations for the redesign.
A key element at this stage is also understanding which user groups we will be designing for. During the branding process, the client team developed extensive user/buyer personas based on numerous interviews and other qualitative data, which allowed us to better understand the motivations, needs, concerns and attitudes of brand users.
User paths and information architecture
We started the design work by developing an information architecture – we prioritised the content and tasks that different types of users want to accomplish on the website. Of course, we used the data from the research phase and the user personas developed for this purpose.
We started designing the interface by creating prototypes. Thanks to this approach we were able to reproduce the user paths created earlier. In addition to the standard shopping path pages (homepage, product listing, product card, shopping cart, checkout), we also paid a lot of attention to the blog section, corporate section, customer account, search engine and shoe insole search engine.
Working on the prototype we were able to iterate quickly, collect feedback and introduce appropriate changes, thus optimising the efficiency of the whole process. Design or development changes at later stages would be much more time-consuming and costly.
The prototypes were created in accordance with best user experience practices for e-commerce, but also taking into account observations from the research and discovery phase, as well as using successful solutions from the previous version of the site.
Our familiarity and experience in working with the Shopify Plus platform were also important here – they allowed us to understand its possibilities and limitations.
Work on the visual layer of the website coincided with the completion of work on the brand image lift. Working on the basis of a set of “brand guidelines” allowed us to maintain consistency and convey the new brand communication on the pages of the e-commerce website.
In several iterations, we were able to create a clear, aesthetically pleasing and engaging interface.
Validation – user testing
In addition to testing the prototypes, we decided to conduct larger user tests at the stage of the finished UI, and before starting the programming work. This approach was motivated by the desire to verify how the final design and relevant content would translate into understanding and effectiveness of the interface.
During the task testing, we looked at many different aspects – how users go through the purchase and checkout path, whether they can search for the right product for their ailment, whether the insole finder does its job, the filters are helpful, users can reorder the same product or find help on the site and much more.
We have implemented many interesting solutions on the website, which help the user depending on what stage of the customer path they are at:
- just looking for a solution to their problem
- determined to make a purchase
- they are returning, regular customers.
Articles on the product listing page
During the discovery phase, we noticed that many customers are not able to make a decision about a product and need guidance. Therefore, on the product category pages, we introduced an educational layer above the scroll line – a set of relevant articles that will allow users to gain relevant knowledge and make a decision based on expert suggestions.
Filters on category pages are something obvious. However, in order for them to work sufficiently, they must be adjusted to a specific product category and diversified within the site (a common mistake is to use the same filters for all types of products). Another common mistake in designing filters is using the company’s internal language to describe them. The filters on Scholl’s site have been adapted to specific product groups.
Better blog articles
If you’re actively blogging for your e-commerce then there’s a good chance you’re getting most of your traffic from this source. When it comes to Scholl, many customers start their purchase from the article, looking for a solution to a specific problem. To make it easier for users to find information, we have added tables of contents, other related articles, and product listings related to the issue to the articles.
Some of the more popular products in the shop were shoe insoles. Customers were often unable to make a decision and choose the right ones from the listing. This problem was solved by a tool that gives recommendations based on a few questions that each user can answer.
Shopify Plus and roll-outs
Based on the designs, our Shopify development team took care of the front-end layer and integration with the Shopify engine. The key aspect was a smooth migration to the new layout, taking care of maintaining the developed position in search engines, integration with external tools.
Following the successful launch of the site in the UK, our team has been busy launching the new e-commerce site in dozens of global markets. We continue to work together with Scholl to maintain and develop the site.
The redesign project was undoubtedly a success. Together, we managed to achieve the initial goals, and the key e-commerce indicators recorded significant increases.
For our agency, this was certainly one of the most interesting challenges. During the project, we gained a lot of valuable experience, which we successfully use in subsequent e-commerce projects for clients with global operations.