Case Study: Peekskill Community Gardens Site/Blog Design

And so, without further ado…

Case Study: The Peekskill Community Gardens Project

Client: Laura Perkins (Peekskill Community Gardens)
Project: Website and education blog design
Date Started: 2/7/2013
Date Completed: 5/30/2013 (community presentation)

Contents

Project Team
Introduction
Goals
Methodology
Challenges
Results
Next Steps
Research

Project Team

Supervisor: Deb Krikun
Project Leader: Diane Vitetta
UX/UI: Hayley Hoffman
Graphic Design/Print Media: Ari Brown
3D: Will Shost, Jessica Vitetta
Animation: Preston Thomas, Rafael Badillo
eBooks: Miyuki Kumasaka

Project Introduction

For this project, we were given the opportunity to work with Peekskill Community Gardens, a non-profit organization dedicated to educating and involving the community in environmentally friendly gardening projects. Their main goal was to establish a better online system for communication with their members and affiliate organizations and to provide a portal for educational resources for the public at large.

Goals

We decided that we would help them my not only redesigning their website to be more community-friendly, but also by creating a blog network for the school gardens to showcase the work their students do. We also developed a poster campaign that students could easily take control over and created a set of keychains for 3D printing that could be distributed by the Garden network for publicity.

My personal goals within this project were to ensure that all of our media was user-friendly, accessible, and intuitively navigable throughout the process. I also took the lead on designing WordPress blogs for the four school systems that participate in the Peekskill Community Gardens network.

Methodology

I began by researching good principles and practices for user interface (UI) and user experience (UX) design. Essentially, UI is the development and design of the tools that consumers use to navigate and access interactive applications (such as websites and mobile apps). UX, while similar, focuses instead on the design and implementation of these tools in order to create the least frustrating, most intuitive, and most accessible experience possible for the target user. Both are needed for the implementation of a successful website.

There are many different schools of thought on this, but after digging through the literature, I ended up distilling the most common elements of “Good UX/UI” down to this list:

  1. Get people where they need to go – When someone is using your site, what features are they most likely to want/need? Make those features obvious and use design elements to guide their eye to the good stuff.(Examples: Counterspill, I Had Cancer, Downtown Seattle)
  2. Keep it simple, stupid – Otherwise known as “less is more,” good design clearly gives the users what they need.(Examples: Dropbox, Google)
  3. Avoid “Traps” and “Dead Ends” – Make user actions easily reversible and implement tools that prevent users from needing to start over.(Examples: Remember the Milk, Foodily, Khan Academy)
  4. Be consistent – Repeating design elements, using iterations of the same interface, and keeping the same overall structure helps users build familiarity over multiple aspects of the site and makes for easier user interaction. It’s also not a bad idea to keep in mind the sites your users will most likely already be familiar with.(Examples: Amnesty International, Google, Wikimedia)
  5. Context – Who is likely to be using this site? Will they be on a phone? Will they be in public or private? How much experience will they have had with your product/site/technology in general? Know your users, their preferences/abilities, and they context under which they’ll be using your interface.(Examples: The Daily Beast, Facebook)
  6. Be welcoming! – If users are happy looking at you, they’re more likely to enjoy using you. Use design elements (like contrast, alignment, flow, etc) in a way that is easy on the eye.(Examples: Chicago Portfolio School, Google Play Music Tour, UX Passion)

From this point, I started developing a tentative site map that would make it easy for users to navigate to the content they would most likely be looking for while also making sure that PCG’s own interests were being showcased.

sitemap_gardenPK

I also researched a bunch of successful non-profit gardening websites to get a feel for what works and what doesn’t. The ones I found to be the most effective were the American Community Garden Association, GrowNYC, and the New York Restoration Project. More about my findings on this can be seen here.

I used elements from each of these sites as I went forward with creating tentative site designs. I started by “frankensteining” elements I liked from existing websites to provide examples of directions we could go in. I also took note of and borrowed from the characteristic color scheme that PCG has used in their previous print campaigns.

Main Site design Main Site design 2.0 Main Site link page design 2.0

For the blogs, I began by finding a theme that made good use of the UX principles I wanted to incorporate. This was an interesting search as I knew I would not be the one ultimately maintaining the project. Thus, the blogs had to not only be navigable and accessible by readers, but also easy to update and maintain by users of all skill levels. We ended up settling on Yoko, a clean and simple theme that is flexible enough to meet our goals while still being easy to author and update.

During this time I wanted to get a look at some other school gardening blogs, and I was fortunate enough to do some observations for my teaching certifications at a middle school that actually had a gardening club. The teachers running the club walked me through their blog and gave me plenty of insights into what worked and what didn’t when it came to maintaining their site.

Diane then took the reigns on the design for the main site and I focused on the blogs. Based on my research, I set up the infrastructure needed on a dummy account and established a sample blog page with the desired navigation and widgets.

