Plate Forward

This was a project my team and I worked on with Top Box Foods as part of a volunteer week. The project started with just an idea but ended with a functioning website.

Fast Facts


My Role:

UX Designer

Group Size:

4 Designers

Time Length:

40 hours

Tools:

  • Pencil and Paper
  • SquareSpace
  • Photoshop
  • Google Docs

Skills:

  • Google Sprint Methodologies
  • Hallway User-Testing
  • Wireframing and prototyping
  • Defending and Justifying Designs

Overview

For alternative spring break, my friends and I volunteered at a non-profit where we used Google Venture's 5-day sprint to launch a website. The website followed a pay it forward model where each package of food you buy, helps out a needy family in an underprivileged area of Chicago.

Plateforward sample on laptop

Link to Interactive Prototype


The Situation

My team and I partnered with Top Box Foods, a nonprofit organization in Chicago who provides subsidized food to low-income areas in Chicago. We were tasked to create a new website for a new called Plate Forward. It was a new project they are launching to supplement Top Box Foods. We had 40 hours to complete the project and hand off.

Persona

Due to time contraints, we centered our designs on a single persona, Steve from the suburbs.


Suburban Steve:

  • Shops for his family every two weeks by focusing on fresh, healthy and local produce.
  • Steve likes to shop at grocery stores like Whole Foods, Trader Joes and Mariano's.
  • Steve strongly believes in contributing to his community in every way possible.
  • Steve also likes to learn about where his food comes from, so he tries to buy produce that indicates that.

The Process

At the beginning of the week, we thought it would be best to follow a process like Google's 5-day sprint to achieve as much as we could alongside a deliverable we could present to our client.

This image shows the 5 day sprint.

Our Sketches

After we organized and discussed what we want the website to contain, we all began to individually sketch our ideas. After some time, we discussed each of our sketches, we combined them by drawing them. Those can be seen below.

This screenshot shows the main page of the website This screenshot shows the main page of the website
This screenshot shows the main page of the website This screenshot shows the main page of the website
This screenshot shows the main page of the website This screenshot shows the main page of the website

Prototype


Link to Interactive Prototype


Summary

My Role

I made the "Why Plateforward" section of the website. Throughout the whole process, I wanted to keep the three pillars of thought in my designs. Keep it healthy, locally sourced, and support local communities.

This screenshot shows the main page of the website This screenshot shows the main page of the website This screenshot shows the main page of the website This screenshot shows the main page of the website This screenshot shows the main page of the website

1. Ideate and Information Architecture

First, we formulated the general information Architecture for the website. We then received feedback from our client to see if it aligned with what they had envisioned.

2. Sketch

We then moved to sketches. We generated sketches both individually and as a team and then recieved feedback from our client again.

3. Prototype

This led us to split up our tasks and implement the sketches using the website creation tool, Squarespace.

4. Test

After we finalized our Squarespace prototype, we spent the whole day conducting usability tests with 9 potential users.

5. Iterate and Document

Finally, on the last day, we revised our prototype based on the tests and documented all the work we've done in preparation for handoff.

Reflection

Why SquareSpace?

The reality is, we were there for only a week, we had hoped to do it all but we would ultimately have to leave, we wanted to have a positive impact on our client. The reason we chose Squarespace because it allowed us to deploy our designs quickly while at the same time giving something back to the client that they can actually use without outsourcing development. In the past, they would use volunteer services to deploy website changes for their Top Box Foods website which sometimes takes 7+ days for turnaround.

Lessons Learned

Overall this was a positive experience and I had learned a lot about utilizing the Sprint method to get a lot done in a short span. One shortcoming we faced was to do with User Testing. We had asked our client on Tuesday to see if they could recruit users in our target population to test our designs on Thursday. Due to the last minute available, most of the users we tested were either friends, family or other colleagues of our client, therefore, caused a bias in our testing. This was an issues my team and I were okay with accepting. In future iterations of the Sprint, it would be key to secure user tests prior to starting the sprint.