Author Name: : Alberto Yago

Date: : August 2021

Location: : Remote/Spain

Skills: : UX Research, UI Design, Wireframing, Prototyping, Testing

app, ui, ux

Huertapp 2


HuertAPP is a mobile application aimed at revolutionizing the way local farmers and eco-conscious consumers connect and trade. The platform empowers farmers to sell fresh, chemical-free produce directly to nearby buyers, eliminating middlemen and ensuring fair prices.


The concept stems from a personal insight — having grown up in a farming family, I’ve witnessed the systemic disadvantages small producers face. With this project, I wanted to merge technology and empathy to build a practical, accessible solution that supports sustainable agriculture and healthier lifestyles.

The iterative Process:

1

Empathise

2

Define

3

Ideate

4

Prototype

5

Test

1. Project Overview

Project Duration

January 2021 – February 2021

The Product

HuertAPP is a mobile platform that connects local farmers with environmentally conscious consumers, enabling direct sales of locally grown, chemical-free produce without intermediaries. The goal is to empower small producers and support healthy consumption habits.

The Problem

Farmers are often underpaid due to intermediary chains and lack direct access to customers. Additionally, consumers lack accessible ways to buy healthy and local food directly from producers.

The Goal

Design a mobile application that facilitates direct communication and transactions between farmers and buyers, ensuring fair prices and local economic empowerment.

My Role

UX/UI Designer leading the entire process from research to high-fidelity prototype.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

2. Understanding the User

User Research: summary

I conducted 10 user interviews (5 farmers and 5 eco-conscious buyers) and distributed complementary surveys to understand motivations, needs, and blockers. Farmers were mainly concerned with having more control over pricing, reducing dependence on middlemen, and reaching new buyers without tech barriers.

 

Buyers, on the other hand, were motivated by access to trustworthy, chemical-free food sources, grown locally and offered at reasonable prices. Many felt frustration with the lack of a simple way to find and connect with farmers in their own area.

This dual perspective validated the need for a mobile platform like HuertAPP, provided it remained simple, intuitive, and flexible for both user types.

User Research: pain points

1

Limited Access to Direct Sales

Small farmers have very limited opportunities to sell directly to end consumers. They depend on intermediaries and have almost no digital presence.

2

Low Profit Margins

The high dependence on distributors and retailers leads to very low profit margins for producers.

3

Lack of Visibility

Consumers do not know where to find farmers or eco-friendly local products near them. They have little trust in product origin and quality.

4

Logistics Challenges

Farmers face challenges with transportation and distribution. Many cannot manage deliveries, which limits their reach.

User Research: Personas

PERSONA: FRANCISCO

Problem statement:

Francisco is a 52-year-old farmer who wants to sell his products directly to customers because he is tired of relying on intermediaries that pay him unfair prices.
He needs an easy-to-use mobile solution that allows him to reach local buyers without technological barriers, so he can increase his profits and have more control over his production and sales.

PERSONA: DAVID

Problem statement:

Sara is a 28-year-old environmentalist who cares about eating healthy and supporting sustainable agriculture.
She needs a convenient way to find and buy local, organic products directly from farmers at fair prices because she is frustrated with industrialized, chemically treated food and wants to support local producers.

User Journey Map

PERSONA: PACO

Goal: Sell his fresh produce directly to local buyers using a simple app.

PERSONA: SARA

Goal: Buy fresh, eco-friendly local produce from responsible farmers using an easy-to-use app.

3. Starting the design

Big Picture Storyboard

Sara’s journey to find and buy healthy, ecological, locally grown products through the app, supporting small farmers and the environment.

Close-up Storyboard

This storyboard shows how the app actually works

Ideation and Sketching

In the initial phase of the project, we focused on defining the app's core structure through research, ideation, and sketching. We analyzed user needs, competitors, and key features to outline how the app would function. Sketching proved to be a quick and effective method to visualize and communicate ideas both individually and as a team.

A major early challenge was deciding whether to create separate sign-up flows for buyers and sellers or combine them into a single, unified form. After exploring both approaches through sketches and benchmarking industry standards, we chose the single sign-up form. This solution offered greater simplicity for users, more flexibility for dual-role functionality, and aligned with current UX conventions, allowing users to buy and sell within the same profile.

Sitemap

Once I had defined the main idea and basic flow of the app, I moved on to organizing all the key screens, features, and user paths into a clear sitemap. This allowed me to better understand the structure of the product and how users would navigate through it.

To build this sitemap, I used Illustrator and applied color coding to visually group the main functionalities: onboarding, user profile, product listings, search and filter, and messaging. This step was crucial to align the app structure with the user needs identified during the research phase.

