Cornell Places is a mobile-first design.
Timeline
December 2020
December 2020
Team
Design: Sara Choi
Front-end: Ria Vora
Back-end: Woosang Kang, Kate Liang, and Neil Madhavani
Design: Sara Choi
Front-end: Ria Vora
Back-end: Woosang Kang, Kate Liang, and Neil Madhavani
Role
UX researcher and designer
UX researcher and designer
Platform
Figma
Figma
Problem space
Current situation
Google Maps and other GPS-navigation apps are usually sufficient for helping students find their way from building to building, but not for finding the nearest bathroom with free pads or vending machines with the elusive Pure Leaf peach teas.
Google Maps and other GPS-navigation apps are usually sufficient for helping students find their way from building to building, but not for finding the nearest bathroom with free pads or vending machines with the elusive Pure Leaf peach teas.
In this hack challenge, my team and I developed a solution to make location information more accessible for campus amenities like vending machines, free menstrual products, and other things students might need in a pinch.
User research
Objectives
We wanted to understand:
• How users gather the information necessary to find what they need
• The barriers users face when looking for those items or services on campus
• How the pandemic has influenced their process for finding those places
We wanted to understand:
• How users gather the information necessary to find what they need
• The barriers users face when looking for those items or services on campus
• How the pandemic has influenced their process for finding those places
Research synthesis
Trends
• Participants consult several resources, such as searching Ithaca bank websites to find campus ATMs, asking friends and classmates about their experiences, and browsing the school Reddit page, to find information on the same topic.
• Before COVID, participants most often needed or borrowed menstrual products, snacks, writing utensils, and cash while on campus.
• During the pandemic, most prefer not to borrow from anyone, even from friends.
• Some participants who have limited access to menstrual products won't ask to borrow because they're embarrassed.
Key insights
• People like convenience and want to see information consolidated in one place.
• Students lend and borrow less due to safety issues during the pandemic, but their needs remain the same.
• People avoid borrowing because it puts them in awkward social situations.
• Participants consult several resources, such as searching Ithaca bank websites to find campus ATMs, asking friends and classmates about their experiences, and browsing the school Reddit page, to find information on the same topic.
• Before COVID, participants most often needed or borrowed menstrual products, snacks, writing utensils, and cash while on campus.
• During the pandemic, most prefer not to borrow from anyone, even from friends.
• Some participants who have limited access to menstrual products won't ask to borrow because they're embarrassed.
Key insights
• People like convenience and want to see information consolidated in one place.
• Students lend and borrow less due to safety issues during the pandemic, but their needs remain the same.
• People avoid borrowing because it puts them in awkward social situations.
People problem
College students need access to campus amenities to facilitate their transition to independent adult life. However, they underutilize these resources because:
1. It's inefficient to consult multiple resources for simple tasks.
2. Students want to avoid the social stigma associated with asking for help.
1. It's inefficient to consult multiple resources for simple tasks.
2. Students want to avoid the social stigma associated with asking for help.
Information hierarchy
After identifying the core issue, we had a rough idea of the tasks my team's app should help users accomplish. I started with a diagram of the interface's information hierarchy to better visualize this.
Information hierarchy
Initial proposal
After finalizing the architecture of our app, backend set up the app infrastructure while I started wireframing.
Sign-in screen
Optional sign-in
•Users like having the power to choose - they don't want to be funneled through a one-way avenue.
• Not marking required fields reduces users' stress and doesn't restrict their ability to make decisions.
• The "SKIP" button is placed away from the main sign-in content since most students will use their Cornell NetIDs.
• Not marking required fields reduces users' stress and doesn't restrict their ability to make decisions.
• The "SKIP" button is placed away from the main sign-in content since most students will use their Cornell NetIDs.
Users can view locations by category.
Tile and map view
Toggle view lets users choose if they want to view results as tiles or location map pins.
Highlighting the selected category and updating the header tells the user exactly what they're looking at.
Category labels are cut off at the end to indicate the user can scroll horizontally.
Highlighting the selected category and updating the header tells the user exactly what they're looking at.
Category labels are cut off at the end to indicate the user can scroll horizontally.
Users can view individual place profiles for more details.
Place profiles
Main photo of place allows for easy recognition.
Rounded chips (e.g., BRBs, Cash, and Credit for vending machines or Withdraw and Deposit for ATMs) tell the user what they can do at this location.
Status updates like "out of order" or "working" for machines and "depleted" alert users ahead of time if visiting places with free resources (e.g., pads).
"Notes" line puts key information in front of users so they don't have to comb through reviews.
Map preview shows users the general part of campus the resource is located in.
The average rating at the top provides a general sense of how much students like the particular place.
Reviews at the bottom provide users with additional details and student opinions.
Rounded chips (e.g., BRBs, Cash, and Credit for vending machines or Withdraw and Deposit for ATMs) tell the user what they can do at this location.
Status updates like "out of order" or "working" for machines and "depleted" alert users ahead of time if visiting places with free resources (e.g., pads).
"Notes" line puts key information in front of users so they don't have to comb through reviews.
Map preview shows users the general part of campus the resource is located in.
The average rating at the top provides a general sense of how much students like the particular place.
Reviews at the bottom provide users with additional details and student opinions.
Users can adjust their account settings.
Saved places
Saved places list uses same card layout as the general results screen but doesn't separate entries by category.
Entries are sorted by last added, ascending.
Card bookmark icons allow for convenient removal.
Individual cards lead to location profile pages.
User profile icon in header opens account settings.
Prominent "SIGN OUT" button calls attention to the main CTA.
"Send feedback" and "More information" buttons lead to pages team contact/description pages.
Entries are sorted by last added, ascending.
Card bookmark icons allow for convenient removal.
Individual cards lead to location profile pages.
User profile icon in header opens account settings.
Prominent "SIGN OUT" button calls attention to the main CTA.
"Send feedback" and "More information" buttons lead to pages team contact/description pages.
New proposal
Even though I designed my initial screens based on insights from user interviews, they weren't technologically feasible for the developers to finish for our two-week turnaround.
I needed to check in with them frequently to make sure my next proposal was achievable and would still satisfy user needs. Here are the final screens implemented for our MVP:
While most of the key features from the first iteration stayed the same, we decided to implement these changes for our next round:
• Forced sign-in
• Navigation bar icons replaced "Home" and "Saved" with "Tiles" and "User"
• Search bar included on Tile page as well as map
• Reduced categories to only Blue Light stations, bathrooms, and water bottle stations
• Text reviews, not images, are the primary content on each profile
• Additional "User" page to view all posted reviews and saved places
• Navigation bar icons replaced "Home" and "Saved" with "Tiles" and "User"
• Search bar included on Tile page as well as map
• Reduced categories to only Blue Light stations, bathrooms, and water bottle stations
• Text reviews, not images, are the primary content on each profile
• Additional "User" page to view all posted reviews and saved places
Final interaction
Check out our MVP walkthrough video narrated by Ria below.
Cornell Places - final screens
Takeaways
This was my first time working on a team with engineers, and it was an important lesson in constant communication, collaboration, and teamwork. It was a new experience for me, but it was also one of the most seamless, cohesive group efforts I've ever had the pleasure of being a part of. As a designer, I found it eye-opening to watch my wireframes develop into actual software in real time and observe the underlying framework that brought it to life.
Time was definitely a constraint for this project, and I had to shorten my research process to just the most essential stages. It was two weeks of around-the-clock work and late-night Zoom meetings, but out of 24 teams and 120+ participants, our team won the grand prize and took home the award for Best Overall!
Time was definitely a constraint for this project, and I had to shorten my research process to just the most essential stages. It was two weeks of around-the-clock work and late-night Zoom meetings, but out of 24 teams and 120+ participants, our team won the grand prize and took home the award for Best Overall!
We're super happy with how our app turned out, but we're continuing to make improvements and develop it further. For next steps, I'd like to interview more student users and conduct usability tests as well as create visual explorations to better establish the app's branding. In the future, we hope to add more location categories and develop additional features for users to add their own places to the map, attach photos to their reviews, and delete reviews they've written.
Some (Zoom) photos from awards night:
Some (Zoom) photos from awards night:
