Case study: What I have learned from an e-commerce redesign
How to plan a redesign of an old website, and where to focus for the first re-lunch, before moving into details.
Intro.
Some years ago I had the chance to work on a redesign of a wine e-commerce. The website was using an old obsolete technology, without any basic responsive behaviour. Google was decreasing the ranking of the e-commerce in the search results, as well the average of sales was decreasing every year. We needed to replace the structure and the interface as fast as we could.
Restoration.
I came from architectural studies. The process was fairly similar to what an architect does when renovating an old building. The construction is well done, is stable, has also a sort of romanticism attached to it. At the first glitch make totally sense to preserve whatever is possible of the old spirits of the building, during the re-design. In our case the e-commerce had also a strong core of loyal customers, used to buy in the same interface, following the same path for ages.
The project was then divided in 3 different phases:
- analise existing structure, with the related architecture information and design interface,
- highlight the problems of it and prioritise them, filtering per technically urgent and with the scope of the redesign
- finally redesign, decreasing the complexity of the old solution.
Analysis of current situation
As first thing we scan the architecture of the website, creating a wireframe scheme of the different pages and how they were connected with each other. Creating fake account, we tried to shadow the experience of current customers and the journey they needed to take to accomplish their task, that was mainly buying wines.
The most critical part, also thinking of about its replacement in the further development, was the filters system. The old system let the browser refresh the page at any selection of the filters, giving the idea that basically each filter was, perse, a indepent page. Also the position in the layout was not optimal, but because we wanted to not affect the users so much during the relaunch, we decided to leave in the first iteration, at least in the desktop version, in the same position.
Mapping the design of the interactive elements used on the old system was also a crucial part of the first phase. The brand existed already for quite a while, the customers were used to it; they followed for years the elements in the interfaces to find main action points, information hierarchy and menus to guide them in the journey.
First Problem, confusing and not scalable architecture.
Compared to the enormous amount of pages of the old e-commerce, the templates of the new structure have only one overall approach: at the top of the page we always had a stage area, with inspirational content, related to the page the user was visiting, and after that block, a collection of product cards that will also reflect the are where the user was navigating in the website.
This stage area was then populated either with information about the visited page and mood picture, or with other functionalities, as sorting of a possible search results, tags, or a filter system that would help customers to decrease the amount of results visualized in the page.
Second problem, uncostintent and redundancy of fundamental visual decision: tokens of the new interface.
The old website didn’t have a structured approach regarding the fundamental visual bricks that inform the user interface design. An redundant amount of colors, used without following a proper logic, made the guidance that we wanted to provide to user and creation of states for the different components quite hard. First step we decreased the color palette, defining a more schematic one, that we used to create the logic of our color variations in the different element. Another problem was the font. To maintain a connection with the brand, we decided to use one font for the more branded copy area of the product, and another, more readable one, for the standard text, call to action and paragraph. Both of the fonts were google one, easy to maintain and in case to change in the future, when a proper re-branding would have taken place.
Creation of a User Interface library.
The creation of a stable component library was another important steps to make the whole project scalable and approachable with modern development. We started the collection and design of the components from the fundamental pages of the website, following the most important actions that the user should take, and try to reuse them as much as possible, even forcing the look of the website, at first site, to appear repetitive when naked from its content. We decided that the main role for the narrative of the product would have been the picture showing the wine bottles and the description from the wine expertise.
Third Problem: overall approach of card system, the wine card.
One card to show different content. This element is the one populating the whole product, changing the dynamic of its nature accordingly to the content and to the environment where has been placed. Of course the highest attention was left for the single wine card: the access for the customer to start the journey of the wine selection. A lot of information needed to be placed inside this element, and specially for the small screen variant, it wasn’t an easy job. All the components of the cards needed to appear on demand, and give to users specific pieces of information, to make him quickly judge if giving to a specific wine his preferences or not.
The card take also other manifestation, when entering the detail page, the layout expands to embrace more information, when used for a campaign will grab the attention with the usage of strong font, mood pictures and a contrasty call to action. Ultimately, to express the connection between the wine and the winemakers, the card will visualize information and pictures of the production area or of the territory and the region where is been produced.
Finalize the pages and further UX improvements:
Following a precise structure, we produced the templates for different kind of pages. Most of them are populated with a list of product, in a mosaic view when the screen allows more content to be shown, and as a normal stack for smaller devices. The list of pages included also a classic check/out flow, a basket, a user information page and registration flow
Over the months after the relaunch, some improvements were applied to the logic of the website. To validate our ideas we used different approaches. User tests were conducted when possible, otherwise, competitors analysis and desk research helped us to guide the process of refinement of the experience of e-commerce.
