The physical shopping experience in an app — a UX case study

Designing a retail app according to the physical shopping experience.

In a recent attempt, we intended to redesign a retail app with +10 million users. Since this app is one of the pioneers in our country in online retail, a great number of our users don’t have enough experience of digital purchase and they tend to do most of their purchases in the traditional way. Thus we tried to give the users a sense of their past physical shopping experience when they enter our app so that they feel comfortable shopping online. We didn’t want to change their mindset with presenting a new structure and we were trying to remind them of a physical purchase but in an application context. If we were to break their mindset, we would have to spend a lot of time until we could gain users’ trust and they could actually work with the app.

We made effort to comprehend the atmosphere and what the users go through when they shop physically, and we tried to use this info in designing the app so that the user would have a sense of affinity to it. Because we wanted to present what the user has repeated over and over before and has stuck in her mind.

Now let’s go through how we used physical shopping experience to design the app:

1. Home page

What do you usually do to start shopping physically?

People usually go to the city’s shopping centers to do their shopping. In these venues, you can see big stores with a vast variety of products. Now let’s imagine you need a sports T-shirt and that’s why you have entered the market. You can see different stores from different brands, and also some small stores. You see a wide variety of clothes at first glance, from formal and everyday clothing to sportswear. Without shaping a category in mind, all these products march in front of your eyes.

When the user first enters the application, we don’t know what he is looking for, so we present some information we have recognized from our overall users’ behavior; as if when you enter the shopping center and a lot of things are going on around you. So we were trying to present various contents to the user in our homepage according to our 2 priorities: our business strategy and the contents that meet our users’ needs.

When you enter a shopping center you see some stores with a lot of customers and some with only a few. In our app, we put some of our best seller products on the homepage and a bunch of specials that might have fewer customers.

We tried to show different suggestions on the main page so that we could attract more users to the products presented on the homepage.

2. Category

As you are looking at the stores, you are concentrating more on the sportswear and the part of the shopping center that is dedicated to the sports section. When you choose this section you actually cut the other places and put them away. This is similar to selecting a category in the app. You choose “Clothing” and then choose “Sportswear”.

3. Products list

Now imagine you choose a special store to look at its sports t-shirts. When you go inside, there are lots of sportswear but you choose one special shelf. In the app, it’s like when you choose a special list in that category and you filter it according to your needs. When you go physical shopping you have some filters in your mind such as the fabric, color, collar type, etc. we have provided a filter on this page that helps the user find his item more easily.

4. product page

Now you need some time to decide if this t-shirt suits you or not. You would wear it in a dressing room to see if it fits. So we provided a situation similar to a dressing room where the user is alone with the product and can focus on it. Let’s imagine ourselves in a dressing room. Our whole attention in there is focused on whether this product suits us, is the fabric good enough, do we like the color,… And above all, no one is there to bother us and attract our attention, maybe we don’t even hear the sounds outside because we are focusing on making a decision to buy the product or not.

We tried to provide a situation similar to a dressing room:

We diminished the things that might draw the user’s attention away as much as possible and we provided the information he needs with a proper architecture of information about that product (from specifications of the product to the comments of other customers about that).

The more we spend time in a shopping center, the closer we get to our target and the fewer attractions drive our attention away as we concentrate more on our product. So the noises would quiet down and the colors would go pale. That’s why we tried not to distract the user with the products he doesn’t need as he goes through the inner pages. And that’s why there is a sea of promotions and various suggestions for different people in the home page but by getting closer to the intended product page, these suggestions turn into similar products and we don’t show advertisement and app promotions on the product page so that the user can choose the product without being disturbed.

Our design is based on traditional shopping so that it would be familiar for the customer and he won’t feel weird while shopping via our app and feels that the path is familiar and easy.

This scenario applies when we go shopping with a special target, but people also sometimes go shopping for fun, which demands another scenario that does not fit in the scope of this article.