Paper Wireframes

Before moving to digital, I sketched the key screens and flows of the app on paper. This helped me quickly explore ideas, define the core structure, and prioritize usability for both farmers and buyers.

The sketches allowed me to validate key decisions early on — like using a single sign-up flow and a geolocated search system — while focusing on clarity and simplicity for users less familiar with technology.

Digital Wireframes

Location-based browsing and interactive maps were designed to visually connect consumers with local farmers, enhancing trust and transparency while supporting short supply chains.

 

As the design progressed, we identified that building trust between farmers and buyers was essential, so we focused on creating detailed, transparent profiles for each producer.

 
 
 

Usability Study: findings

I conducted two rounds of usability studies for Huertapp. Insights from the first study guided the transition from low-fidelity sketches to digital wireframes, ensuring the app addressed the core needs of both farmers and consumers. The second round tested a high-fidelity prototype and revealed refinements required to improve the overall experience.

Round 1 findings:

1

Users wanted a faster way to browse nearby farmers (map view was preferred).

2

Some users needed clearer onboarding to understand how to buy and sell.

3

Users asked for filters (distance, category, price) to simplify search.

Round 2 findings:

1

Add confirmation before publishing a product listing.

2

Navigation icons needed to be more intuitive.

3

Improve visual hierarchy in farmer profiles (reviews and products).

4. Refining the design

Mockups

After usability study, I added a map preview and filters (category and distance) in the product listing screen to help users find nearby farmers and products more easily.

 

Mockups

After usability study, I redesigned the farmer profile to make it more actionable. I added the farmer’s contact details and a direct “Contact Farmer” button, along with a clear section for products for sale, improving usability and quick access to key information.

 

Mood Board

The first step to create the UI design of the app, was to define the mood board since it is a great way to set out the look and feel of a new UI design project. In this stage, I defined the colors, fonts, and overall style of the app to be consistent.

 

 
 

Patern Library

A pattern library is a collection of user interface design elements that appear multiple times on the app. We created it carefully in order to define clearly how they behave and what they look like before starting with the design of the high fidelity prototype.

 

 
 

High Fidelity Prototype

The final stage was creating the high-fidelity prototype, which was done entirely using Figma. I chose this tool because it is cloud-based, highly collaborative, and allows real-time teamwork with developers and designers. Its versatility, powerful design features, and seamless sharing options made the creative process smoother, faster, and more efficient.

 

5. Going Forward

Takeaways

Impact: 

Huertapp simplifies the process of connecting farmers with consumers who are looking for fresh, local, and eco-friendly products. The app gives users the feeling that it truly understands their needs: buying directly from local growers, saving time, and supporting sustainable agriculture.

 

One quote from peer feedback:

“The app really helps me discover nearby farmers. It makes buying healthy food easier and more transparent.”

 

What I learned:

While designing Huertapp, I learned that the first wireframes were just the beginning. Through usability studies and peer feedback, I realized the importance of making navigation intuitive, highlighting the value of proximity, and ensuring that users could quickly contact farmers. Each iteration improved the clarity and overall user experience of the app. 

Next Steps

1

Conduct another round of usability studies to validate that the navigation improvements (filters, map, and farmer profiles) have effectively reduced confusion.

 

2

Expand user research to identify additional needs, such as delivery preferences, payment methods, or sustainability information.

 

3

Keep iterating and polishing the design with new features, ensuring Huertapp continues to evolve as a reliable solution for both farmers and consumers. 

Author Name: : Alberto Yago

Date: : August 2021

Location: : Remote/Spain

Skills: : UI,UX Design & App Develppment

app, ui, ux

UX/UI Case Study – Local Altcoin App

Local Altcoin is new app for a fictional alt-coin project which aims to allow users to pay for goods and services in local business through the app using a city/community alternative currency, to impulse local commerce and improve the local economy.

 

The iterative Process:

1

Empathise

2

Define

3

Ideate

4

Prototype

5

Test

1. Project Overview

Project Duration

March 2021 – August 2021

The Product

Local Altcoin is new app for a fictional alt-coin project which aims to allow users to pay for goods and services in local business through the app using a city/community alternative currency, to impulse local commerce and improve the local economy.

The Problem

Some local business face a very aggressive online competition like Amazon, which has a big negative economic impact in the local economy of certain cities. Alternatives are needed.

The Goal

Design and app for a Local Altcoin that will allow users to easily pay in local business with this new local currency. The goal is to become an alternative for merchants and shoppers in small cities and villages to impulse the local economy

