An App for Beauty Stores

Design — the face of a beauty app

We based the app design on the brand book and teamed up with the Client’s designer: he drew the screen concepts, and we adjusted the client’s vision to specifics of mobile development and the insights we’ve accumulated over the years. 

As a result, we built a minimalistic app in brand colors of the company, aligned with the website.

Each flypage shows a large image of the selected product. The first screen is ‘airy’ and shows the minimum information needed — nothing gets the user distracted from a nice picture. Products can be added to the cart in a single tap.

Unique design for custom brands

The Client made unique deals with 4 brands — Dior, Dior Backstage, Hermes, and Chanel. The brands offer exclusive products at better prices. In return their flypages and catalogues are designed differently: a brand catalogue shows extra banners and categories while a flypage must show a big brand logo. In addition to that, the sections must have their design updated regularly.

For the design to be accurate without any need to change it constantly in the app, we decided to ‘pull up’ these sections from the website. For this purpose, we used a web view — a component used to integrate a web page into an app. Here’s how it works: whenever users tap on a custom brand in the catalogue, they open a web view of this section. 

If users then tap on a product, they open a flypage which is once again a part of the app. Here’s what it looks like under the hood: whenever a product is picked, the app ‘intercepts’ the tap, searches for the product in the main catalogue and shows a native flypage. The product can then be added to the cart. Overall, users don’t see any difference between custom brand sections and the rest of the app except that the screens take a bit more time to load.

All essentials on the home screen

We took everything a user might need to make quicker orders, brand selections, new arrivals and main product categories, and put it all on the home screen. We’ve also added colorful banners with special offers. Users can tap on them to go to a specific section, flypage or selection (e.g., Top 5 sunscreens for summer). 

We’ve also decided users might find it useful to see the status of their current order on the home screen. 

Another feature we’ve implemented is a ‘smart’ search — type in the first few letters and the app will show suggestions or specific brands under the search bar. Say, you type in ‘mascara’. The app will instantly show you mascaras from the catalogue in addition to all the brands producing mascaras, meaning you can browse through a specific brand of mascara.

Ordering procedure

An easy checkout experience is one of the main things in a mobile online shop. We made sure that in the app products can be added to the cart quickly — with a single tap. Users also have a few delivery options — pickup from a parcel locker or any of the stores and home delivery. 

We’ve also added a ‘postponed’ cart. It’s a place where users can put an out-of-stock product they want to order as soon as it’s in stock again. The moment the product becomes available, users receive notifications and can immediately place their orders.

Loyalty program

The client had already had a complex loyalty program before we started: there were 2 types of cards — a regular one with a 5% discount and a gold one with a discount that can go up to 25%. 

In addition to that, a regular card has a dynamic discount system with the discount rate growing the more items are purchased: as soon as the total purchase amount reaches $133, customers can swap their regular cards for the gold ones.

All of that had to be considered when we built the app. We integrated it with the loyalty program and added a digital loyalty card — this way customers can save their cards in the user accounts, getting rid of the physical cards completely.

We’ve also added a couple of other handy features: once their cards are added to the app, users can see the whole purchase history in their accounts. This feature is useful if users need to do a quick search for a product they’ve ordered before.

Personal recommendations and notifications

We’ve integrated the app with marketing platform that analyzes your target audience and figures out the best way to interact with them. Based on the analysis, it puts together the personal suggestions users see on their home screens and sends push notifications with personal offers.

Easy search for promos and client days

The company regularly brings in new offers and holds client days — blogger meetups and beauty days where customers can try out new products of a certain brand. Client days are scheduled in specific stores. That’s why we needed to let users not only check out the list of all upcoming client days but pick a store most convenient for them to visit on a client day. 

With this in mind, we implemented a smart map and a block with offers and client days. Users can find a store on the map, tap on it and see what offers and client days are available there.

Another way to use this search is to tap on an offer or a client day and see a list of corresponding stores. 

In addition to that we’ve implemented great filtering options for special offers — users can pick a city, a manufacturer, a type of offer or a specific brand. For example, they can search for offers specifically on Dior products or for offers available in their city.