Agro-Olympics
Nature + Fun + Care
About the Agro-Olympics
Agro-olympics is a multi-site and multi-date volunteer program in which, through gamification, healthy coexistence and a spirit of social and environmental regeneration, people and communities are linked with agroecological spaces and projects with the purpose of making these regenerative practices known and promoted, emphasizing the soil care through direct action in the field. This activity takes place once per year.
Problem Statement
Design the landing page for the sustainable agriculture organization "Agro-Olympics", which aims to integrate sport and care for the environment, in which users have greater motivation to participate in these activities, facilitating informative, descriptive tools and registration processes.
Challenge
Create a clear and friendly web page developed from the need to publicize the concept of Agro-Olympics, and invite users to participate, and become involved in activities to care for the earth and the environment.
The Client
Contamimantes Anónimos
Category
Sustainable Agriculture
My Role
UX/UI Designer
Tools
Design Process
For the developing of this case study, we implemented the following steps:
Discover
Design Thinking
Define
Prototype
Test
• Research
• Interview
• Survey
• User Persona
• Empathy Map
• Journey Map
• User Flow
• Card Sorting
• Crazy 8
• Information Architecture
• Wireframes
• Visual Design
• Usability Testing
• Feedback
1. Discover Phase
Qualitative & Quantitative Research
To achieve the objectives of the research, one must start by achieving a better understanding of the users. It is for this reason that we decided to implement the research tools: surveys and in-depth interviews. We performed an online survey using Google forms to observe any pattern in the interest or what users may want. We had a total of 32 participants responding the survey. Below you can see some results from the survey:
Are gender female
66.1%
29.1%
Express that the previous registration process was confusing
Are interested in participate in the Agro-Olympics
71.9%
81.3%
Would like to participate in physical activities in an ecological context in order to care for and learn from the environment.
5 in-depth interviews were conducted, some of the users had already participated as agro-sportsmen, others as facilitators, and others as new users on the subject of agro-ecology interested in participating for the first time. Below you can see some user quotes from the interview that express their perspective and experience:
"I would like to have things or visuals to be attracted to green activities"
"I have investigated the events in which I have participated through Facebook groups and on TikTok a little but there are also there, or through contacts"
"I consider that social networks or transmitting the event by word of mouth is the best way to publicize the Agro-Olympics; I am willing to do it if I feel convinced of the project; I would share photos or activities"
Based on the results from the in-depth interviews, the team decide that the registration form may not be necessary, giving a new perspective to the design.
2. Define Phase
After obtaining the qualitative and quantitative research findings, we identified 3 types of user persona, however we did focus on a single user persona, since the client's objective was to attract this specific persona. This is how we managed to continue with the research process, focusing the designs according to the personality and interests of our "User persona".
User Persona
Spiritual
Sustainability
Security
Coexistence
Sportif
¡Hello! My name is Andrea, I'm 29 years old, I am Mexican and my passion, is the preservation and dissemination of agro-ecological techniques. I like to stay informed and actively participate in activities related to sustainable agro-ecology. Unfortunately, I only finds out about these activities through his friends.
Goals
• Take care of the environment
• Have fun while learning participate in community
• Learn and disseminate eco-technical techniques
"What comes from the earth must return to the earth" R.G.
Applications Friendly
.png){kind=logo}
Expectations & Needs
• Seeks to support eco-technical activities, in order to acquire and exchange information that helps preserve ancestral agricultural practices.
• She likes to dedicate time to everything that is related to taking care of the environment and, is excited by the idea of learning through activities.
Pain Points & Frustrations
• Change location (headquarters) because she can't find people in the place through the associated web page.
• Does not find out in time about the events in the associate page.
• Don't feel safe providing so much personal data.
• Long and repetitive registration forms in order to subscribe in other pages.
• She hates that they associate agro-ecological practices with the government.
Empathy Map
This process helps us to empathize better with users necessitates and actions. This helps to sensitizes us and connect better with the target audience gaining perspective on their thoughts and feelings.
Noseaswaste, biodegradable podcast (survey)
Radio Nopal
Discussion groups
Hears
Grow vegetables for self-consumption, with the confidence of the conscious ecological process.
A better world for the next generations
Feels
Social networks (Instragram, Facebook, etc) related to the topic, vegan cooking channels/plants.
Buy brands committed to the environment such as “Monstruo de agua” beer
Sees
They communicate their knowledge about conservation and agroecology, in favor of the environment. They give sensitization workshops towards contact with nature.
Say
User Journey
We made a visual representation of all the path that our user persona will have while reaching their goal. This path allow us to identify the touchpoints of our website and where we may need to improve.
3. Ideate Phase
User Flow
Was created the User flow in order to represent the path taken by the user on the App in order to complete the task. It starts from the entry point through a set of steps towards a final action, in this case to suscribe or participate in the Agro-olympics.
Web search
Input
Home
Landing Page
Banner
What are A-O?
Headquarters
About Us
What is a headquarter?
Who we are
Mision
See headquarter
FAQ
Frequent Questions
Contact
Who we are?
Headquarters
Activities
Are you interested?
Exit
No
Suscribe to News
Yes
Formulary
Register headquarter?
No
Register Successful
Yes
Vision
Videos
Receive Updates
Agroecological principles
More Data
Input
Footer
Suscription Succesful
According to the findings in the investigation where the users stated that the registration processes were confusing and unnecessary, it was determined through a meeting with the client that the focus of the registration processes would become a subscription to the Agro-olympics page. This new core task will allow the user to receive information and updates of the upcoming activities, which is their main goal.
Crazy 8
This new idea of creating the subscription process, led us to the implementation of a crazy 8 that would favor us in the rapid creation of ideas through sketches involving several team members.
Alternative Suscribe Button
Suscribe Button in Nav Bar
Idea 1
Idea 2
Pop Up Card
Idea 3
Pop Up Card with Check Box
A/B Testing
After performing the Crazy 8 which allows us to sketch some alternative of solutions, we consider implementing the A/B testing which allows us to compare variations of the same web page to determine in which variation users will generate the best outcomes.
Option A
Option B
Option C
71.4%
Would you like to sign up for notifications on the Agro-Olympics with a bottom in the principal menu.
57.1%
Chose the option A as the clearer screen to receive information about the Agro-Olympics
71.4%
Choose the option A as principal screen they would prefer to see when visiting the page.
Card Sorting
On the other hand, Card sorting was done to categorize all the features under different sections, helping us to estructure the information architecture of the project.
Landing Page
About the company
Suscribe
Receive Information
Headquarters
About headquarter
Register
Receive information
About Us
Who we are
Mision
FAQ
Questions. & Answ.
Contact
Vision
Value
Sitemap
The card sorting results help us to refined to fit the goals on the project by classifying some of the features, and in this way we can built a visual representation of the structure of the website.
.png)
4. Design Phase
The selection of the color palette has been created through the inspiration of the moodboard, which reflected the personality of the design and the psychology of color in this current case earth colors and gradients of green that refer to the natural context. Following that, we did multiple test combinations to meet AAA accessibility standards.
Following we made two iterations of style guide with different types of combinations, the options were presented to the client, and he finally made the following choice:
Style Tyle
Font
Roboto
a
A
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
Logo
Color Palette
#E7C336
#D77244
#8A401E
#255346
#118A7D
Some Icons
Some Illustrations
Prototype
Finally, we sketch the low wireframes, make some corrections and modifications according to the results of the usability test, and start building the high wireframes with the tool Figma. Below you can see some of our principal screens
Clickable to see prototype
5. Test Phase
Usability Testing
After having the prototype we carried out a usability test on 5 users to evaluate how clear and friendly was the experience while using the website Contaminantes Anónimos which was the way for users to inscribe in sustainable activities. 2 of the users were linked in some way with the Agro-Olympics and 3 of them are regular users between the ages of 20 and 40.
The test was conducted through Google meets were the participants were given the following task while we observe how they navigate through the prototype.
Contaminantes Anonimos page
Agro-Olympics proposal page
Learnings & Next Steps
As a UXUI designer this project taught me great lessons, understanding that in order to carry out a successful research and design process, you must start by clearly and deeply understanding your theme, soak up the meaning and empathize as users would, especially when it comes to the theme is loaded with a symbolic component for them. Additionally, understand that existing design systems can be modified, and in company with the client be able to make modifications that become new positive proposals.
As next steps, it is recommended to continue working on the development of the prototype in a responsive way, carrying out the mobile design, and working on the quality of the photographs and the design.
Thank you for watching!
