about veggie kit

The Veggie Kit app, developed by the Vegetarian Association of Portugal, aims to promote vegetarian and vegan diets through a 15-challenge program. Users are encouraged to explore and embrace a diet without animal resources by participating in cooking and experiential activities. 

In addition to the challenges, the app offers a variety of supplementary content, including videos and recipes, all curated to actively promote vegetarian and vegan diets. 

Moreover, the app provides direct access to a nutritionist, allowing users to seek clarification on dietary-related questions and ensuring a comprehensive and supportive experience throughout their journey toward a plant-based lifestyle.

initial prompt

new features on
the veggie kit app.

Role
ux designer

Project Specifications
timeline: march to may ’23
duration: 7-8 weeks (non-straight)
client: vegetarian association of portugal

Tools
figma
whiteboard & figjam
hand-drawing
photoshop
illustrator
spotify

initial briefing

'Tip of the Day'
section

to Create a layout on the initial homepage for the display of different 'tips of the day' sequentially.

'Merits' Section
to Design a layout to summarize the impact a person has had in terms of animals saved, water saved, and CO² not emitted.

advanced
search filters

to design a layout for advanced recipe search filters: by recipe duration and difficulty.

push notification
Design a layout for the Push Notification asking if the person wants to change their diet, 'X' days after completing the challenge.

virtual
nutritionist

to add to the menu an external link section for requesting nutritionist support.

search button
to Design a layout for a search button within favorites.

add to cart
to Create an 'Add to Cart' button for ingredients on recipe pages."

grocery Checklist
to Create a layout where individuals can check off items they have already purchased using checkboxes.

kickstart

'hcd progress enhancement'
a.k.a. 'ux surgery'

► The journey kickstarted with an in-depth exploration of the app’s functionalities and user flow, visualized through a windmap analysis of the information architecture. This groundwork facilitated important initial assumptions about potential impacts.

User personas were then pictured to understand the app’s current influence on users’ lives. Subsequently, a second windmap, incorporating new features, laid the foundation for iterative wireframing sessions. These sessions systematically integrated features into the existing user flow to gauge incremental impact.

The culmination involved developing ‘medium’ fidelity prototypes, aligning with the app’s existent design system. These prototypes, handed over to the ui designer, bridged the conceptualization and implementation phases.

context

how is the current situation?

To gain a deeper understanding of the app’s semantics, a contextual windmap was created. This map illustrates the arrangement of current features and how all the ‘alleys’ are organized within various user flows.

It was clear that both home page and footer menu have a big significance on the app’s architecture, organizing different features like ‘recipes’ (‘receitas’), video content (‘videos em destaque’) and specially the ’15-day challenge” (‘desafio de 15 dias’) have the most importance in the hierarchy of content.  

user research

who is the user?

the user research process encompassed two personas: 

a) The first persona was derived from the existing marketing plan, providing insights into the established target audience – before the app was created and developed. 

b) The third persona was developed by me, integrating insights from crafting the app’s information architecture and incorporating my assumptions – before the addition of new features. 

This bi-fold approach ensured a comprehensive understanding of user dynamics, blending established data, real-time metrics, and informed assumptions to guide UX decisions effectively.

luísa

20 years old student in coimbra – portugal.

frustrations
1. finds the current cost of living too overwhelming to pursue her career goals.
2. is extremely stressed out by climate crisis.
3. overall, feels that her mental health had been declining over the past few years and puts a lot of effort to take care of her.

interests
1. online scrolling
2. game videos
3. outdoor activities

francisco

29 yo phD student and part time collaborator at an investigation centre for human sciences in lisbon – portugal.

frustrations
1. he is deeply concerned about climate change and the environmental impact of food production.
2. finds the variety of plant-based ingredients overwhelming and sometimes confusing
3. with a busy work schedule, Francisco struggles to find the time to research vegan recipes, nutritional information, and sustainability practices

goals
1. wants to learn more about veganism, discover new plant-based recipes, and experiment with cooking techniques to make flavorful and satisfying meals.
2. being environmentally conscious, Francisco aims to choose ingredients and products with minimal environmental impact.

pain point I
student luísa feels overwhelmed by external societal problems, including the climate crisis.

pain point II
busy professional francisco struggles to find time for meal planning and healthy cooking, leading to a reliance on quick but less nutritious food options.

research

competitor analysis

After analyzing the types of users at various stages of app development, I opted to examine other apps with similar objectives to Veggie Kit.

The goal was to identify apps aligning with the ultimate persona (francisco) and understand how comparable features are implemented in these applications.

themed colors

harmonious green hues evoke a fresh and vibrant atmosphere, mirroring the vitality and wholesome essence of plant-based living in proveg.

highlighted imagery

highlighted imagery in the app emphasizes these green tones, showcasing a visually cohesive and inviting environment that aligns with the app's focus on vegetarian living

complex yet usable

offers intricate advanced features, including advanced recipe filtering, personalized meal planning, and a supportive community.

action at a secondary plan

The app's design places secondary action buttons in the backdrop of vibrant content, challenging users with a deliberate departure from intuitive placement.

define + ideate

to create an user profile page

inspired by the previous competitor analysis, it seemed important to heighten user engagement by converting the existent standard settings section into an interactive and customized user area.

