UI/UX Research

Small Scale Street Vendors Finder App — UI/UX Case Study

Design, prototype, and evaluate an interactive mobile app

Have you ever had food from this amazing street vendor and then came back the next day just to see that they were nowhere to be found? Now, you are left alone with the taste of their delicious food in your memories forever, knowing that you are probably not going to be able to experience this feeling ever again…This feeling is what myself, Lindsey Selena Garcia, and Thuc Nguyen wanted to address for our UI/UX Case Study as Software Engineering Graduate students at the University of California, Irvine where we were free to choose an innovative app idea.

We are going to:

  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test

EMPATHIZE

Upon returning home to India, one of the famous recommendations that I got was to visit the “Sundari Akka Kadai” and have fish curry. Me, an intellectual, assumed that it must be a famous restaurant, coming back from my trip to Japan, who would have imagined it is a street vendor and didn’t have their location pinned officially on Google Maps. To my surprise, this was true and the cart-like shop was located near the beach among hundreds of other street vendors. Oh god, delicious! Just the essence my Grandma’s curry has! Intellectual me looked up a few videos and articles about this vendor, like this one. So Rs.100 for one plate, average 200 customers a day, that is, one month salary of an entry-level Software Engineer in just two days! Always knew I should have learned to cook…well. Fine, hard-work and luck got them here but what about the others?

Comparison between a street vendors’ cart and a food truck
Comparison between a street vendors’ cart and a food truck

Even though the essence of the idea started from thinking about a way to track the food trucks that are around UCI campus and make the most out of it, we drifted quickly towards targeting street vendors instead because there are apps out there for food trucks.

Our goal is to help all such small scale workers to reach an economic standing in life. They clearly had the motivations and deliverable standards similar to the restaurants but didn’t have the resources to build structures in serving their customers.

So what do we want to do?

Same as every other 16-year old that learnt a bit of Android, let’s make a mobile app for mobile people! Yeey! Wait we will talk about our design decisions in the prototype section later on, but for now, we are basic researchers addressing basic needs.

If vendors can mark their location and make it known to the customers where they are, the customers would know where to go to buy their food. Vendors simply need to use their mobile devices to make the mark and users only need to use their device to search for available vendors.

DEFINE

But, there is an app for everything. Who is our direct competition?

Elote Finder is a mobile application where the main goal of the app is to provide users with a way to mark the locations of Elote stands or find stands that have their locations already marked.

The app honestly does not work very well. Upon testing the application, there are no locations of nearby elote stands available even in popular locations, despite a few showing up on Google Maps and Yelp. It is unclear whether this lack of locations is due to an issue with the functionality of the app or a lack of users. However, when we decided to “Add an Elote Stand”, we noticed that there was a failure pop-up due to back-end issues.

Elote Finder iOS App [our direct competitor]

What did we learn from the other five food apps on our phone?

  1. Good branding, marketing, and optimal rating engines are crucial.
  2. As many businesses are linked to these apps, it provides legitimacy for the business and also helps them grow their customer base.
  3. The more a user reviews on businesses, and as more people find these reviews helpful, those users gain a reputation in the form of badges.

Then, there is the app that is nowhere related to food — Google Maps

The system is by far the biggest competitor used by anyone and everyone and has the major advantage as a default app in Android. The app has a reliable user base owing to its reliable and successful execution compared to other mapping services.

What did we learn from our user research?

We conducted a survey using Google forms and circulated through our social media accounts. We also interviewed multiple potential users via Zoom, WhatsApp, or Messenger, as we were unable to conduct in-person interviews due to the COVID-19 pandemic.

Key takeaways from our survey:

  • Well done developed countries! Japan and the United States were the only countries that had surveyees that completely disagreed to eat from street vendors. Several responses indicated that they have never come across a street vendor or have led a very healthy lifestyle.
  • Money money! The only users that disagreed to eat from the street vendors were earning more than $100,000.
  • So many street vendors in developing countries! We found that the percentage of people that ate more than 15 times per year were primarily from India and Indonesia. Again, Japan and US respondents mentioned they have never seen one.

Let’s get personal with the interviews:

  • How do people share their experiences currently?

“I take pictures, I upload on Instagram! People reply if it looks good and I try to give them back the exact address. I give them a disclaimer that maybe they won’t be there tomorrow.”

  • Why would you eat from street vendors?

“Look, dude, I am an entry-level engineer and I don’t know how to cook. This food is cheap and the taste is just like back home. So why not?”

“I am a student and this is affordable, like $4 and filling. I can’t be spending $15 on a meal every day.”

“The cultural value it holds, doesn’t come from any big-name restaurant! I feel they deserve higher tips for the service...”

Hence, our user personas mainly consisted of students, career starters, food enthusiasts and street vendors.

IDEATE

Confession time…

Honestly, we thought of eloteros first, wait it’s fine to not know the definition.

Eloteros are vendors who primarily sell corn while giving buyers the option to add toppings to the corn such as chili powder, lemon, mayonnaise, and so forth.

As we moved through the interview and survey questionnaire, we realized 70% of our time went on explaining who eloteros are and giving examples in different countries, so that it is relatable. Ah-ha, wait there are more of these vendors we could help?! Let’s cover a broader market instead and include all the small scale street vendors! Don’t be surprised if we mention Elotero Finder App in our prototype. Isn’t it all about learning as UI/UX researchers, even though if it was after Week 5 of the Course Project?

