Responsive Website to Make Healthy Food Accessible for All Communities
My Role
A UX Designer who worked on the entire project from start to finish.
Table of Contents
1. Project Overview | 2. Understanding the User | 3. Starting the Design |
1. Project Overview
The Product
A responsive website that allows all users, including low-income residents, to purchase healthy foods and meals at a discounted price. Users can place orders online and schedule delivery of their food.
Tools
Pen & Paper
Figma
Project Duration
2-3 Weeks
The Challenges
- Food Deserts. Access to healthy, nutritious, and affordable foods is often limited in low-income and historically marginalized areas, commonly called food deserts, as reported by healthline.com.
- Car-Dependent City Accessing everyday activities can be challenging without a dependable mode of transportation. In some areas, sidewalks and pedestrian infrastructure may be lacking.
- Healthy Food is Unaffordable for Low-Income Residents. Low-income residents often struggle to afford healthy food due to its higher price than cheaper, less nutritious processed foods.
The Goal
- To design a resonsive website that provides access to affordable and nutritious food options for low-income residences while accessible for all residents.
- This websites offers healthy meals and food items that can help users save time, energy, and money while reducing their reliance on processed foods that may negatively affect their health over time.
2. Understanding the User
User Research Summary
Through extensive research on food deserts and a deep exploration of the challenges affected communities face, I have gained a comprehensive understanding of the issues at hand. As a result, I am fully equipped to meet their needs by ensuring that healthy food options are accessible to them and their household.
Pain Points
There are no grocery stores nearby to access produce and healthy foods.
The lack of time because of work and life results in poor eating habits.
Healthy food is expensive for low-income communities.
Persona 1: Jessica Fuentes
“There’s really nothing out here. It’s usually a hassle, so we get it delivered to us. That way, we don’t drive. So far, we’re not because I have a newborn, and it’s hard to get to there and come back.”
26
Age
Bachelor's Degree
Education
San Antonio, Texas
Hometown
Personal Care and Service
Occupation
Problem Statement
Jessica Fuentes is a long-time San Antonio resident who needs to get groceries without leaving her home so that she can take care of her newborn and because the closest grocery store is miles away.
Goals
- Not having to drive far to the nearest grocery store.
- Having food delivered to her home at the right time.
- Spend more time with her newborn.
Frustrations
- The nearest grocery store is far from her home.
- The logistics of driving far to the grocery store and back while raising her newborn simultaneously.
Persona 2: Blanca Delgado
“Physical activity is hard to do in those neighborhoods because of safety and lack of sidewalks and proper lighting of the streets. Also, if you are paying 1 dollar for a cucumber or a dollar for ramen noodles, which do you think would feed your kids more efficiently? And if you are on SNAP, you still have to get whatever is cheaper and better for filling stomachs longer.”
66
Age
No High School Diploma
Education
San Antonio, Texas
Hometown
Retired
Occupation
Problem Statement
Blanca Delgado is a retired San Antonio resident who needs healthy food to satisfy her and her household’s hunger at an affordable cost because healthy food is out of reach economically and far from her area.
Goals
- Buy healthy food without hurting financially.
- The food she buys satisfies her and her household’s hunger for a long time.
Frustrations
- Her neighborhood isn’t safe to walk to food stores.
- Finding healthy food to feed her household without hurting her finances and staying hungry.
Persona 3: Teresa Rubio
“The worst is when you run out of something, and you have to have it, and you don’t have the money to go into town. Not having a grocery store nearby is harmful for those that live in a rural area.”
23
Age
High School Diploma
Education
Loyosa, Texas
Hometown
Food Preparation and Serving
Occupation
Problem Statement
Teresa Rubio lives in rural parts outside of San Antonio, lives 20 miles away from the nearest grocery store, and needs to plan her trips and meals wisely because she cannot afford to make multiple trips to the grocery store to get everything she needs.
Goals
- Get all the items she needs at once.
- Have access to healthy foods whenever she wants without taking multiple trips to the store.
Frustrations
- Not having a grocery store nearby.
- Running out of items and can’t afford a trip to the grocery store.
3. Starting the Design
Paper Wireframes
I sketched the wireframes to come up with ideas on how to address user pain points.
The stars on the wireframe represent elements used for the vacation rental booking app homepage.
Digital Wireframes
Search Filter
The use of search filters for the responsive website can be beneficial for individuals. It allows them to browse properties casually or narrow down their search to find the perfect rental property.
Design Choices - Search Filter
The search filter feature enables users to efficiently filter their choices and locate the rental property that most closely aligns with their requirements.
House Rules More Visible
The house rules are clearly visible above the fold to users upon viewing the listing and do not require any additional scrolling, which reduces the risk of missing or disregarding them in favor of other details.
Design Choices - House Rules More Visible
The rental home shows the specific house rules adjacent to essential features, from the number of bedrooms and bathrooms to the ratings, so users can see them clearly and be aware of them before determining if the vacation rental home best fits their needs and avoiding tension with the host.
Built-In Messaging
Hosts and guests can communicate without exchanging personal contact information, which helps to ensure privacy and prevent any potential misuse of data outside of the website.
Design Choices - Built-In Messaging
- The website provides messaging services for guests and hosts to communicate without relying on third-party applications or software.
- The format of the text messages is intentionally similar to messaging services commonly used on mobile devices and messaging apps, in order to offer a familiar experience for users accustomed to those services.
Low-Fidelity Prototype – Mobile
Low-Fidelity Prototype – Desktop
Usability Study Findings
During the usability study, we utilize low-fidelity wireframes which the users provide feedback on to improve and refine the user experience for the mockups.
Round 1 Findings
1.
No acknowledgment that guests read and checked house rules during the booking process.
2.
Users have to scroll down within the filter options to save filter preferences.
3.
Information on additional guests must be approved and completed before confirmation can be approved and completed.
4. Refining the Design
Mockups
Filter Call-To-Action Buttons Placement
The filter options’ call-to-action buttons remain visible and fixed on the screen while users scroll down to access their preferred preferences. This feature enables users to save and clear their filter options without unnecessarily scrolling down.
Before Usability Study
After Usability Study
Before Usability Study
After Usability Study
User Reading & Confirm House Rules
It is important for users to review the host’s house rules before finalizing their booking to ensure they have a clear understanding of them. This helps to prevent hosting guests who may not be a good fit and minimizes the risk of conflicts among guests.
Before Usability Study
After Usability Study
Before Usability Study
After Usability Study
Mockups
Mobile – High-Fidelity Prototype
Desktop – High-Fidelity Prototype
Accessibility Considerations
1.
When using a desktop, website pages can be navigated efficiently using a keyboard.
2.
Limit the use of visual effects and animations, To avoid distracting users from their tasks and causing disorientation
3.
Having a strong color contrast, large font sizes, and line heights to enhance readability for users.
5: Going Forward
Impact
The website for booking vacation rentals is responsive, so it adjusts to fit various screen sizes on different devices so that users can complete the primary task. The mobile-first approach ensures that essential elements to complete the primary task are prioritized when creating the responsive website.
What I Learned
Ensuring guest satisfaction can be a challenging task for renters. One of the main obstacles in this process is the potential for dishonesty during the booking process.
Confirming guests’ understanding of the rules and ensuring compliance can significantly impact the booking process and determine if the renter will have peace of mind that relevant guests will rent their property.
To achieve a balance between the needs of renters and guests, it’s essential to view issues arising from fraudulent bookings as opportunities for improvement. This approach can lead to a better experience for the vacation rental home website.