Mobile App Design for a Hungarian Food Delivery and Pickup Company

Pakk is a mobile application designed for Hungarian customers to help them explore local shops, check their products and services, and order custom packages during the Coronavirus outbreak.

The final mobile app designs for Pakk in mockups.

Client

Pakk

Industry

Non-profit

Service

UI/UX Design
+ UX Research

Team Setup

1 Researcher
+ 1 Designer

Timeline

2 Weeks

Goal

This pro-bono's goal was to create a brand-new interface for the Pakk mobile app, allowing users to explore local shops, check products and services, and order custom packages, particularly catering to the needs arising during the Coronavirus outbreak.

Challenge

The short timeframe presented us with many challenges, such as capture the brand essence and adapting to unique lockdown shopping behaviors.

Outcome

The joint effort resulted in a well-designed and user-friendly digital product in line with Pakk's vision and brand.

150
UI Elements
50
Screens
10
Usability tests

Project Timeline

Timeline of the project including: discovery, usability testing and interviews, prototyping and iterations, UI design and handover.
01

Discovery

How we started

  • ✦ We held a mission-vision workshop to define Pakk as a brand.
  • ✦ We facilitated a value selection workshop that helped us understand how Pakk wants to be perceived by its users.
  • ✦ We also created an impact-effort matrix to estimate which features are feasible to launch with the first release and what can be done later.
The outcome of the mission-vision workshop using the impact effort matrix.
The impact-effort matrix created on the workshop
02

Usability Testing and Interviews

We recruited a few participants for the usability testing, who matched the clients’ target audience profile. Our UX researcher conducted several interviews to discover the habits and peculiarities of shopping behaviour during the lockdown.

Changes we’ve done after the usability testing

1. We replaced the distance estimate with the average walking time. It turned out to be a helpful switch since many of our test participants preferred to take a walk instead of using public transportation.

The new search result page with distance estimate.

2. One of the encountered problems was the switch between the map and the search results list view. After numerous different solutions, we decided to use a floating CTA, which performed well during the tests.

We added a floating CTA to make easier the switch between the map and the search results.
03

UI Design

We jumped into the UI design phase in the middle of the second week. Our UX experts proposed several approaches to match the values defined during the branding session. The Pakk team wanted a product UI to reflect the brand’s individuality. This is why the complementary red color became the background color in the final version.

The base of the UI design featuring colors and fonts that reflect Pakk's individuality.
04

Handover

In two weeks, our UX team iterated the product’s prototype four times. We’ve created more than 150 UI elements, 50 screens and conducted ten usability tests. All in all, we can proudly say our UX experts designed a great digital product together with the Pakk team.

Multiple screen designs in mockups showcasing multiple things such as the map, search results, and individual shop pages.

In just 2 weeks we had several back-and-forths about the design, had research with a focus group, evaluation and great ideas and insights about the whole project, from what we really wanted to know what the customer would like to see and everything in between. We worked a lot, had a lot of fun, and got some really precious experience along the way. It is always a pleasure to work with dedicated professionals.

Balázs Araczky
Product Manager, Pakk