D E S I G N I N G Â Â F O R Â Â
T H E Â Â N E X T Â Â W I K I P E D I A Â Â
O F Â E D I B L E Â Â P L A N T S
Lead DesignerÂ
â UX, UI, User Research, Interaction Design, Wireframes, User Flow, Sitemap
ă°ď¸   C o n t e x t   ă°ď¸Â
About
Openfarm is an open source online encyclopedia, created and edited by farmers, gardeners and green thumbers around the world. It functions like a marketplace, with on one side people sharing their knowledge, and on the other side people looking for specific information.
Openfarm is also the smart database behind Farmbot, a CNC personal farming machine:
ă°ď¸   C h a l l e n g e   ă°ď¸
Redesign the overall experience of accessing gardening knowledge and empowering gardeners to contribute.
ă°ď¸   P r o c e s s   ă°ď¸
Discovery & Research
âď¸ Questioned the team and analyzed existing materials
Goal: get an understanding of the past design decisions
âď¸ Audited the website user flow based on user scenarios
Goal: identify roadblocks and UX inconsistencies
âď¸ Conducted an online surveyÂ
Goal: get a sense of what gardeners, fromand especially beginners, struggle with
âď¸ Went to a collective farm - Goal: see how people interact and transmit knowledge
User scenarios
Level of engagement on the website: new visitor, recurring visitor, author
Level of expertise in gardening: newbie, intermediate, advanced
Job to be done
đŠđźâđž đžđ¨đťâđž
As a newbie in gardening, I want to easily find answers to get started with planting crops on my balcony.
As an intermediate in gardening, I want to take a step further in my gardening journey, e.g. picking specific methods.
As an expert in gardening, I want to quickly share my knowledge, in an accurate way for other people to reproduce it.
Analogies, Patterns, Mental Models
Other platforms, identified as marketplaces, clearly have 1. A homepage with a search bar as the primary access point 2. A dedicated search page with criteria and results 3. The detailed page of a given result
Design patterns of a Search Page from Airbnb, Craigslist, and Linkedin:
Roadblocks identification
Existing state
â Search results can equally showcase guides and crop information. This is also how the back-end side is structured. The user mental model and taxonomy should be made more straight to the point.
â Color and UI guidelines lack consistency throughout the user flow
â As provided by the survey results, Gardeners need a holistic understanding, from soil prep, watering, garden type specificities. Not only how to grow a certain crop:Â
Suggested principles
âď¸ Guides are the added value of Openfarm, not crops. Therefore, the Search should only provide Guide results. Crops are to be linked and only accessible through Guides.
âď¸ Guides explains how to grow certain crops. There should also be dedicated to other peripheral knowledge: how to prepare the soil, how to start as a newbie.
âď¸ Material Design guidelines: consistent, coherent, and minimalist visual language across the platform
ă°ď¸   D e l i v e r a b l e s  ă°ď¸
Sitemap & User flow
In an attempt to answer the following triggers:
- what are the access points for a gardener willing to find a guide vs. willing to write a guide?
- is it metrics-friendly?
- are there loops to other relevant actions?
- what are the main vs. secondary actions, allocated space and visual focus?
See more directly on Artboard
Existing state:
Ideation of future state:
Search Page
Existing state
â The Search page equivalent is currently the Crop page, composed of theoretical info about the crop (half left side) and related growing guides (half right side):
â The Search feature is currently limited to guides explaining how to grow a crop. No guide for other peripheral topics.
Suggested Sketch & Wireframe
âď¸ Enhanced Search with 1. crop 2. current location and month (auto-incremented). Use case: as a gardener, what can I do now (here in February) in my garden, that corresponds to my climate zone (here San Francisco), for any given stage (by default the first one being âprepareâ).
âď¸ Mental model of a dedicated Search page
âď¸Â Only display guide related to the searched crop. Crops are linked to guides.
âď¸ Receive alert based on search criteria
See more directly on Artboard
Wireframe - skeleton
Wireframe - live
Wireframe - empty state
Homepage
UI existing state
â Call to action to be clarified
â No access points for author, two unclear access points for readers
â Background picture isnât engaging
â Primary green lacks dynamism
Suggested Wireframe
âď¸ Call-to-actions with primary and secondary hierarchy
âď¸ Two access points for authors and 2 access points for readers. Also more metrics-friendly
âď¸ Engaging background pictures
âď¸ Primary green changed to fruitful #339933
âď¸ Updated the search bar from the new Search page
âď¸ Footer restructure
Lead Design
Existing state
â Distributed Open Source (OS) Developers who contribute to maintaining the website as contributors pick their task in the unordered Github issuesâ list (tickets)
â OS Developers donât have the big picture of the user flow
â Decision-making process through Github and Slack, often lacks focus and efficient result
Implemented changes
âď¸ Github projects (Agile tickets management board) for front-end and back-end related tickets. Clear state of each ticket, whether still under discussion or need implementation
âď¸ Share my Design process and questions through Figma
Growing guide creation workflow
Sitemap audit & questioning
Sketching ideation
Ongoing questioning: should we radically change the existing UI towards more freedom for the guide author?Â
Next step: Wireframe
ă°ď¸   T a k e a w a y s   ă°ď¸
Still thinking about it :-)
ă°ď¸   B e h i n d   t h e   s c e n e   ă°ď¸
Working with a distributed team as the Lead and sole Designer:
Simon Vansintjan, lead software engineer
Rory Aronson, CEO & founder
Open Source Contributors
Note: The graphic design of icons had been made prior to my collaboration with Openfarm
Figma, Github Project, Github Issue, Slack
đ Â Remote + San Francisco Bay Area












