As one of the major retailers in Portugal and Spain, Worten always has the ambition to do more.
*To not disclose sensitive information, I have omitted some confidential information in this case study. The information in this case study is my own and does not necessarily reflect views of Worten.
The client was Worten, one of the major electronic retailers in Portugal and Spain, with more than 300 physical stores. They decided to take their e-commerce to the next level by becoming a more customer-centric business. One of the first steps was adapting an omni-channel strategy with e-commerce to provide an integrated shopping experience. The customer should be able to shop online from a desktop or mobile device—or in a physical store—with a seamless experience.
I led the user experience design of Worten’s new e-commerce across desktop, tablet and mobile since the outset of the project in November 2015. Up until October 2016, I led efforts to get the decision makers to realise how crucial understanding the user experience was to their business and to evolving the existing design to the next level by addressing customer pain-points.
With Worten being a large enterprise, the approach needed to be tailored to the company‘s organisational structure, so I decided to create a 4-phase process. The first phase was “Customer Insight and Ideation,” where I uncovered insights, translated concepts and addressed customer behaviours and motivations. The second was “Strategy and Vision Experience,” where I created frameworks and mockups to share the vision, design principles and content strategy. The third was “Planning and Definition of Scope.” Here I helped prioritize and negotiate features for launch and beyond. The fourth was “Design and Measure,” which focused on execution of the final design and implementation, working closely with the development and analytics teams. See the diagram below to get a better sense of the approach.
The biggest challenge I faced throughout this project was to balance moving forward with solutions, while collaborating with the wider team. Since this project touched every part of e-commerce, I needed to coordinate and get buy‐in from many different teams. Managing feedback was a challenge because it sometimes felt like a swinging pendulum of viewpoints. The team spent a disproportionate amount of time debating design decisions when there wasn’t data to help drive a decision.
Understanding needs requires research to develop a deep knowledge of who the customers are, what the business demands and what the goals are. I started running small workshops/conversations to understand what the motivations were for the people at Worten. During that time I went to talk to the executive team, operations team, technical team, customer service team and sales team and asked them, “What keeps you up at night?” People said a lot of things that they didn’t think of as design problems but in reality are. People have their own priorities, and if my designs don’t speak to those priorities, I will end up doing a lot of design work for nothing. So this was a very important step that allowed me to be more aware of the business and, at the same time, to create a deep relationship with each team.
It is important to know what your competitors do and to learn from their strengths. We analysed many e-commerce websites including foreign websites, famous websites and direct competitors.
There are different approaches when it comes to content for e-commerce. This analysis gave an opportunity to see how businesses with very different approaches to content and different types of content can make a business totally different for customers.
Understanding competitor information architecture helped me to establish a base of information about what a menu could be and how I could meet user expectations with fewer clicks, better organization and greater ease when finding a specific category or product.
Understanding how competitors organise their filtering system and lists by category or search gave me a notion of what was possible and of how to make sense of each category. Because every category has different aspects that are either useful for the customer or not, even the order can create a totally different outcome.
Understanding what types of information were important for the customer and how the other players are doing it helped me to structure a relevant product page.
It is not enough to know your competitors; it is also important to know yourself and to know for whom you are designing. I created personas to help me gain insight into our users. This allowed me to fine-tune, speaking directly to each customer segment and its unique needs, no matter what stage of a buying cycle the individual customer was in.
Since my first day as a designer, design has been almost always about systems that could be scalable and repeatable to enable iterations more easily and quickly to create better solutions. This project wasn’t different. Creating a unified design system was essential to help me move fast and to give a cohesive experience to the users along the journey. See the diagram below to get a better sense of the design system.
My aim was to improve user engagement by understanding more about a user’s personal preferences, allowing us to predict and tailor relevant content.
The menu is open by default to help people who don’t know yet what they are looking for and at the same time to allow curious users to explore more categories.
This is the first thing customers see when they enter the website, so we decided it needs to be the most important value proposition Worten has to offer.
Implementing this sophisticated solution, without a doubt, helped us give a relevant and personalized customer journey that more likely resulted in a conversion.
In this section the goal was to enhance Worten‘s content creation because Worten wants customers to come to the site not only to buy but also to read about new technology.
This menu is one of the most important pieces of the ecosystem because it allows customers to find products organised in a logical way. The menu is divided into four key sections:
1- Top bar
The top bar is the five areas that Worten represents, from products to physical stores.
2- Main categories
Inside each one of the top bar areas exists a different subgroup of main categories that appears on the left, then allowing users to navigate to a specific subcategory. (The names and ordering were based on competitive analysis, card sorting and users’ language.)
3- Subcategories
In the centre appear the subcategories of each selected main category. (The names and ordering were based on competitive analysis, card sorting and users' language.)
4- Promotion
On the right is a column with promotional campaigns. Because Worten has more then 40,000 products, and this number is growing every day, this section helps the sales team leverage new products and technologies inside each category.
On this page I focused on content that answers some of the questions customers often have regarding shipping, warranties and accessories.
In the first section we started by showing a list of subcategories related to the category, allowing the customer to quickly jump to a subcategory (TV 4K) and find the desired product.
Using the recommendation engine here allows us to show more relevant products to each customer, based on customer preferences, popularity, recent sales and other data.
The customer education section enables customers to learn about the product they want to buy. E.g., if the customer wants to buy a TV and wishes to learn about resolution, curve screen, smart TV, etc., this section will help him make a choice.
Worten has many services that are restricted to specific categories. So this section helps customers understand how each service works and how each should be used.
The media section was created with the purpose of giving more in-depth reviews of specific technologies or products.
Once a user has an idea what they want to buy, they will shop on the product listings page. The challenge here was to make clear that they have multiple options to find the product they are looking for.
While designing the filtering system, I followed some key techniques:
-Leading with the most valuable and relevant filters for each category.
-Showing the number of products available per attribute.
-Not showing all the attributes straight away.
-Showing the brands filter first but allowing visitors to expand to view more brands if they wish.
Poor quality images make the products look poor in quality too!So some of the images were redone and the perspectives were made more consistent. With the product listings having the same perspective, it gives a more organised look. As a result it is easy for the customer to see many like comparisons of similar products.
Product pages usually suffer from information overload, and that was my biggest challenge. The key is balancing information for customers with different needs: the person that already knows what they want to buy and also the person that needs every little product detail.
People look at the showcase store similarly to how they look at a physical store. Here, the first section is almost like that; the customer can see all the basic product information (like photos/videos, price, discounts, reviews, availability, legal info and services associated with the product) and see if it is what they are looking for.
The second section is for when the users have already decided to buy. Worten offers some bundle suggestions of products that will be handy for the customer with the initial product. E.g., the customer is buying a digital camera and could bundle it with an SD card and camera bag. This increases customer satisfaction because he will not forget to buy an SD card for the camera, or if the customer is buying the camera for travel he will be reminded that a bag is a must.
The reviews are more detailed feedback of the product. They help the customer take informed decisions whether to buy a product or not
The third part of the product page is the technical information for people that want to know details about technology features beyond the standard technical information. A big part of that is rich content created for this product (such as in-depth technological information, new concepts, advantages, etc.).
In an Era where we can find almost on Youtube have media section with reviews from Youtubers and other Experts giving honest opinions was a good way to increase trust.
The store locator tool seems like a very basic part of e-commerce, but that isn’t necessarily true. A store locator for Worten truly helped them consolidate their omni-channel strategy. With more than 300 stores, it was important to give people useful, local information about the stores.
Allowing costumers to search by stores nearby or by geo-location was important, due to the consumer shift from desktops to mobile. Most of the time customers look for store information is on mobile.
Often people want to know the area around a store, so I decided to display search results on an interactive map, allowing customers to explore the neighbourhood or even to look for more stores on the map.
Today, Worten has thousands of customers buying technology, and the company is hitting new records almost every day in its business objectives. Its biggest growth area, without a doubt, is from the mobile conversion, which is now several times bigger than before. With content more focused on customer needs and desires, the level of customer engagement is through the roof. At the end of the day, this project brought huge value to the business and to the customer.
So, while I am certainly proud of what I launched, what I am especially pleased with is what I accomplished for Worten and the people I worked with. This new e-commerce needed to happen in order to expose how badly things were broken—both on the website and in the way the team was working. I am proud that the team is now in a better position to learn. I believe that great projects take time and wisdom, which is only possible if the entire team is in a position to learn and evolve every day.
BePretty is the first urban guide in Latina America that in one hand, enables women to search, discover, and book beauty appointments
