Auchan App Concept Design – Redesigning UI & UX Process Step by Step

Creating an app just to have one is not enough. Many a company launch substandard pieces of mobile software with hope it will suffice. With mobile-savvy users of today any old app just won’t do. Worse even – an annoying, non-intuitive, buggy app will actually work against you. If you don’t care about the users (your customers), you can’t expect them to care about you.

When it comes to mobile apps, the Customer is ALWAYS right. Their feedback and reviews are the make or break not just of your app, but possibly of your entire on-line marketing efforts.  

Table of contents

1. Supermarkets and their apps
2. Auchan application – design analysis
3. Competition app analysis
4. Auchan concept design – low-fi wireframes
5. High fidelity wireframes for the Auchan concept application
6. Initial user tests
7. Including Auchan Branding in design concept
8. Conclusions from the concept design

Due to its low rating and poor reception, we decided to have a go at proposing a revamp of Auchan’s app design. Our own investigation and the 2.2 stars average rating showed that the app is in need of significant improvements and a re-design. 

Supermarkets and their apps

Majority of retailers release their own apps in order to attract (and keep) more customers. The apps inform users about upcoming promotions, let you collect loyalty points to use for discounts and promos as well as offer on-line shopping services. 

After analyzing the design patterns of some of the applications available on the Polish market we came up with a proposition of adjusting Auchan’s app in terms of interaction, design and user satisfaction. As the company is a global business, with about 110 stores throughout the country and a huge customer community, it seems important that their app design represents the brand accordingly. Here’s how the work on concept design of the UX and UI looked like.

Auchan application – design analysis

The first thing that catches attention is the company website opening inside the application. This causes issues with viewing of particular elements and usability on mobile devices. When designing an app’s interface, we should consider the size of fonts and modules, so that the end user has no problems using it. I also noticed that some of the banners do not work properly, as they don’t redirect to any specific offer. 

The app’s user may feel confused as to whether buttons and elements are clickable or not. The entire app is overloaded with various ads, in the form of regular boxes or pop-ups. I am aware of the fact that it is supposed to contain commercial offers, but in my opinion users get flooded with too much unnecessary information.

The process of placing online orders doesn’t seem to work at all. Namely, when entering the product categories, an empty white popup covers all other content. I decided to organize the functioning of the app focusing on the main sections and propose an interface design that is modern, clean, and easy-to-read.

Competition app analysis

The first step was to analyze the competition’s applications. I focused on applications of the following retailers:

• Tesco,
• Lidl, 
• Carrefour, 
• and local Polish – Biedronka and Zabka.

I noticed that for most of them the main focus is on:

• Promotional products,
• Coupons and loyalty points exchangeable for discount or prizes,
• Product catalog,
• Online shopping and home delivery services,
• Promotional brochure

I decided that these would also be my main focus in my concept design proposal. I started the design with drawing out basic sketches of conceptual views – the low fi wireframes.

Traditionally to itCraft, each new project starts with UX/UI workshop with our client.

Auchan concept design – low-fi wireframes 

My main goal was to create a streamlined user journey inside the application. The main goal was to make moving between sections smooth and natural.

I minimized the amount of content, created a concept lists of the most important info and modules for each given section. I also consulted the design with ios / android developers to make sure the changes are possible to implement.

Technical support is important to rule out development issues as early as possible. Engineering an app is a complex process and UX/UI design should be properly adjusted to enable streamlined development. 

High fidelity wireframes for the Auchan con zcept application

Having drawn out the views, I moved on to creating high fidelity wireframes by turning hand drawings into digital form with Sketch software. The high-level conceptual design is shown in the screenshot below.

I focused on improving the functionality of the product catalog. I introduced more convenient product categorization and filtering. I also added a new feature -the management process of ordering products for home delivery. As competitive applications, like Tesco’s and others, do offer such services in their applications, so it seemed only appropriate to include them in the concept.

In the design process, I wanted to minimize the number of steps required to place an order. I also added a section for management of coupons to be “purchased” for loyalty points awarded for online shopping.

Below is my concept of the User Flow for the product catalog

The goal was also to efficiently guide the user from the app’s home screen to the “order” button. The flow below illustrates this case.

Initial user tests

Having built an interactive prototype, I was able to conduct internal tests with users. I chose people inexperienced with using similar applications. Several important conclusions were drawn in terms of optimizing optimized the app’s interface. User tests are crucial in validating design ideas.

Then, I moved on to the final stage of concept design – the final look & feel of the app’s screens. Analyzing the competition, I knew which direction other brands had taken in their designs. Based on this, I proposed a new, refreshed solution. I incorporated popular trends for creative graphic design and studies of User behaviors. I wanted e.g. our “virtual assistant” to look pleasant, trustworthy and inspiring confidence.

Including Auchan Branding in design concept

I used the color theme of the brand in combination with a lot of white spaces. This was with the intention to introduce a sense of lightness to the interface, as well as to make it easy to find and view products and read content. A very good example of a “clean & clear” interface is the Airbnb app, which provides huge amounts of content while remaining pleasant to the eye. By introducing larger padding and a reasonable amount of white space, we give Users an interface that is clear and easy to use.

Additional aesthetics and consistency of design was introduced by using gray background for product views. I did this both for the category thumbnails and for the detailed view of the product.

It is also worth mentioning that the product “tiles” are presented in two different ways. The default state aggregates the content inside the gray box. The products shown in search results, in turn, show additional information to the right of the photo. These improve and simplify tracking of content in a given section of the application. Most of these seemingly trivial changes significantly affect User satisfaction utilizing the app.

Conclusions from the concept design

I believe that my concept design would increase the number of active daily users. This would translate into increased interest from new customers as well as directly influence sales figures.

Apps are used by billions and as any other aspect of life, they too should be continuously modernized and improved to meet current standards and user needs. Proposing an alternative concept of design can help any business to look at their product from a different perspective, and gives UX/UI designers a chance to share ideas and feedback.

Modern, smart applications accompany us at every step, and turn towards maximum simplification of online purchases and smart communication with users. Simplicity is key to success of B2C apps.