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)
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
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.
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.
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:
- 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)
- Keep it simple, stupid – Otherwise known as “less is more,” good design clearly gives the users what they need.(Examples: Dropbox, Google)
- 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)
- 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)
- 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)
- 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.
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.
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.
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.
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.
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.
School Garden Blogs:
LMK Environmental Club Blog