Nourishing Student Success at Santa Monica College
My Role
User Research
Usability Testing
UX Copywriting
Information Architecture
Team
Zoe Torrealba Marin
Ben Tseitlin
Alice Hoh
Irene Rivera
Information Architecture
Click to view SMC's Food Pantry Website Site Map
Sitemap and User Flow
Our main priority in the sitemap and user flow was an onboarding/walkthrough of what to expect when going to Santa Monica College’s Drive Thru Food Pantry. This was a pain point from our user interviews we conducted earlier on. The team then created and organized pages “Resources” and “Announcements”. From our competitive analysis we found that many other colleges and universities provided external food aid so we wanted to create an interactive map with other food options. Stakeholder Lizzy Moore shared that she wanted the website to also be place a where the SMC Food Pantry could communicate with students of what was happening during the Drive Thru Food Pantry we designated an area for events to be posted.
Click to view the user flow regarding to completing a Food Pantry Walk Through
High Fidelity Prototype
High Fidelity Mock Up of Homepage (designed by Zoe T & Alice H)
High Fidelity Mock Up
We removed several of the CTA buttons in the hero section of the homepage to declutter and give hierarchy to our users. We used more direct language (“How It Works”) in the CTA button for viewing the process of going through the Drive Thru Food Pantry. We also removed the tagline in this area to avoid any confusion of what type of website it was.
High Fidelity Mock Up of Recipes by me
Recipes Page
With our recipes page we took into consideration what stakeholders shared with us about the inventory of food. The food will always be varied but there are definitely some staples that are commonly given to students like oatmeal, celery and grapes. However, there are food items that might be less commonly consumed like patty pan squash and purple carrots that some students might not know how to prepare. We organized the recipe categories to simply “Veggies”, “Fruit” and “Pantry Goods”. We then removed search feature but can always be added later as the recipe database grows.
High Fidelity Mock Up of Homepage (designed by Zoe T & Alice H)
Food Pantry Walkthrough
The walkthrough was condensed as user testing verified that it was too long. We also provided a “text to mobile” feature in which students could enter their mobile numbers on the website and receive the walkthrough link which they can open up when they get to the Drive Thru Food Pantry.
Reflection
Stakeholders Needs
Having contact with stakeholders allowed us to figure out limitations early on. However, we still wanted to keep the users/ Santa Monica College students in mind. We delicately had to handle with care our relationship between both the students and SMC stakeholders. This piqued my interest in how to facilitate co-creative workshop with stakeholders so I can gain better perspective and buy in with them.
High Fidelity Mock Up User Test
We spent a great portion in developing and testing the first iteration. One thing I learned from that is to stay on top of my timeline during this phase. Staying within our time frame could have allowed us the luxury of doing a user test in the high fidelity version of the website and stronger prototype to show to our stakeholders.