personalization
would allow users to create personalized profiles, enabling the app to tailor content and recommendations based on individual preferences, behaviors, and history.

engagement
would Foster a sense of belonging and engagement by enabling user to manage their info, stats and progress.

progress tracking
would facilitate goal tracking and achievement recognition (ex: how much co² was saved during the 15-day challenge), enhancing satisfaction and motivation .

enhanced
functionality

would allow additional features and functionalities tied to user accounts, such as bookmarked content (recipe and videos).

► some wireframes were laid down to figure out how the new user are would include a relationship with the user and increment the ‘settings’ rea.

'grocery checklist' + add to 'cart'

in my exploration of the app’s diverse recipes, it was added a shopping checklist facilitate the easy access to them.

drawing inspiration from the intuitive design of google keep, it was intended to effortlessly compile ingredient lists within the app when users visit the recipes feature. this notepad-style feature streamlines a journey from planning delicious meals to navigating the grocery store.

► some wireframes were laid down to get to know how the shopping checklist would be translated from the google keep layout.

merits section

This section not only serves as a means to gauge progress through insightful metrics like carbon and animal footprints but also plays a crucial role in reinforcing the previously-called sense of belonging and consequently user retention.

As a user, having this additional layer within the app not only enhances my ability to track personal sustainability milestones but also deepens my connection to the vegetarian community that shares common values and goals. 

Imagine watching short reels that visually capture the evolving progress charts of reduced carbon footprint and saved animals over time. 

► wireframes were developed to know how the merits section would be integrated within the new user area and later on the home f-menu.

platform structure
(new information architecture)

In my ongoing efforts to refine the user experience, it was laid down a new information architecture windmap for veggie kit with the increment of the new features. A significant aspect of this update involves the incorporation of a dynamic user area (highlighted in green), consolidating functionalities from the previous settings section. 

design

wifeframes 'ux surgery'

In the iterative process of enhancing the app’s functionality, a pivotal step was undertaken, which i had fun on calling it “UX Surgery.” This strategic approach aimed to ensure a harmonious integration of the new features into the familiar user journey, promoting clarity and efficiency in the overall app interaction.

This basically involved the creation of wireframes for the new features and their integration within other wireframes the existing user flow. By cutting and joining these wireframes, a cohesive and seamless user experience was crafted.

medium-fidelity prototypes

dddd
testing

affinity mapping post-usability test

Interaction

Sliding interaction works better once the 360º demand finger action and enhances conversions

Side menu should be sticky to be available all along the navigation to enhance conversions

 

Gestalt

Red elements are meant to induce action and orientation (proximity and similarity)

Round edged-squares are meant to induce stay and interaction

Accessibility

An option to adapt the menu side to the left handed should be included

The colour contrats works in terms of the WebAim

The sliding menu helps to reduce cognitive overload

Navigation

The time until conversions seems to depend on the interaction with the 360º panos

The navigations presents itself as easier when using the sliding arrows

Architecture with two (main) pages enhance conversions and user interaction with the 360ºs

high-fidelity prototypes

by joana magalhães (interaction designer)

home pages ►
first visit, during and after the 15-day challenge.

home pages
first visit, during and after the 15-day challenge.

user profile ►
a new sense of belonging is now present in the user flow.

user profile ▼
a new sense of belonging is now present in the user flow.

recipes flow ►
now it is possible to point down which ingredients are needed to learn new vegetarian recipes.

recipes flow ▼
now it is possible to point down which ingredients are needed to learn new vegetarian recipes.

advanced filters ►
in response to the exponentially growing number of new recipes, it is possible to funnel the ones the users prefer.

advanced filters ▼
in response to the exponentially growing number of new recipes, it is possible to funnel the ones the users prefer.

final considerations

next steps

The next steps in the development process involve a commitment to continuous improvement through consistent iteration driven by data analytics and user feedback. By closely monitoring user interactions and analyzing relevant data, we aim to make informed refinements that enhance the overall user experience. This iterative approach ensures that the app remains responsive to user needs and preferences, fostering a dynamic and user-centric environment.

Furthermore, our next goal is to introduce a gaming feature within the 15-day challenge, strategically designed to potentiate user engagement. This gamification element aims to make the challenge more interactive, enjoyable, and rewarding. Users will be encouraged to participate actively, fostering a sense of accomplishment and friendly competition. By incorporating gaming dynamics, we aim to not only enhance user engagement but also make the 15-day challenge a more immersive and enjoyable experience for our users.

what i learned

In the evolution of our vegetarian starter kit app, a profound insight emerged – the concept of the app as a living organism, mirroring the very planet it strives to save. Much like our ecosystem constantly adapts and evolves, the app undergoes a continuous transformation. The introduction of features, the user-centric design, and the iterative process all contribute to its dynamic nature, akin to the cycles of life within our planet.

Just as the app responds to user interactions, adapts to their needs, and evolves with each introduced feature, it becomes a living, breathing entity. The comparison draws a parallel between the app’s growth and the interconnectedness of life on Earth. This perspective instills a sense of responsibility and care, fostering a unique user-app relationship that transcends a mere tool – it becomes a companion in the collective journey towards sustainability, much like a living organism coexisting with its environment.

other projects