Food delivery. Mobile apps for clients and couriers, and a web app for company employees.

Project

Viilea
Client: Speednet
Oct 2019 - Mar 2020

Role

Product Designer
UX/UI Designer

Team

Front End Developers
Back End Developers
Business Analyst
Business Owners
Project Manager

Deliveries

UX Research
Wireframes
High-fidelity mockups
Prototypes
Design system
Components library

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

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

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

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

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 interviews

The most exciting part of this project was the opportunity to test our hypotheses through live user interviews. FLIR provided access to five major customers, allowing us to gather valuable feedback. Each user performed three specific tasks, sharing their screens so the UX researcher could observe their actions in real-time. Users actively commented on their thoughts and interactions, offering critical insights.

I documented all feedback on a FigJam board, overlaying sticky notes on the tested screens. Each sticky note color corresponds to a different user, making it easy to track perspectives. After each interview, I updated the designs and prototypes to address user feedback. We conducted three rounds of interviews, refining the product iteratively, and ultimately presented our findings to stakeholders to ensure alignment and transparency.

Design system and component library

As a Product Designer, I recognize the importance of design systems in creating consistent, efficient, and scalable products. To ensure uniformity and flexibility, I utilized Figma variables for all foundational elements, including colors, text styles, screen sizes, and border radii. This approach streamlined updates and maintained consistency across the entire design.

I leveraged auto-layout in Figma to ensure that all components were scalable in both directions, making the designs adaptable to different content and layouts. I used Figma variants for components with states, such as form inputs and buttons or variations between desktop, tablet, and mobile screens. Thanks to this approach, I maintained a structured and efficient system, reducing design redundancy and ensuring a seamless handoff to developers. I optimized collaboration, minimized errors, and ensured a cohesive user experience across all platforms by establishing a robust design system.

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.

Previous project

Next project