Appio
Mobile app prototype for urban orchard management.
Appio is a mobile app which allows users to manage their own urban orchard and learn how to maintain home crops to produce vegetables by themselves.
Role
Front-end developer | UX Researcher | UI Designer
Used tools
Ionic | SCSS | Angular | Miro | Figma | InDesign | Infogram
Skills
Web design | Web layout | Prototype | UX Research | UI Design | Design Thinking
Project duration
+1 year
Justification
Appio was created as an independent and self-study project in 2020. The teamwork is composed by two people who work in the technology area and me, who were studying visual design at that moment and were in charge of this area. We wanted to develop a useful app which lets us learn and get new skills, so we had been working on it autonomously in our free time.

Subsequently, during my master studies in web development and conceptualization, for UX/UI class as final project idea I took up Appio, applying on it all the new knowledge in user experience and user interface design, which allowed us to give more structure to the project we have been working on, being this an excellent opportunity to restructure the app and make all the needed changes to improve it.

The topic of the application was conceived because of the interest of many people to have a better diet, sometimes autonomously by cultivating their own vegetables at home (usually urban places, closed and with limited space) and the ignorance of the most part of them about creation, plant cares and management of crops.

Using Design Thinking agile methodology, were invested which are the concrete problems people find when managing their urban orchards to try to solve them through different utilities they might have at hand by using our mobile application.

To execute all the stages of the UX/UI process, have been used different strategies through “deliverables” elements which allows having a correct flow of the process and the organization of useful information to consider while design and later development stages of the app, always centered on user and contributing to innovative solutions to their problems.
Discovery
To execute this stage, were made the research and observation through desk research, a search of information process in different online sources which allowed to know the possible motivations for people to have an orchard at home, learn about transgenic and organic food, and the possibilities, advantages and benefits of home orchards. Afterwards, were made a netnography, which collects opinions found on the web of people who have tried or who have an orchard at home in order to know their opinions about their personal experiences about it.

Using the information collected before, were generated some research questions using Venn diagram which have been presented a few questions considering the possible actions or functions which might be implemented in the app. Using a benchmarking, were possible to make a comparison of similar apps and similar websites available online. Then, were made a SWOT analysis to determinate the possible strengths, weaknesses, opportunities and threats the project might have. Finally, were made a survey using Google forms with segmented questions for people who are willing to have an orchard at home and those who already have it to know more about their expectations, difficulties and comments about it.

You may access to the project's documentation clicking here to see in detail the results of the discovery process.
Definition
At this stage were made a user persona to establish and recognize a few approximated data of the potential users of the app as their goals and objectives, motivations, frustrations, interests, technology use skills, and others. Subsequently, were made an empathy map which were placed some comments or situations that potential users might think, see, say, hear, feel and do. Were also made a customer journey to create a hypothetical routine of some of the possible users in order to understand their emotions in some situations might be presented when managing their orchards. Finally, were made a needs matrix which compiled possible needs, “pains” or inconveniences these needs creates and the “benefits” the user might have in case those needs were properly covered.

Considering earlier stages of the project, were made a viability and usability matrix which allowed to organize the insights about possible functionalities the app might have.

You may access to the project's documentation clicking here to see in detail the results of the definition process.
Ideation
At this stage, were made a search of findings and insights about frequents thoughts the people who have or would like to have an orchard at home usually have, these thoughts were organized in clusters, which allowed to understand better the information about aspects the app should cover. Subsequently, were made an in-out process which applied a first filter to discard some irrelevant functionalities and finally using a using a MoSCoW system, in order of importance were determined those functionalities who must be included, those who should be considered, those who could be implemented, and which definitely wasn’t going to be used.

With all the collected information, was created a value proposal, analyzing and outlining carefully the products or services to offer, the value creator elements, the solutions the product might offer to users, their earnings, frequent difficulties and tasks to do when using the app, information which were finally taken to a canvas model to analyze the viability of the project.

You may access to the project's documentation clicking here to see in detail the results of the ideation process.
Design
Design stage started with a site map to plan the different sections the app would have. Next on, were made a flow chart to establish a step by step for a user’s process execution, in this case, the chosen process was adding a new plant. Subsequently, wireframes were designed to have a preview of the app’s interface. Then, were made the design system of the interface in order to maintain its visual and graphic unity, determining elements as fonts, colors, icons, images and others, to finally, create the prototype with high fidelity screens to have a closer approach to the result that will be made in a future development stage.

Design System
Colors
#A5C639
#637722
#F8F8F8
Fonts
I’d like to say that all the graphic sources illustrating vegetables, fruits, aromatic plants and other were created by myself using adobe Illustrator.

If you want to see in detail the design process, toy may accede to project’s documentation by clicking here. You may access to the project’s Figma file clicking here to consult in detail the prototyping process.
Development
Thanks to the UX/UI design, were easier to plan the application because as I had some advancements, after this process it was restructured and improved with the results of it.

For Appio’s development, were used Ionic and Angular as main tools. My role in the project was mainly related to the front-end development using the native utilities of the framework and of course putting into practice knowledge in HTML, CSS and SCSS languages. Although mostly of the back-end process were made by my partners, after I finished my master studies and understood more about back-end, I involved myself in it trying to apply some actions on TypeScript language and databases. In order to have a version control of the project and share the files optimally, we used GitHub.

Finally, we loaded the application to Google’s Play Store and now is available to the public to download it a Beta version only for Android devices, we’ll keep on doing changes and enhancing its functionalities according to the user’s feedback.
Learning
With this project I had the opportunity to work with different resources of Design Thinking agile methodology, which were very enriching to my learning process, specially at planning and application of surveys to potential users. I also used Figma a lot, so I had the chance to discover many of this program functionalities and some “cheats” which are very useful.

About development stage, it was very interesting to have the opportunity to explore and use frameworks as Angular and Ionic, which allowed me to enlarge my knowledge and get some practice and experience on its operation.

I consider very important to say that furthermore technical aspect, I also have a personal learning because I was able to delve into urban orchard’s topics, the importance of organic food and I totally understood that time and resources invested on UX/UI stage are completely important for the structure of a web project or mobile application.