I realized during this process that simple tutorials/manuals might prove useful for anyone new to WP or the Yoko theme. I started writing up some easy to read instructions to help posters/administrators get started once they take control of their new blogs.

Challenges

One large challenge I experienced was working within the limitations of WordPress.com’s free loadout. The free version of WordPress takes care of hosting costs but at the cost of customizability and design flexibility. Without access to CSS, php, or any other kind of “advanced” editing tools, the control I had over creating the blogs was extremely limited. Despite this, I took as many steps as possible to keep the blog design user-friendly on both the viewer and author’s end.

Results

The blogs I have created for the PCG school gardens are currently being hosted privately on WordPress.com and will be presented to the community on 5/30.

I also developed a sitemap and proposed guidelines that were incorporated in Diane’s final design for the main website.

Next Steps

The obvious next step for our team is to present our work to the client and to the community.

Personally, I plan to continue developing the tutorial material for the blogs. Eventually I’d like to combine these with the tutorials written by Ari for poster creation and crowdfunding so that we can hand one cohesive help guide off to PCG.

Beyond this particular project, I definitely plan to continue developing my web design skills and UX/UI research base. UX is such an important field that can make or break any interactive endeavor, and I feel that it helps my skills as both a designer and an educator to be consistently involved with this field.

Research

UX/UI:
Blogs
Boxes and Arrows
Designmodo
UX Booth
UX Passion

Principles
The Essential Guide to User Interface Design (book preview)
UI Design Introduction (quick tutorial/cheat sheet)

Tools
Listamatic
11 Responsive Grid Design Tools
Gridpak
Search Box: Examples and Best Practices

Community Gardening Sites:
The American Community Gardens Association
New York Restoration Project
Grow NYC
NYC Community Garden Coalition
6th & B Garden (an example of ineffective use of green)

Free WordPress Themes:
Yoko
Oxygen
Misty Lake

School Garden Blogs:
LMK Environmental Club Blog

Not much new to report

So after missing out last week due to illness, I don’t have much new to share. I did a little work on my site proposal, but I’m scared to go further until I know whether the site colors have been set in stone:

Main Site design 2.0

Main Site link page design 2.0

(… that big white spot on the main page would have a picture or slideshow, but I can’t find any nice ones to use on the current PCG site. Something to think about?)

I also don’t know anything about fonts. Someone please help me with this. :(

I wanted the main page to be open, navigable, and bright. Eventually graphics would go above the header nav buttons (the group is thinking vegetable silhouettes), and the more I look at it, the more I dislike the header words being orange. I’ll have to play with it some more.

Also of interest are these posters the PCG has made in the past:

380760_326420164088439_1628611710_n PageImage-488734-2088206-PCG_FRESH

I ended up narrowing my layouts down to these 3 main colors as a result of finding these… I think they were used pretty effectively. We should maybe look into finding this font.

That’s all for now. :)

Colors and social media!

So Hayley is feeling miserable this week, but that doesn’t mean she’s got nothing to share!

Color Schemes

To start off, I played with Kuler to create a few color scheme options.PCG Colors 2

PCG Colors 1

PCG Colors 3

I wanted to play off the blue from the Yoko wordpress theme we’re using, the green from the PCG logo, and the red border on the map the client gave us. I personally prefer the first two options.

Social Media Options

I also did some exploration into social media opportunities for gardeners and came up with a few interesting sites outside of the typical facebook/twitter/flickr/youtube blend.

To start, here’s a great post from the University of California about the importance and use of social media for a gardening community: Making the Most of Social Media. It gives great ideas on what to share and how to go about doing it.

Then I found some garden specific sites:

Your Garden Show:

YourGardenShow

Your Garden Show is essentially an online community in which you can share photos, crop details, and other details about your garden with the world at large! People can comment on each other’s gardens, share advice, and even help scientists collect data by logging how many bees you’ve spotted recently. It’s a really comprehensive site.

YardShare:

yardshare

Yardshare is focused around sharing your garden with people in your area and building a community among amateurs and professionals alike. PCG could get in touch with local gardening enthusiasts and give them tips, share ideas, and post pictures of their work (or, you know… recruit them :) ). It seems like a great resource.

Dig The Dirt: 

digthedirt

Dig the dirt is mostly a resource site that would be great to link to, but it also lets you easily search their users by zip code, which again helps put you in touch with the gardening community in your area. Its goal is to let gardeners help other gardeners, and PCG could possibly make a name for itself lending a hand to others in the area.

And that’s all for today! I’m still working on the site design I planned to have finished by today… being sick has kind of put me behind a little bit. By next class I’ll have a layout with whatever color scheme the group decides to go with. I’d really love it if someone could e-mail me or post here with what choose!

A few mockups

These past couple weeks I’ve been working on a few mockups for the various parts of the PCG project:

