Viilea

Delivery App

Viilea

Viilea is part of a revolutionary foodservice solution from Helsinki, Finland. Their customers order groceries online, and couriers deliver them to customers' Viilea boxes where they can pick them up when it suits them best.

Viilea food mailbox combines features of a mailbox and a fridge. It is designed to receive groceries and other goods purchased online. It's placed outdoors next to a garage or front door, and the courier delivers shopping while customers are busy doing other things.


My role

As a product designer in this project, I was responsible for User Experience Design, User Interface Design, and Interaction Design. I worked on this project with a group of developers, a project manager, and product owners. My first step was to design the user experience, including user journeys and user flows, intuitive for all user types of these three applications. The second step was to create a modern, minimalistic and elegant user interface.


Challenges

Finding the solution

Our client was looking for a solution to connect their customer and delivery couriers in an easy and smooth process. Necessary was also a tool to control and manage the whole process.

After workshops with the client, we decided that the best solution would be to build three separate applications - a mobile application for the customers, a mobile application for the delivery couriers, and a web application for back-office employees.

Mobile app for customers

  • Mobile app for customers
    Mobile app for customers
    Mobile app for customers
  • Mobile app for customers
    Mobile app for customers
    Mobile app for customers
  • Mobile app for customers
    Mobile app for customers
    Mobile app for customers

After onboarding and registration, the customer logs in with his phone number and pin code. After that, he can see a list of his boxes. Every customer can have more than one box. His boxes are registered to his phone number by a Viilea Back-office employee.

The customer can connect to the box via Bluetooth or scan a QR code on the Viilea Box back. After that, he can choose which box compartment to open and collect the package.

On the screen with box details, the customer can edit the box name, address and box GPS location and manage additional users allowed to collect packages.

Mobile app for couriers

  • Mobile app for couriers
    Mobile app for couriers
    Mobile app for couriers
  • Mobile app for couriers
    Mobile app for couriers
    Mobile app for couriers

The back-office employees manage all couriers, and there is no registration - a courier logs in with his phone number and PIN code received by SMS.

After he's logged in, he can see the list of orders with addresses, GPS location, and an optional photo and instructions where the box is located (i.e., behind the garage).

Courier can connect with a box by Bluetooth or by scanning a QR code on the back of the box. After that, he can choose which box compartment to open and leave the package. After closing the door, the app sends an automatic notification to the box owner.

Back-office web application

  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application
  • Back-office web application

We've designed and developed the back-office application for Viilea employees and delivery companies. All users log in with a username and password.

Back-office employees can manage customers, their boxes, and payments. They can add and remove delivery and grocery companies and edit their details.

Delivery companies can manage orders and couriers, and they can assign each delivery to a chosen courier. They can also control the application access of their office workers.


Workflow

Initial meeting and user research

We've organized the initial meeting online, where we've gathered information about the client's needs. A few days later, we did the user research with my team based on the competition observations in other countries, interviews with owners, analyzing the business model, considering a potential user lifestyle and our own needs, and how we would use it. Based on this research, we've developed a few personas.

User Experience Design

User Experience Design
User Experience Design
User Experience Design

In the next step, we've established a journey mapping, and user flows. I've done low-fidelity wireframes, tested user flows, gathered and feedback, and tried it again.

User Interface Design

Then I've done high fidelity designs and prototypes, interaction designs, and micro-animations. A design system with all components, a style guide, color palette typography, icons, and simple outline illustrations was a part of the design process.


Deliveries

  • User research
  • Journey Mapping
  • Sketching
  • Wireframing
  • User Flows
  • High fidelity designs
  • Clickable prototypes
  • Interaction design
  • Color palette
  • Typography
  • Style guide
  • Iconography