Mobile App for an Online Book Shop

The results

We provided the Client with a modern and user-friendly mobile app for his online shop. It was available on both iOS and Android and had a separate version for tablets. 

Hundreds of thousands of SKUs had been incorporated into a massive catalogue consisting of multiple sub-categories. In order to find an item they need, users can search by several attributes: authors, book titles, and categories. The app also supports visual search: you can point your cameras at a book cover in an offline shop and find it in the catalogue.

The app supports a complex loyalty program. Users can increase their discount percentage as they make more purchases and combine discounts with other offers. In addition to that, they can earn cashback.

This app supports an Instant Apps format. This means you can use an app right until you place an order without installing it on your device.

There are several authentication scenarios in the app: via 8 social networks, a phone number and other options. Users have a number of payment options and 7 delivery options.

Right now we’re still supporting the project, releasing updates once in 2-3 months.

None of the updates we make on the website are random — every one of them has been tested in real life and has proven effective. All we had to do was transfer them into the app. However, right now the opposite is taking place. Whenever we need to add something to the website and look for inspiration, we take a peek into the mobile app.

Boris

Head of Design, Manager

Home screen design

In order to design the home screen of the app we teamed up with our client. First, we asked him what the home screen of the mobile app should look like and put together a brief. Then we drew up the mockups based on that.

The client shared his ideas on the general look of the app while the Surf team implemented their suggestions building on our experience and stadards of mobile development.

As a result, we’ve managed to reflect the whole range of products on the home screen. Namely, the screen displays 15 carousels of 3 different types.

Screen prototypes – more information to the users

In order for the client to understand, whether the app is user-friendly, we create interactive screen prototypes. By looking at it you can see whether the navigation is clear, whether the content is readable, and whether the screen provides enough information.

This stage turned out to be quite useful: we could see that the app freezes because it’s too big and has too many screens. Finally, having tried several prototyping services, we decided on InVision and created interactive prototypes. Since the shop has a giant catalogue consisting of various sub-categories, we focused on making the app run faster and making sure it’s easy to navigate.

When we started this project it was an era of iPhone 5 and Android 4 — the screens were smaller and it took more effort to create a user-friendly mobile design.

Tablet app — for those who like to read

Reading is much more convenient on a tablet compared to a smartphone. That’s why we implemented a tablet app version. It looks different from the smartphone version — you can read all of the information on a single screen without having to scroll. And some screens even look different on tablets vs. smartphones.

Instant apps — use the app without installing it

Instant Apps is a technology provided by Google letting you use a compressed 4 MB mobile app without having to install it on your phone. The app instantly uploads and launches on your phone. You can engage with the app just like you usually would until you reach checkout, at which point you’ll be asked to install the full app.

Surf is one of the 25 studios certified by Google, which lets us try out new technologies even before they become public. That’s why we offered the Client to be among the first ones to implement Instant Apps. 

It wasn’t easy to adequately convert the app into an Instant App: we had to keep the main user scenarios in mind while keeping the app minimalistic. It’s also crucial to thoroughly configure the SEO.

Making the best user experience

There are lots of features making the app comfortable to use. For example, a flypage of each book displays available offers and has a link to a snippet you can read before you make a purchase. 

The app supports a complex loyalty program. Users can increase their discount percentage by making more purchases and combine their discounts with the offers available at the moment. In addition to that you can earn cashback on your purchases. 

We’ve also implemented a “Lucky roulette” — a daily lottery where you can win an additional discount.

Since the app has a massive catalogue consisting of various sub-categories, it’s crucial that users can easily navigate it. For this purpose we’ve implemented a quick search according to several attributes of the content: authors, book titles, and categories. 

The app also has an option of visual search. Whenever you see a book you want in an offline store or on a bookshelf at your friend’s place, you can point your camera at the cover and find it in the catalogue.

The visual search is powered by a neural network SqueezeNet which we had adapted to mobile devices.

Users can log in via any of the 8 social networks available, a phone number, or other options. In addition to that there are 15 payment options and 9 delivery options.

The app is updated once in 2-3 months on both platforms as we continue to extend its functionality.