This was the first UX project in my sophomore year at Purdue. Our professor gave us a project that would allow us to engage with a local community outreach organization and design a website for them.
When: September 2017
Duration: 4 weeks
My role: User research, usability testing, ideation
Our team began by deciding on which organization to partner with. We looked at organizations within Purdue and stumbled upon Swipe out Starvation— an organization that partners with Purdue Dining Courts to donate unused meal swipes to local food banks, combatting food insecurity.
This organization stood out to me because I realized that I went an entire year using the Purdue dining courts, and not once have I heard of this organization. I even looked online to see if they had a website, it turns out they did but the URL was broken, it wasn't available anymore.
rundown of purdue's meal plan system
At Purdue, students with meal plans purchase snacks from mini-stores throughout campus called "On-the-Go" (OTG). Students purchase food with meal swipes, different meal plans come with a certain amount of meal swipes per week.
A student can choose to forgo snacks and donate to SOS. To do this, they go to the checkout counter, pick up the equivilant SOS cards, and give them to the cashier as their donation. For each snack you forgo, you hand the cashier 1 SOS card.
Each SOS card donated, translates to 25¢, which is donated to both Food Finders and Land of a Thousand Hills.
where do proceeds go?
SOS's mission is to eliminate hunger and educate people about food insecurity. They are solving this issue by raising money to donate to an established non-profit organization.
They are faced with the challenge of getting the word out. People don't want to take the time to understand SOS's complicated system.
SOS encourages participation by drawing on people's morality and putting it into perspective. They make people question whether they really need all the snacks they purchase from OTG.
For more a more in depth explanation of our secondary research, click here. This includes observations and survey results.
narrowing our scope
Based on our results from our interview with SOS, survey results, research, and user interviews, our problem scope narrowed down a bit. These were the problems were realized SOS was facing:
Lack of awareness of SOS
Lack of understanding of how the system works
Lack of motivation/incentive to donate meal swipes
Considering our narrowed scope this is the problem statement we came up with to guide our solution:
Swipe Out Starvation (SOS) needs to better publicize their organization in order to increase meal swipe donations by Purdue students– because currently, there is little awareness of SOS and a weak understanding of how their system works.
In order to create our personas, our team deconstructed survey results. We sifted through our results and formed our personas based on the most commonly chosen responses.
Based on the results, here are the personas we formed:
We realized that Swipe out Starvation needs to increase traffic to their website. Currently, Purdue has a mobile app for students called "Purdue Menus". Through this app, students can view the dining court menu for the week. Given that many Purdue students use the app, we decided that we would advertise Swipe out Starvation's website on this mobile application. Thus, our original sketches are on a mobile format.
Here is an annotated version of our first sketches:
We decided to do guerilla usability testing for our sketches. We did this because wanted some feedback specifically about the content of our website before we moved on to making high-fidelity mockups.
We felt that our results were fairly consistent among our three users. Our testers appreciated the information we were giving them, and all the screens contributed to shaping a positive attitude towards Swipe out Starvation. We realized that our visuals really aid user’s understanding of how SOS works, given that they were roughly sketched out. We decided to take our users’ advice of combining the icons from the first version of the 1st screen with the content from the second version of the first screen.
Based on our results from our first round of testing we updated our design.
Click on an image to get a better view:
1: Few users identified who this product was representing without a second or third look. After second or third attempt, Swipe Out Starvation was identified however, the logo was commonly mistaken as a fancy header. It was also common for the product to be mistaken for an infographic or phone app instead of a website. This indicated that we needed to change the layout and aesthetics of our design to better communicate the fact that this was a website.
2:When determining the purpose of the website, users read less information the further they go into the product. They began to rely on the images. Feedback was mixed and rarely accurate when a user tried to build a narrative from the images alone. This indicated that our imagery could use improvement in its content and presentation order.
3: Users who assumed this was an infographic were confused about the downward chevron and its purpose. This indicated a need to more clearly indicate navigation.
In our next iteration of our website, we followed a similar appearance to other popular organizations. We moved away from a mobile phone format to a website format to account for responsiveness of our website, which would be helpful during development later on. Our color scheme was chosen to match with SOS’s current color palette on their cards and posters.
Here's a rundown of the updated prototype, segmented by sections of the site:
The first thing we wanted our users to see was the attention grabbing tag-line. We provided a video that users could watch if they were in a hurry and did not want to read the entire website
The icons were chosen to help impart important information to the user as they scroll down the page while at the same time attracting their attention with the simple icons and bolded words.
One of SOS’s issues we identified during our interviews was the struggle they had in explaining how their system worked in a short but concise way. By combining images and clear statements we came up with this infographic for users to read and learn about the system.
The images of the cards were important to add, since not all visitors to the site would have foreknowledge of the SOS cards and what they would like. The three dinner plates were used to emphasis part of the process, mainly how any user’s donation could actually translate to meals and exactly how many.
Holly, the President of SOS made it clear that in order to promote the organization better, she thinks students need to know where their donations are going. To accomplish this, we added these descriptions about Food Finders and Land of a Thousand Hills. We also provided an opportunity to learn more about the organizations through the “Learn More” buttons.
We also felt it was necessary to add in links to all of SOS’s current social media pages to help the organization’s struggle of raising awareness for their organization on campus and to hopefully spread the word about it. And in testing we found that many users felt that labeling the social media accounts would be helpful since they unsure of the last one, which we created for SOS’s BoilerLink page.
To test our prototype, we conducted desirability testing to gauge what our users felt about our website.
We tested 3 female Purdue students within the age range of 19-21.
To do this, we laid out many cards on a table with adjectives on them. We allowed users to browse our site, explaining what they thought each section of the page meant, and then asked them to pick 3 cards that described their overall experience with the website. These are the cards participants were shown:
Considering our results from our Desirability Testing, we made the following changes:
We changed the text to say “Watch Our Video”, since one of our testers did not know what the video was for.
We added a blurb to explain how much money Swipe out Starvation gives to FF and LTH since one of our users pointed out that we didn’t mention that.
We added labels for our icons given that our testers didn’t know what the Purdue icon was.
reflection + takeaways
We were able to show our final prototype to the leaders of Swipe out Starvation in our last meeting with them. They were incredibly impressed with our prototype, and were astonished with the amount of detail and thought we put into making the website.
I'm constantly learning new things with each project that I work on. Something that I learned with this project is that interpersonal skills are a key component to doing good design work. Great design teams are ones that know the work styles, personalities, strengths, and weaknesses of each group member.