Openfarm

Revamping the next Wikipedia
of edible plants

Woman-Farmer-Light-Skin-Tone-200px
ABOUT
Orbiting is an iOS app targeting anyone who can't use their ears or voice in real life group conversations. It works as public or private chat rooms that are accessible from a close distance, and anyone can join and lead a textual chat.
FRUSTRATION
CK and Harper are two friends, one being deaf, and the other not speaking sign language. To communicate and understand each other, they used a ton of tricks, until they decided to build something close enough to their needs: big font, screen usable in a dark, crowded or loud environment (e.g. a night club), for different hearing/ speaking abilities, in real-time responsiveness so that anyone could step in the conversation. WhatsApp, Slack, Messenger, even Big Words or Cardzilla weren't exactly doing the job. This is how Orbiting was born.
GOAL
Launch the iOS app on the AppStore within tight deadlines.
MY ROLE
Front-end Developer, Interface Designer
— Website front-end, iOS interface, Wireframes
TEAMMATES
Simon Vansintjan, Lead Developer
Rory Aronson, CEO & Founder
Open Source Developers and Graphic Designers contributors
TOOLS
Figma, Github Issue, Github Project, Slack, Google Drive, Typeform
LOCATION
Remote from San Francisco, CA, USA
DELIVERABLES
Homepage, Search page, Journey Map, Usability Feedbacks
Implementation of a backlog and a contributors onboarding — Internal tools

What's the job to get done?

During the research phase, I conducted a survey to understand the journey and struggles of an aspiring gardener. The results gave us a lot of insights about the holistic needs: how to prepare the soil, which crop to choose based on the season and climate, how to water the plant over time. I also researched about similar market place-like design patterns. This led me to rethink the Openfarm user journey with a Search page as a core milestone.

Iteration #1
Aligned with the mental model of a Search page layout (search bar, multiple criteria) and through ideations with the team, we've felt the urge to provide a location and time-based Search that would answer the gardener's basic question:

WHAT SHOULD I PLANT 
IF I WANT TO START NOW
AND I'M LOCATED HERE?

Iteration #2
To sustain peer-to-peer knowledge sharing on Openfarm, and limit the gardener's frustration when not finding a guide, I implemented virtuous loops by encouraging them to create an alert, create a guide or post a request.

Existing Crop page

search page – existing

New Search page

search page – live

Building consistency across the journey

From the Search page, back to the Homepage, we needed to replicate and wrap up the core purpose of Openfarm into a minimalist yet straight to the point Search bar.

After implementing primary vs. secondary call-to-actions with distinctive colors, adding a compelling background image (???????? sunny tomatoes!) and an actionable footer, I revisited the multiple paths a visitor might want to take to reach their goals. For instance, as a seasoned gardener, I might want to jump straight ahead into creating a guide (taking the shortcut from the navbar) or look for a specific heirloom crop (through the search bar). As a beginner, I might want to browse for inspiration or pick the beginner guide (through the thumbnails).

This multiple-path approach being also metric-friendly (???????? Google Analytics!), it enables us to quickly get more knowledge about the most demanded topics and crops.

Existing Homepage

openfarm-cc

New Homepage

openfarm.cc after state

Process

mockup
Search user flow: high-level sketches to represent common patterns of a marketplace layout and user flow: 1. Search bar 2. Search page 3. Product details page
Design patterns Airbnb Linkedin Craigslist
Search page: design patterns from Airbnb, Craigslist, and Linkedin
of challenging
User research — extract and key learnings from a survey: Gardeners need a holistic understanding, from soil prep, watering, garden type specificities. Not only how to grow certin crops.
of answers
User research — extract and key learnings from the survey: where do Gardeners look for answers?
OpenFarm Job Stories
Job stories identification
existing user flow
Search user flow — existing
Openfarm-sitemap-futurevsexisting
Search user flow — existing vs. ideation mapping
wireframes
New Search page — low-fi wireframes
guide creation
Create guide — workflow entry points sketches
Figma questioning
Extract of a discussion with the lead developer using Figma
github-openfarmcc-OpenFarm-projects-Frontend & UXUI
Extract from the implementation of Github projects (backlog) for front-end and back-end related tickets. Clear state of each ticket, whether still under discussion or need implementation

Takeaways

Priority to getting the job done rather than fixing bugs
The Openfarm team were digging in an unordered yet labeled list of Github issues. This approach was putting the focus on bugs rather than providing the big picture of how to get the job done for our targeted users. Implementing a backlog was definitely needed in our team journey, including mentions about discussion stages.

How to cut down my design deliverables into 5-min dev implementation?
An interesting issue towards OS contributions, as a Designer, was to keep in mind to cut down my work so that any Developers could implement it within 5 min of their time.

All types of discussion don't fit into Slack
Openfarm has been my first time ever experiencing remote, distributed and OS all in once. When I joined the team, it was important for me to identify which channels (Github issue, Github project, Slack, Trello, email, Google Drive, Figma...) worked for which purpose (UI questioning, reminder, general vs. detailed feedbacks, seeking adhesion...), in order to improve the overall efficiency of our every day interactions.

Involving my teammates through the entire design process
From the beginning of my collaboration with Openfarm, I wanted to make my design process more transparent and share it with the team and the OS contributors as soon as I got started. Figma has been great to: 1. Question along the way the lead engineer and the founder about past UI decisions 2. Share my Artboards through Github to shorten the implementation process and give access to the CSS and other layout attributes, together with any past discussions 3. Overall great to share my entire process: from design patterns research, sketches, low-fi to high-fi wireframes.
Side note: from July 2017, Figma is moving from a free to a paid business model, which will definitely impact the choice of using it in the future. As a free-ok alternative, I've been using the Craft plugin for Sketch.

Want to cultivate your garden?