Goal:
Re-design UpGarden’s website to make it relevant for its current users: gardeners, partners, potential funders, and other community members. I worked on this throughout my UX & Visual Design certificate course, and launched it in August 2019.
My Role:
I’ve been a member of UpGarden for 3 years. I volunteered to take on this website project because of my personal connection to this particular community.
Deliverables:
Content inventory of the current website
New sitemap
Low-fidelity wireframes
High-resolution prototypes
Mood board including color palette and fonts
New and updated content for site pages
Result:
A fresh new Wordpress website customized to fit the content and match visual research.
Before:
UpGarden’s website, initially launched in 2012, was intended as an online resource for plot-holders, with a calendar of events, forum, and repository of documents from planning meetings. It recognized supporters and showcased press mentions. However, it looked outdated, various links were broken, and documents were hard to find.
After:
In the years since the website was created, the way gardeners communicate has changed. We now use Workplace to share information and updates. The updated website needed to address external stakeholders like neighbors in the area as well as potential funders. The lighter look emphasizes photos from the garden and encourages people to visit and get involved.
Click to visit the UpGarden website
Process:
The first step was auditing the existing content. This helped determine what should move to the new site, what should be archived, what would be added to Workplace (our current method of communicating as a community) and what was missing.
Digging through the old documents unearthed some gems!
This quote became the inspiration for the visual design of the new site. To me, trying to capture the contrast between urban and natural held all sorts of possibilities.
The next step was organizing the content for the new site. The head of communications and I sketched out who might visit our site and why:
“As a gardener, I want to find current information and updates.”
“As a neighbor, I want to learn about events, volunteer opportunities, how to get a plot, etc.”
“As a partner, I want to explore educational and recreational opportunities at UpGarden.”
“As a funder, I want to learn about achievements and be a part of the UpGarden mission.”
The result was a new sitemap organizing key content around their needs.
The navigation bar on the new site is completely different from the old one, organized based on people, not functions.
Wireframing:
Moving away from the old design meant finding a lighter, cleaner look for the new site. The initial pen + paper sketches were very basic, but I knew from the start that photos of the garden needed a prominent place to draw visitors in. I tried different variations on the home page in Sketch, aligning elements and buttons in different iterations.
Mood board:
For the mood board, I drew inspiration from strong visual elements already at the UpGarden: the vintage Airstream trailer, the iridescent 1963 Ford Galaxie, the concrete of the parking garage, and of course, the abundance of natural growth in the plots. I wanted the fonts and colors (green, purple, grey) to reflect both the organic and the urban. I looked up options for potential icons, but ultimately decided they were too cartoonish for the new site.
Prototyping:
With the wireframe and mood board done, it was time to bring them to life in a higher-fidelity prototype. Adding photos and colors to Sketch hinted at what the future site would look like. The content of each page was fleshed out and organized.
I presented the prototype to the head of communications for feedback. We made a plan to launch the new site on Wordpress.
Launch!
After adding all the new content and visual assets to the Wordpress site, I customized the theme to match the prototype. I spent hours iterating and testing. This was definitely a painstaking process, but also rewarding! It was important to keep checking the responsiveness and alignment on mobile. The new site was shared with the UpGarden plot-holders at the end of August 2019. Take a look!