Designing
the Vimini App
Overview
..
..
..
..
..
..
..
Market
B2C, B2B
My role
Product & interaction design
Time frame
3 weeks
Tools
Miro, Figma
Setting the scene - the product
Vimini is a project developed by Enactus Padova. It aims to reduce food waste by providing education on food storage and ideas for the at-home processing of food scraps and leftovers through a chatbot and a curated feed of tips and recipes.
The challenge
How might we
help young people settling into adulthood reduce their household food waste and reinforce their connection to local food businesses and food sources?
.png)
The task
To help with defining the product and design mid-, and high-fidelity wireframes.
The team
I was brought in as a UX/UI designer and collaborated with the project and brand managers.
Defining the product
Bringing structure to ideation
Based on a survey conducted by the Enactus team
* Excel has two user journeys, as they are significantly different in different parts of the product
Defining user pain points
To find out what to improve, I:
-
prepared visual user flow of the export I was optimising,
-
matched reported user pain points to the right moments on the journey,
-
created a How Might We for each pain point,
-
ideated on possible solutions,
-
got feedback every step of the way to make sure I was on track.
Here is the result!
Prioritising
To ensure I was addressing the right issues, I turned user goals into Jobs To Be Done and matched them with the pain points and their corresponding HMWs. Then prioritised them based on user feedback and potential workflow disruptions.
Competitive analysis
I also looked into different products where users might export large volumes of data such as Shopify, Figma, Recurly, and White Space. It gave me a better understanding of handling the pain points I defined and provided me with ideas for easy and proven UI and interaction design practices.
The journey to better UX
Ideation #1
An organized discovery phase allowed me to smoothly cue Sophia, who joined me as the senior designer, into the project and start ideating.
-
We classified all ideas by whether they helped to find exports or improved notifying (or both),
-
created low-fidelity drawings and frames for all of them and determined what pain points each idea solved,
-
narrowed them down to 3 - basing the decision on the design critique feedback about scalability, budget and answering HMWs.
Refinement
After gathering feedback, we continued with the toast idea. Both export page, and email notifications were dropped as they did not sufficiently fulfil the needs of our users and were too complex for development. But we still needed a way to make finding the exports easier, leading us back to brainstorming.
Keep calm and move on
Ideation #2
In the first round of ideation, we learned some of the user pain points were out of scope, so I analysed the feedback and reduced them from 8 to 3. The ideation that followed was messy but effective - so to avoid the chaos and sum it all up we classified all new (and some old) ideas as 'Design' or 'Not Design'.
This time my focus was on:
indication of export progress, UX copy, collapsable dropdown and banner/toast.
While creating those wireframes, I considered developer feedback and asked for their input to make sure my ideas were within scope. Leading me towards smaller but impactful changes.
Progress indication
Information design on the button
We decided to improve the dropdown and UX copy, shelving modal and tabs in the process, because:
-
For the majority of customers, the export will be fast (within seconds), so toast might be less annoying/interruptive than modal.
-
Using a delete icon instead of a cross to distinguish between finally deleting and just removing it.
-
Ditching download history to manage user expectations on other highly requested features.
With those decisions set, I cleaned up the dropdown design options and prepared button and layout alterations.
Results
Presentation ready solution
The result was a high-fidelity automatic demo prototype and a hi-fi clickable prototype with error pages in case the user went too far into the app.
I also prepare a hand-off file for the Enactus team. With fonts, colours and a start of a design system, they will be able to continue designing Vimini in the future.
Final screens
The demo prototype
The self-navigating prototype was used for the project's business pitch during the annual National Competition for Enactus Italy. It's meant to be quick, dynamic and showcase the most important parts of the app, for both the users and investors.
Reflection
Lessons learned
Write things down
This project taught me to always ask questions and check in with people as soon as I have a doubt. A question about FE to BE connections seemed very complex to me but was a simple 1-minute explanation for the person who worked on it.
Moderating workshops
I also learned how much I enjoy teamwork in design. Bouncing my ideas off someone else was very fun and made the whole project very fun to work on.