Of course, we had wild ideas to change the app altogether and address any small scale vendors, why limit it to food? but then the food industry seemed to be more promising for the app.

Story Board of Elotero Finder

Initial Sketches

PROTOTYPE

We designed the prototype using Canva and created links between the screens using Marvel.

Screens 1–3 of prototype
  • Screen #1: After successfully signing in, the user will see a feed as the default. The navigation bar on the top has two options, public reviews and connection reviews. On public feed, the user will find reviews left by any user that uses the app to give a review. On connection feed, the user will find reviews left by their connections. The user can always return to this view by clicking the home icon in the bottom navigation bar.

We were presented with whether we should choose a single or double feed but keeping our main goal in mind which is to make it available for small scale workers and a lot of that has to do with branding, so we decided to include public reviews’ feed. What makes our app different from other food apps is also because we have a feed combined to the app.

  • Screen #2: This view has a map integrated. The user can look for specific names of eloteros or locations to find eloteros. On clicking the elotero displayed in the map, a small prompt with details opens up as indicated in the figure.
  • Screen #3: We see a list of eloteros nearby, again a form of temptation, if there is one right near the user, chances are high that they might give it a shot. This is a list view of their names, descriptions, and ratings ordered by distance.
Screens 4–6 of prototype
  • Screen #4: Represents the user’s profile. Here, we see the reviews the user has left. On the upper right corner, there is an icon that opens general settings, notifications, and other functionalities.

Here we also display the number of eloteros the user has left reviews for, as this will make the user conscious about leaving more reviews and this helps with the branding.

  • Screen #5: On clicking the review, other users can comment on it or like the review, which makes it more social!
  • Screen #6: This view shows followers and the main feature covered here is the number of reviews left, as we want to promote users in participating within the app.
Screens 7–9 of prototype
  • Screen #7: When the user opens an elotero profile, they see the following screen. The interface gives an active location icon which helps the user to navigate to the exact address. We included buttons for the menu and followers for users interested in viewing it. The followers can be used as a way to ensure product quality if the user desires. The description mandates experience and cultural roots. This is also where the user can leave a review after they finish eating the elote.
  • Screen #8: The review pop up where the user can rate the elotero and write a comment. It shows the name, and profile picture, if added.
  • Screen #9: Simple Menu screen with just the right amount of details.

TEST

Heuristic evaluation

We conducted a Heuristic evaluation using Nielsen’s 10 general principles for interaction design.

  • Our app supports match between system and the real world by using words, phrases, and concepts that would be familiar to the user.
  • The user may want to remember the name of the elotero they visited when writing a review for that particular elotero. We effectively support recognition rather than recall in this specific situation by including the elotero’s name on the review page.
  • Our app is effective in providing the user with appropriate feedback and hence supports the visibility of system status. Every button press in the app would redirect the user to the appropriate screen.
  • Our app does not completely meet the requirements for the “Help users recognize, diagnose, and recover from errors” heuristic since it does not include any error messages in the prototype. We should account for any errors on the infrastructure side.
  • Our app supports flexibility and efficiency of use but it is still somewhat questionable whether eloteros would have the means to access these apps and be able to understand the basic notions. We felt that the eloteros’ page might be overwhelming to handle as a beginner to mobile apps.

Accessibility evaluation

We referenced to WebAim’s WCAG 2 checklist to conduct an accessibility evaluation.

Guidelines for certain content were inapplicable because the design of our application does not include that content. For example, our elotero application does not have video or audio playbacks. We will forgo these parts of the checklist.

  • The checklist suggests that applications should have alternative text for all images and buttons. This would be done in the implementation of the system in the source code.
  • Word-usage is very straightforward and clear-cut and there are no large blocks of text. In addition, the text is properly spaced with readable font size, and vocabulary isn’t complex or ambiguous. Furthermore, there are not any sort of transitions, actions, or content that will pop up. Neither are there any time limits for the user that will restrict them to complete a certain task in a given amount of time.

By doing all of this, we aim to be inclusive of people who may have cognitive and neurological disabilities such as those with seizure disorders, learning disabilities, autism, or memory disorders.

  • We have followed a minimalist design for the Elote Finder application. The color scheme is consistent throughout the app. Furthermore, each card view that either displays user comments and posts, or a brief image and description of an elotero, is clearly divided and allotted a good amount of space for readability.
  • There are also colors that we use for certain icons that are for the most part universally accepted: yellow for stars (ratings), and red for hearts (likes).
  • When users execute this application, they are met with a view that acts as the main container and a tab bar that gives the user navigation options. The icons that allow users to navigate to another view when clicked contain images that imply where they can go: to the home page, the map page, a listing of nearby eloteros, and a profile page.

Altogether, the combination of a consistent color scheme, the usage of subviews to separate content, and the inclusion of tab action buttons for clear navigation work together to help overcome visual barriers.

Conclusion

We are hopeful that our product idea will target the wellness of both the kinds of users — vendors, and customers. As these street vendors’ food are very cheap, we believe it would profit thousands of students, food enthusiasts, travelers that go in the quest for the local food. We imagine our app to be able to help “startups” in the food industry to get to “midsize companies”. In addition, we hope to preserve the cultural values their food serves!

We would like to express our gratitude to professor Matthew Bietz and the TA, Xi Lu. Our special thanks to all the respondents of our survey and the interviewees! You know who you are, you are all awesome!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store