audit & re-design
Vytal App
Re-Design
Strategy and UX/UI Design
TIMELINE
2 weeks
TOOLS
Figma, Miro, Notion
— Context
In Germany, 350.000 tons of plastic per year coming from single use plastic and to-go packaging are thrown away. Vytal is a start-up that answer that issue. They offer a deposit-free reusable packaging system for any take away food and drinks via their network of partner.
I use their product since years, as I am conscious of the environment. Nevertheless, as a user I find Vytal's app difficult to navigate, which inspired me to conduct a redesign of some key features.
Disclaimer: I am not affiliated with Vytal in any capacity.
— Problem
I focused on the ordering and returning process, which are in my opinion the building block of Vytal's business to be successful with users.
CHALLENGE
How to ensure both ordering with & returning food container is fast and convenient?
— Solution
After analysing the existing app and discovering customer pain points, I redesigned three flows for the ordering and returning process.
1- Search for a pizza to pick-up near you
2- Search for a pizza to deliver at work
3- Search where to return a pizza box
— Research
Heuristic evaluation
To evaluate the app, I conducted an audit of the current app, focusing on 3 user flows:
Search via delivery services
Search to pick-up
How to return
The main issues I found are:
Lack of consistency:
The search and filtering process are not streamlined between the pages
Information:
The necessary information is not displayed consistently throughout the journey
Visibility:
The users are not guided through the pages, by indicating where and what is next
usability study
Then, I wanted to see how people used the current app. I interviewed 5 participants aged 15-50 living in large cities - this demographic is in my opinion the target audience of Vytal. My goal was to learn about the process of searching and returning food with Vytal containers on the app.
Some of the tasks included:
Searching for a nearby restaurant to pick up food
Search for a place where to order via delivery
Return the bowl
insights
🎯 Mission
Users need to understand straight when landing on the app what Vytal allows them to do.
📋 Process
Users need to easily understand how to order food with reusable container and how to return them.
🔍 Search
Users need to experience a smooth and trustworthy search experience when looking for partners restaurant / cafés.
🧭 Navigation
Users need to find the information they need easily and rapidly.
— Concept
Information architecture (IA)
Most users had trouble finding the information they needed. I first rebuilt the current IA:
Current IA
Main changes in the new IA:
Condensed “Map” and “Search” into “Partners" due to duplicated content.
Added categories “Pick-up”, “Delivery” and “Return” into “Partner” and “Codes” to clarify the search process.
Created 2 cards preview for partners: Pick-up/Delivery and Return, which all link to the same full page.
New IA
The new information architecture aims at increasing the visibility of the app’s key features, easing the user’s understanding of the processes and overall at improving the navigation.
initial wireframes
re-design - key elements
Here is the before/after of the main screens for the ordering and returning process, from the current app to my proposed re-design.
# Search interface
# Partner card
# Partner card preview
# Return interface
# Codes
— Testing
I tested the prototype with 5 participants aged 18-40 living in Berlin and Köln. The goal was to test the usability of the search process on the prototype, specifically evaluate if the participants could search for food to pick up and to deliver, and where to return the containers. I focused on measuring the learnability and efficiency for first time users.
Success rate
100%
Of tasks are completed successfully
Time on task
-51%
Average drop in seconds, compared to the initial test
— Restrospect
I enjoyed working on this project, as Vytal is a company I support and want to see growing. During this project, I learned
To conduct a Heuristic evaluation.
To design based on my own assumptions regarding technical restrictions.
To recreate an existing UI kit and adapt it, so it answers new goals.