For the main site, I started with a tentative sitemap:

sitemap_gardenPK

From there I put together a couple mockups with a few borrowed graphics as placeholders for the original stuff we haven’t created yet:

Main Site designMain Site daughter page

I also played with some ideas on the test blog. We’ve decided to create a static landing page for a network of individual blogs for each specific garden. Using the Oxygen theme, this was my original idea (on paper and with a terrible camera, because I’m old fashioned like that I guess):

PCGOxyLayout

Unfortunately, Oxygen doesn’t support 2 column formatting. :(

We can do either a full width image map and leave the widgets for the daughter pages, or we can do a 3 column design with a much smaller map in the center.

Peekskill Community Gardens research

Our main project has been chosen – design a website/poster campaign for the Peekskill Community Gardens complete with wordpress blogs for each individual garden site. Fun!

Here’s what I did this week:

Scouting for similar sites:

The American Community Gardens Association – Great header with clean navigation options, but the main page itself is cluttered and disorganized. The bright colors and simple fonts are great, though.

New York Restoration Project – While it looks great at first glance (I love those color-coded circle buttons on the right of the main image), the massive and bright dropdown boxes get in the way on many of the daughter pages they link to. Worth noting is their community garden page, which has a very cool map as its main focus.

Grow NYC – This one has a really clear main page, and I love the Donate/Sign Up/Volunteer in the upper right. That header is on every page, making it super clear to any prospective supporters how to go about lending a hand.

NYC Community Garden Coalition – I’ve included this one as an example of a blog style community site. They mostly use it for announcements, but through good widget use they’ve got a nice mini-calendar of upcoming events and a simple mission statement that tells you who they are without having to dig through the guts of the site.

A note on color…

I also did some research into color use, and the consensus is that while certain colors tend to evoke certain feelings in viewers, just make it contrasting enough to not cause eye strain and you’re good to go. I’d recommend white/green as our core because lighter sites come off as “clean” or “fresh.”

I’ve also read some interesting stuff about yellow being an effective accent color, but if used too much is detrimental. Here’s some good yellow use and here’s a not so great use of yellow/green.

WordPress themes…

Oxygen – a clear theme with a focus on pictures and is HIGHLY customizable. I started messing around on a test page to play with this theme and I haven’t even started to tap into all the options it has.  It’s also optimized to play nice with smartphones/tablets.

Yoko – another simple theme with custom bg/header options. It has multiple post formats built in (like gallery posts), which should make maintaining it nice and easy. Also optimized for smartphone/tablet use.

Misty Lake – the simplest of the simple. It has a custom header/bg, already uses green elements we can pull from, and would be a breeze for anyone who doesn’t know how to blog to manage. It’s not as multi-functional as the others, but it might be better for Laura.

That’s all for now!

Into the heart of UX/UI

Hello!

At the risk of plagiarizing my own About page, I’m Hayley, and this is my digital arts blog and portfolio space. As a science/education student, I’m sort of plunging headfirst into all this with the goal of developing my skills in digital (specifically web-based) media in order to bring my teaching online.

Towards this end, I’ve been tasked with researching User Interface Design (UI) and User Interface Experience (UX). The results of my preliminary foray can be found on my Resources page.

With all that research behind me, I started to develop this preliminary list of what makes good UX/UI:

  1. Get people where they need to go – When someone is using your site, what features are they most likely to want/need? Make those features obvious and use design elements to guide their eye to the good stuff.

    (Examples: Counterspill, I Had Cancer, Downtown Seattle)

  2. Keep it simple, stupid – Otherwise known as “less is more,” good design clearly gives the users what they need.

    (Examples: Dropbox, Google)

  3. Avoid “Traps” and “Dead Ends” – Make user actions easily reversible and implement tools that prevent users from needing to start over.

    (Examples: Remember the Milk, Foodily, Khan Academy)

  4. Be consistent – Repeating design elements, using iterations of the same interface, and keeping the same overall structure helps users build familiarity over multiple aspects of the site and makes for easier user interaction. It’s also not a bad idea to keep in mind the sites your users will most likely already be familiar with.

    (Examples: Amnesty International, Google, Wikimedia)

  5. Context – Who is likely to be using this site? Will they be on a phone? Will they be in public or private? How much experience will they have had with your product/site/technology in general? Know your users, their preferences/abilities, and they context under which they’ll be using your interface.

    (Examples: The Daily Beast, Facebook)

  6. Be welcoming! – If users are happy looking at you, they’re more likely to enjoy using you. Use design elements (like contrast, alignment, flow, etc) in a way that is easy on the eye.

    (Examples: Chicago Portfolio School, Google Play Music Tour, UX Passion)

All of these aspects have piles of literature and research behind them from how the human eye and brain process information to polls of consumer feedback. I’m definitely a beginner here, and if there are any more experienced designers out there listening, I’d love to dig into any resources you have.