Oleg Mayhopar

Delivery Club VK app

Designing food order expirience for the biggest Eastern Europe social network.

Role

Senior designer

Period

Spring 2017


A lot of companies had their pages in VK, and could offer their services right from the social network. As there were no food delivery apps, we quickly created one to provide with better food delivery experience for VK users.

Besides the social network features, VK provides a wide range of multimedia: music, tv-shows, games etc.

The users could watch shows, play games, chat with friends, as well as order food and get notifications about order status right in VK. With this project, we got a chance to engage new users and overhead competitors on the new platform.


BEFORE STARTING

Every VK app is integrated via iframe, so we decided to make it light without relying on additional JS much. Also, we were making it responsive.

My personal intent with this project was to make a design research for upcoming Delivery Club website redesign. I tried to extend a mobile design system by adapting it to bigger screens, relying on existing components.

HOW WE WOULD GET USERS

Both VK and Delivery Club were part of Mail.Ru ecosystem, so getting new users was just a matter of promotion in the right user segments inside VK. Our partner restaurant could get their own version of the app with their menu only, so we could obtain users from their pages as well.

THE FLOW

A typical user flow was: 1) Set an address → 2) Choose a restaurant → 3) Pick items → 4) Inspect a cart → 5) Checkout → 6) Success → 7) Get order status notification.


1. SETTING AN ADDRESS

By default, the users have to type the address, because we assumed that letting the app check their geoposition via native dialog could scare them. Also, they have an option to choose the address on the map.

2. CHOOSE A RESTAURANT

Restaurant list was formed by algorithms on the backend across the product. This way, users saw the best restaurants first. Criteria were rating, delivery time, failure rate etc.

3. RESTRAUNT PAGE AND PICKING ITEMS

Here, we used a big photo of restaurant meals to provide the users with more information about the place. Other information from the mobile app version was available as well.

To navigate the menu, the user could scroll it or reach its specific parts with an index from the left side of the list. The user could add more items to the cart right from the menu list or open an item cart with additional information, and add it from there.

4. INSPECTING THE CART

The product director didn’t want to merge the cart with checkout. He found it too risky at that time. Thus, I coped with the task by adding the cart to the side of the screen, overlaying the content.

Doing so, we made the customer flow more consistent, because we didn’t separate their mental model of forming an order by two different screens. The user could form, and check the cart within a single context.

5. CHECKOUT

Here, we just copied everything from our mobile app checkout. My main focus was to figure out how everything should work on the web forms of the product, and what sizing should we use to stay consistent across all platforms.

6. SUCCESS SCREEN AND NOTIFICATIONS

After placing an order, the user got a success screen with instruction. There are notifications right from the VK interface. This is very handy, especially if the user was watching shows in VK, for example.

7. CREATING DESIGN

The app could be opened on mobile as well. Thus, everything was made responsive matching good old 8 px paradigm.


Oleg Mayhopar

Drop me a letter or send me a message in Telegram