The Client is a chain of beauty stores. It owns about 150 offline stores.
To create a mobile online shop
The Client already had an online shop. However, only a web version was effective. Any purchase from a smartphone had to be made via a mobile version of the website, which did not result in a great conversion rate. Therefore, the company felt a need to create a mobile app for his online shop to take their mobile sales up to the next level.
Surf built a native app and integrated it with both the website and the loyalty system.
The app has a well-organized catalogue with products grouped into several major categories and classified according to their brands. The home screen shows new arrivals, exclusive offers, bestsellers, and special offers.
There’s also a system providing suggestions based on user preferences and a smart search feature. The map can show you the nearest store, the one with the unique offer that the user needs or the one with an upcoming client day.
The app provides users with several delivery options — pickup from a store, home delivery or delivery to a parcel locker.
More about project
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 Backprod, 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.
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.
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.