My Role

UX designer designing an app for this Local Altcoin project from conception to delivery

Responsibilities

Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs

2. Understanding the User

User Research: summary

I conducted interviews and created empathy maps to undestand the users I’m designing for and their needs. A primary user group identified through research was young socially aware individuals who are into crypto and want to make a positive impact in their communities. Another group is less concerned about local issues and just basically want comfort and a direct monetary benefit while buying goods and services.

 

This user group confirmed initial assumptions about the Local Altcoin idea, but research also revealed that civism and commitment with local business werent the only factors motivating users, but other users also wanted an easy way to spend crypto benefiting from good prices, special offers, quick and cheap delivery, etc..

 

User Research: pain points

1

Lack of Options

Finding shops that accept crypto is hard nowadays. Inability to find shops to pay directly with crypto

2

Privacy & Legal Concerns

Paying with Crypto Visa Cards can be privacy issues. Bureaucracy and lack of legal clarity when using crypto to buy stuff is a problem.

3

Amazon Effect

Witnessing the damage of ecommerce and Amazon to local business and economy

4

Outdated Stores

Some local shops and business are expensive and old fashioned. They offer less for more

User Research: Personas

PERSONA: FRANCISCO

Problem statement:

Francisco is a socially aware P.E. professor who owns crypto who needs an easy way to spend his cryptos in nearby stores and business because he wants to contribute with local economy since companies like Amazon are very harmful

PERSONA: DAVID

Problem statement:

David is a Digital entrepreneur who needs a smart and convenient solution to spend his cryptos arround him because he thinks local business are usually expensive and anachronic

User Journey Map

PERSONA: FRANCISCO

Goal: Buy stuff in local business with crypto to support local economy

PERSONA: DAVID

Goal: Buy stuff with crypto easily, privately, convenient and with the best price/service

3. Starting the design

Big Picture Storyboard

Francisco’s journey to buy locally with crypto using the app and help  his neighbourhood thrive.

Close-up Storyboard

This storyboard shows how the app actually works

User Journey

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the homepage i prioritized a quick and easy access to the main areas of the app

Digital Wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

 

Easy navigation and access to funds from every screen, was a key user need to address in the designs.

 

Low Fidelity Prototype

The low fidelity prototype connected the primary user flow of paying with good and services with the local altcoin through  the app, so the prototype could be used in a usability study with users. I created it using FIGMA

View the Local Altcoin App:

Check low fidelity prototype

Usability Study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining

Round 1 findings:

1

Users want to pay quickly (QR reader)

2

Some users need initial guidance to use the app

3

Users want a delivery option

Round 2 findings:

1

Add “confirm payment” extra step in the qr reader payment feature

2

Font weights must be rebalanced

3

Colour contrast adjustment

4. Refining the design

Mockups

After usability study, I added an offer section within the local store screen in order to facilitate navigation

 

Mockups

Added an initial tutorial in the main screen of the app in order to help new “confused” users to understand better how to use the app at the beginning

Mockups

Adjusted colours and contrast of elements- Texts of the map weren't readable in the previous version

1st High-fidelity Prototype (Old Iteration)

The first high-fidelity prototype presented cleaner user flows for paying with local crypto and checkout. It also met user need for pickup or delivery option as well as more options. It was also created with Figma

 

View the Local Altcoin 

High-fidelity prototype

 
 

2nd High-fidelity Prototype (New Iteration)

In this second iteration of the design, a more polished and cleaner version of the prototype was created.

 

All the content was redesigned in 360x767px and adapted to the XS – 4 columns – Grid in order to adapt to more modern devices with larger screens

 

To achieve that new upgrade, all the components used were redesigned entirely, updating all their states, using a more balanced type family and color palette, as well as more consistent sizes of elements and distribution of spaces.

 

New connections and interactions between the main screens of the app were created


View the New Local Altcoin Design

High-fidelity prototype

 
 

5. Going Forward

Takeaways

Impact: 

The app offers a straightforward process  to purchase goods and services with this alternative local currency. The app makes users feel the app really thinks about how to meet theri needs

 

One quote from peer feedback:

“The app makes everything easy. It is a great idea. It can definitely become a solution for many local business”.

 

What I learned:

While designing the Local Altcoin app, I learned that the first ideas for the app are only the begining of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

 

Next Steps

1

Conduct another round of usability studies to validate whether the pain points user experienced have been effectively addressed.

 

2

Conduct more user research to determine any new areas of need.

 

3

Keep iterating and polishing the design accordingly. Constant improvement.