Creating a platform to facilitate community and crop exchange between local gardeners
Project Date | 2019-2020
Platform | Mobile App
Design Tools | Sketch, InVision, Usability Hub, Pen & Paper
My Role | UI Designer
WHAT IS gathr
gathr is an app that facilitates produce trades between users. It's goal is to cut down on food waste, reduce carbon footprint from shipping, and promote urban gardening by creating access to local communities that will allow growers to exchange surplus crops, find events and communal spaces, and share an excitement for growing produce.
User research revealed that isolated urban growers need a way to connect to others because community helps them get excited about growing.
Create an end-to-end app that engages community involvement and aids successful produce trades between users.
Deliverables: Hi-fidelity mockups, microinteraction sketches, and style guide
STARTING WITH THE BASICS
Urban growers and people concerned with minimizing food waste
VISUAL COMPETITIVE ANALYSIS
Before implementing our brand principles into the design, I first wanted to see how our competitors' interface encouraged user flow and ultimately user loyalty. gather involves a potentially complex transaction between users so it was important to research and judge the effectiveness of what our competitors were already implementing.
Avoid the predictable green palette and awkward layouts
Use color and drop shadows to differentiate between sections and accentuate important features
Use font color/weight/size to create logical hierarchy
Since gathr is for urban gardeners, I wanted to bring the rural vibes into the city. Avoiding the overload of green, the color palette consists of warm, rich rustic hues inspired by the beautiful colors of a prosperous garden. The overall mood is homey and warm, providing a pleasant and welcoming feel.
The user-generated photos are the most important visual on the app. To showcase the photos and promote trades, i the UI elements must be simple yet informative.
Rounded corners evoke warmth and trust -- two things you want in a community. Additionally, research shows that they make customers feel safe about doing business with a brand.
I applied a slightly rounded edge to create a communal feel but kept it rectangular enough to stack and align for screens that display more content.
For the logo I created a simple mark combining a leaf -- the universal symbol for nature, and the letter G -- a letter of creative range.
This design creates a visual symbol that’s easy to recall and recognize in the sea of apps. The simplicity of the logo design ensures that it will look good in all colors/b&w and in print or on merchandise.
During the brand exploration and style tile I found it helpful to visualize a garden. I wanted to try to recreate that feeling in my design, but somehow keep it minimal and photo-focused. This would be my main challenge going forward.
FLESH IT OUT
Gathr facilitates a potentially complex exchange between users so it was important to have a clean, functional look across all screens to ensure a fluid transaction.
Reviewing the wireframes from the UX team, my challenge was to flesh them out with an appropriate hierarchy to create emphasis on the most important sections. Additionally, because it was a minimal design, I had to figure out how to maintain the engagement factor throughout the entire app.
Though the design was clean, it felt basic and possibly already little outdated. The UI elements from the style tile didn't come together as I imagined and there was too much whitespace.
I realized that it may be more engaging and fruitful if user-generated images were shown right off the bat. This would also eliminate an extra tap the user would need to see other user's galleries.
COMMUNITY PROFILE SCREEN
The mockup draft turned out to be too rectangular and the content felt compacted within the frame. This created information overload and tension in the observer's eye.
In this case I applied the "less is more" method to clearly display user photos and produce information. I applied more roundness to the rectangles and dropped the profile section back to emphasize the tab information.
COMMUNITY PROFILE SCREEN
The mockup draft for the summary of transaction clearly displayed all the information but lacked the engagement factor.
I created more depth with layering to help separate the sections and add more interest to the look, as well as changed the CTA to the primary color to give it more emphasis.
This project was pretty heavy in terms of UI elements since the app includes form fields, user submissions, direct messaging, and more. To ensure cohesion and consistency across the board, I made sure to record all the UI elements and their sizing and clear spacing.
This process of creating the style guide is always a lesson on making sure the elements are solid from the beginning of the design so that the design process is as smooth as possible.
I find it interesting how I always learn new things about my design during this stage. It motivates me to always be pixel perfect and grid-abiding throughout the process.
Overall I am pleased with the design and usability, however, I would have liked to have created more of a garden look to the app by trying a richer background color yet still minimal in design. A redesign could also include more delightful elements throughout the app to make it more pleasant to use.