CONCEPTUALIZATION
StreetFlavor was inspired by my childhood in the Philippines, particularly my grandmother, Linda. Growing up, I shared experiences with others in my grandmother's unique neighborhood, her house was built on a rock in front of an abandoned hospital where homeless people lived. I became friends with the children from the abandoned building, and we enjoyed waiting for the Taho Man and Sorbetes Man who brought food. My grandmother and mother introduced me to Filipino street food, and I cherish these memories.
As a Filipino living abroad, I miss the food and the joy of sharing meals with loved ones and strangers who enjoy the same street food.
PROJECT OVERVIEW
In this project with Google Careers (UXD), I worked as the lead UX researcher and a concept developer. I created a responsive website called “StreetFlavor”. It gives access to customers to purchase their favorite Filipino street food online and have it delivered right to their doorstep.
Project duration: August - September 2023
THE CHALLENGE
Create a responsive website for your favorite food service.
THE GOAL
We are extending the reach of the customers by going live and providing an online platform with a delivery service.
RESEARCH & IDEATION
To determine user pain points, I focused on researching 4 key components.
USER RESEARCH
PERSONAS
PROBLEM STATEMENTS
USER JOURNEY MAPS
SITEMAP
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. A simple and easy structure.
WIREFRAMES
Started initial designs with paper wireframes for the home page keeping the user pain points about navigation, browsing, and checkout flow in mind.
(with different devices, designs for additional screen sizes are necessary to ensure the site is fully responsive).
GESTALT PRINCIPLES
Similarity, Proximity, and Common Region.
Using similarity, proximity, and common region in information architecture helps users make sense of information more easily.
In simpler terms, applying these principles on the website makes it intuitive for users to find what they're looking for by organizing and presenting information in a way that reflects its relationships and similarities.
USABILITY TESTING
I needed to change plenty of design variables and improve usability heuristics based on the feedback of the participants. To acquire such data from them, I conducted an unmoderated usability study on 5 participants.
This is the pattern identification table I created to summarize the biggest pain points the participants experienced during the usability testing. I revamped the whole website because of this.
This cycle really helped me improve my workflow as a UX designer.
To complete this cycle I completed the necessary steps:
Redesigned the website completely
Tested the user flow and functionality of the low-fidelity prototype through a usability study
Converted the data into actionable design items (after analysis)
Iterated on the design based on the actionable design items
NEW & IMPROVED DESIGN
IPAD
SCREEN SIZE VARIATIONS
WEBSITE
MOBILE APP
MOCK UP
Based on the insights from the usability study, I made changes to improve the site’s navigation flow. I added more buttons such as: Cart, Trash, Back and Back to Home.
ASK BLIPBLOP!
The new design includes a new feature; an AI Chatbot (Ask Blipblop) with high-tech accessibility features. It caters to user’s needs and questions. Visually impaired users are given a virtual tour of each page by being guided with narrative support from Blipblop. It reads them the menu when requested, and guides them through making payments.
IMPACT
Our target users shared that the design was easier to navigate through, was more engaging with the images and added pages to help them understand more about the products and that the website demonstrated a clear visual hierarchy.
WHAT I LEARNED
It important to have an understanding for information architecture and usability heuristics. When users know the current system status, they learn the outcome of their prior interactions and determine the next steps. Predictable interactions create trust in the product as well as the brand. The most important takeaway for me is to always focus on the real needs of the user and how every user has their own unique needs. UX designers need to think about EVERYONE when coming up with design ideas and solutions. The whole point of accessibility is so that no one is refrained from using and enjoying the experience.