Bershka’s QR Code Revolution

5 min readJul 26, 2019

In addition to having beautiful clothes, Bershka is one of the first fashion brands that started utilizing the phone’s barcode scanning feature.

However, other than just directing the user to the item’s page in the app’s catalog, the app doesn’t offer any assistance to the user with his shopping experience; or in other words, it doesn’t utilize the fact that the user is at the physical shop.

By creating a separate, modified version of the app tailored to the needs of shoppers who are in the shop, Bershka could boost their average order size, reduce friction, decrease the manpower needed in the shop and improve their customer’s overall shopping experience.

So What’s Wrong?

1. Bershka’s app displays irrelevant content to in-store users, such as shipping, size guide, etc.

2. In-shop customers cannot pay for their items in the app and have to stand in the checkout queue

3. In-shop customers require staff assistance to figure out items’ availability

5. The current checkout process causes a lot of friction and is not optimised

So, My Mission Was

1. Improving the shopping experience for the app users

2. Reducing the manpower needed in stores and reducing friction for in-store customers that are using the app

3. Increasing the customer’s average order size

Research Phase

To enforce the initial assumptions, I’ve conducted a short interview with a couple of my fashion-loving friends, asking them various questions about their experience using the app while shopping.
Furthermore, I went to the mall to collect in-field data.

The main points I wanted to establish are:

During peak hours (Sunday–Thursday, 7 PM–9 PM, and Friday, 11 AM–2 PM)

What’s the average time it takes for the shopper to find out an item’s availability and get it from the storage
What’s the average waiting time when standing in line for a changing room and waiting time for the checkout
Why users don’t use the scanning feature in the app when shopping
How do they think the app can help them more

Rebuilding The Information Architecture

From the research I did, I saw that in order to address the customer’s issues, there needed to be a separate app with a new information hierarchy and UX.

The goal of the new hierarchy was to deliver a zero-friction, straight-to-the-point user flow for users who utilize the app when shopping.

Wireframes and Low Fid Mockups

So when I had finished the new IA, I went ahead and started drawing quick sketches. In this phase, I usually try to lay out ideas that I haven’t seen in apps before, as long as it serves the IA, is not too far from what users are currently doing with similar apps, and it follows the branding and style guide of the company.

With the wireframes done, I went on Sketch and started creating low fid mockups for usability testing.

Usability Tests

To make sure the navigation system works, I used Usabilityhub.com to see if users can understand how you make a purchase, how you submit yourself to the changing room’s queue, and how to take the clothing buzzer off once you purchase.

After this, I redesigned a couple of things and continued on to the high fid mockup.

New Launch Screen

The app automatically locates the store via GPS
Users are now encouraged to create an account
The screen displays key product benefits

The goal of the design was to encourage the users to create an account so they can utilize the major benefits of the app.

The store name is placed high in the hierarchy, so the user can be confident that the data he sees is relevant.

The user can skip the registration process if he wishes.

Brand New Hub Screen

The displayed content is now relevant to the user’s current shopping session
Scanning button is displayed higher in the hierarchy
A new button was added so the user could enter the virtual queue for the dressing room

The major difference between other e-commerce home screens and this screen is that the focus here was on helping the user discover new items only based on his scanning history, gender, and in-store availability.

The barcode scanning button is also now displayed higher in the hierarchy.

Product Screen Re-Designed

The user can quickly check the item’s in-store availability
Basic color matching guide, based on the user’s items’ color histories
One swipe to check available sizes
New “buy-the-look” section

The main focus in this new product interaction screen was to enable the user to receive his desired information as easily as possible while revealing only what he needs to see.