gathr

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

PROJECT

BRIEF

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.

WHY

User research revealed that isolated urban growers need a way to connect to others because community helps them get excited about growing. 

OBJECTIVE

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

DESIGN

PROCESS

STARTING WITH THE BASICS

Brand Exploration

BRAND PRINCIPLES
Stimulate
Enrich
Cultivate
TARGET USERS
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.

Findings

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

MOODBOARD

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.

STYLE TILE

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.

Buttons

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.

LOGO

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.

INSIGHTS

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

Hi-fidelity Mockups

& Iterations

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.

TRADES SCREEN

Iteration

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.

Final mockup

Received wireframe

Mockup draft

COMMUNITY PROFILE SCREEN

Iteration

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.

Final mockup

Received wireframe

Mockup draft

COMMUNITY PROFILE SCREEN

Iteration

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.

Final mockup

Received wireframe

Mockup draft

Interactive

PROTOTYPE

COMING SOON

LONGEVITY

Style Guide

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.

FINAL

THOUGHTS

LESSONS LEARNED

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.

MENU

CONTACT

JASMIN ALCONCHER

© 2020 / All rights reserved