Creating a Marketplace for Online Food Businesses
It all started with my love for food.
Two years ago, during my last few months in high school, I started my design journey. I didn’t know anything about UX back then — all I was was a high school student who gets excited when the teacher says we’re doing a presentation or an infographic because I LOVE creating visuals. I don’t draw. I just mess around with shapes and type since I was little, and I think that developed my eye for aesthetics.
I started my journey in user experience design by joining UX Society’s UX University 2019 as a high school student (only for the workshops because the competition was exclusive for undergraduates of the university). I learned a lot from Alexis, Kate, Frances, Brian, Jiggy, Avery, and Andi (hi guys!) — from ideation to visual design fundamentals to usability testing. After those two days, I already knew where I’m headed for university and what org I’m pursuing.
I said it all started with food, right? Yup. Since I didn’t really get the chance to make my case study during the competition, I said to myself, “I’ll make one,” and the first thing that came to mind was food.
How about a social media platform for food enthusiasts?
That idea was BIG in my head before. I jumped into Figma right away and started designing screens (skipped the wireframing process hehe). But, I think I stopped after the home and onboarding pages, probably because the project was too much passion that it lacked purpose. Well, at least I got to practice my skills for user interface design, and that was my humble beginning.
Fast forward to 2021 (yes, I hate the pandemic), I already graduated high school and now, I’m finishing my sophomore year as an information design student (speed). I’m enlisted in Ms. Laura’s art research class, and for the class’ final requirement, we were to come up with an arts-based research that we’re passionate about. The way I defined art was it a subject of creativity and passion (it’s a plus if the community sees it’s value too). Boom.
How about I create my first ever UX case study?
Why start a UX design case study?
Covid sucks. Lots of people lost their jobs and my family wasn’t spared from this unfortunate reality. I asked myself, “How can I help the community in these times?”
I’ve been scrolling through Facebook and Instagram, and saw most friends opening their own small businesses — selling homemade pastries, sushi bakes, ube pandesal, and more of those good stuff. They made their passion for cooking and baking an opportunity to earn. They were everywhere. I saw an opportunity to make something special for them. Then, I thought of this:
How might we streamline the processes of small online food businesses for both sellers and buyers?
Starting off, I had my initial assumptions that…
- The process of starting a business is a rough one,
- Running an online business is exhausting, and
- Online business owners are using way too much apps daily.
Research
Before continuing, I first had to validate these assumptions. If these weren’t problems being experienced by the stakeholders, then I couldn’t really make my dream into reality ‘cause I’ll just be creating my own problem to solve. lol.
I had user interviews and focus group discussions with stakeholders, both buyers and sellers, on their experiences and thoughts with online food businesses. From these conversations, I was able to create empathy maps to visualize what’s really happening from both perspectives.
Ha! I was right. There was a problem.
Just from putting myself out there, I learned that not all things seen or heard by buyers and sellers were positive. To cut things short, sellers are overwhelmed because of flooded messages, oversaturated markets, and using having to use multiple apps to accomplish their task from promoting their businesses to delivering products to buyers. On the other hand, buyers are accustomed to encountering inconsistencies with product images and prices, long order forms, irrelevant products, and so many ads (Facebook, tsk tsk).
With our conversations, sellers were able to share their experiences and processes—and no joke, there was a lot on their plates than what I expected. They’re like designers — despite specializations, we are driving along a generalist growth to survive the industry — sellers were too. Behind “online business”, they had to be their own social media managers, advertising and marketing agencies, accountants, chefs/bakers, blog writers, and the list goes on. That’s tough.
For buyers, on the other hand, it’s easy to tell someone to buy something, but when they’re faced with the paradox of choice, it becomes a chore. There are indecisive and picky buyers out there, and having a platform saturated with markets and advertisements wouldn’t really help them. This is why they tend to stick with the businesses their friends own, other businesses don’t get to see the light of day.
For both, lots applications are certainly being used for this process.
- Facebook, Instagram, Twitter, and Viber — browsing food options and small businesses.
- Messenger, Viber, and SMS — asking questions and receiving updates.
- Grab and Lalamove — deliveries.
- GCash and Online Banking Apps — order payments.
- Google Sheets, Notion, and Excel — order and finance tracking.
Stakeholders jump from one application to another all day long. It’s like I’ve been listening to a song on loop how overwhelming and exhausting their reality is. Well, no one said creating a business is an easy task, but it doesn’t mean it should be that way forever, right?
Motivations and Frustrations
With their stories, I became confident (and even more passionate) that the question came up, “How might we streamline the processes of small online food businesses for both sellers and buyers,” is valid and a significant one to design a solution for.
To be guided throughout the project, I listed down what motivates both stakeholders and what frustrates them, too. In doing so, at least I’ll be sure of what features to pursue and avoid.
I was able to come up with how-might-we’s—questions we ask ourselves for to make ideas for a design solution. Personally, when I start my questions with a how might we…, thinking of a solution becomes easier (and friendlier).
For example, a common frustration among buyers is the messy information architecture of online small food businesses on various platforms. I came up with, “How might we simplify the shopping experience of buyers”. The question, then, opens up to a vast possibility of solutions.
An app for everything
A common pain point among stakeholders really comes from going from one application to another to finish the job. They can’t stress it enough, I can’t too (>.<). The first thing that came into mind is an app for everything.
I had initial doubts and said to myself, “That’s gonna be a COGNITIVE OVERLOAD,” but I didn’t dismiss the idea right then and there because it’s still a possible solution to the problem (at this moment, I wished I was Doctor Strange who can see 14,000,605 futures). In my head, I was all over the place trying to find more ways to solve the problem at hand (this is the time I wished I had co-designers to collaborate with). What helped me is to create a user flow to visualize what the product would look like, information architecture-wise.
While creating user flows, I kept reminding myself of the features that would be the most significant for buyers. I referred back to the empathy maps I’ve made, and saw how orders and messages were mentioned from start to finish. When users are done placing their orders, the next important feature and frequently used will be the screen where they view their orders, also the screen where they message sellers for updates and questions (makes sense to me) — they were non-negotiable components in the product’s navigation along with home and account.
On the other side, the user flows for sellers reflect an administrative type of website. Their homepage will be a dashboard that connects them to all other features of the site — creating menu items, tracking orders, checking reviews, viewing analytics, and messaging buyers.
Spork — an online food businesses marketplace
Why Spork?
Remember the first user interface exploration I mentioned earlier? Well, that was just a social media platform where food enthusiasts share their experiences with food, I named it Spoon&Fork because we usually use these when we eat. The inspiration for the product I’ve created now came from that exploration, but it changed a lot.
Spork is simply spoon and fork combined, but it’s really more than that. Since business is involved, I want to infuse the brand with growth and inclusivity. So, there I was sitting on my bed with my laptop on my lap, repeatedly saying “spork” over and over again, until something an idea sporked my mind.
You: Oh no you didn’t…
Me: Oh yes I did :)
Spork, in context with the product, means spark—to start, to grow. I find this very fitting because I’m catering to businesses that just started and are excited to grow. Besides the verb, I used spork as a noun to call these small food businesses, too (e.g. favorite sporks, spork profile, etc).
Branding
In building Spork’s brand, my goal is it to be friendly, approachable, and inviting. I chose a neo-grotesque type as the app’s system UI font as these kinds of font are commonly used for screens — they’re very light on the eyes while still serving their purpose of being readable and legible. It gets the job done, plus it being quite geometric makes it cute (uwu).
Mansalva, as a secondary typeface, is a clutch addition to the brand, actually. It felt boring when I didn’t have something to compliment the HK Grotesk. The first thing I thought of was a handwritten font, and this idea was inspired by a conversation I had with a seller where she has a whiteboard on her kitchen wall to track orders and ingredients. So, why not? I make the brand more personal—just the right amount of human touch to reflect a user story’s to the app.
For the colors, I really didn’t think this through. I opened the color wheel in Figma and just randomly clicked the color spectrum until I found a color that shouts BIG FREAKING HAPPY ENERGY… Tada! A blue-ish purple as the primary brand color and a light musty yellow to contrast it.
Product Design (Buyers)
Home. This is where the fun starts. I asked buyers what’s the most defining factor for them to purchase from online food businesses. Empty-minded, I thought the answer was location (after the usability testings, I learned that my guess was wrong)—it was recommendations and popularity. So right off the bat, I made a section in the home screen for popular sporks. I also realized that users may go into the app without knowing a store, so it’ll be nice to suggest food options from the landing screen.
Besides suggestions and recommendations, buyers have been vocal about wanting to hear updates from these sporks, this is why there’s a section for stories on top. The layout kind of works like a story, but it doesn’t disappear after 24 hours (a frustration from buyers) unless the seller removes the post. Viewed stories will be placed at the back and have less opacity than new ones. (I have a recommendation for this feature in the end)
Search. Like I said earlier, users can be indecisive, but we don’t want that to happen over and over again. When users click the search bar, a full-screen modal will slide in giving users access to an active input field (if they already have something in mind). No one gets left behind I made sure to include popular food choices and trending sporks in the community. Yay! I wonder what food will rise in popularity next…
Order. Sporks can be accessed from the search results and the home screen. Buyers can choose from recommended items by the spork owners or from categorized menu options, reviews can be seen when users scroll down, and they’ll find out what’s suggested to order. Once the user chooses an item, they have the option to pick add-ons or upgrades. After that, they’ll simply place if they want their order to be delivered by the app’s own delivery system or have themselves pick-up their orders on their desired date and time. Next? Pay. Users have their payment details saved during onboarding. No need to ask for the seller’s bank accounts and wait for confirmations, whatsoever.
Also, buyers mentioned that they usually order the same things they’ve gotten the last time. Voices are heard in this household so I added a reorder button that can be accessed from the orders screen.
These tiny features are the life savers. Imagine that you are very picky, grumpy user. For every item you order, you customize it with special requests (like the “venti-sized vanilla latte with soy milk, sugar free, three ice cubes” kind of crazy). I thought of the possibility of having a Spork user like you, and it would be a nightmare to input all of those details every time you order. The solution? Reorder.
Messages. No need to message sellers on another application because Spork already has its own messaging system. On the messages screen, other than read or unread, messages are categorized into two: current orders and finished orders. This is so that users don’t get confuzzled if the seller they’re talking to was already a finished order from a month ago (yikes). After receiving the orders, users will be prompted with a notification to mark the order done, this will put the conversation to the finished orders section. I’ll talk about the FAQs features in the seller section.
Product Design (Seller)
Menu. Sellers use forms to collect orders from buyers (actually, there are still some who get orders from messages only). Since order forms can be created from literally anywhere, these tend to be inconsistent and unstandardized (buyers’ frustration). The menu feature allows sellers to add food options they want to sell, and organize them into categories. It’s not set to stone once the onboarding is done because they can add, remove, and edit the options anytime. Sellers can add variants such as the size of orders, add-ons, upgrades and include their respective additional prices. Finished? Click publish and the users will see the seller’s new addition to the menu.
Dashboard. The goal of the project is to make the lives of buyers and sellers better. I had conversations with a seller who tracks his finances in Google Sheets, check reviews in Instagram DMs, delivers via Grab, and writes down daily orders in a notebook. That’s a lot. From the empathy maps earlier, sellers are motivated to work when everything is organized, and I thought of creating a dashboard for the landing page because that will do the job. It allows users to see what’s happening with their business in various aspects in one look—they can check their current orders, see how their business is performing, view recent messages and reviews. It’s a dream in my book. During the usability testing, sellers told me that a dashboard was something they didn’t know they needed to make life simpler. That’s a win!
Instant replies. Messages tend to be spammy and chaotic, and we really want none of that. During the onboarding process, sellers are prompted to give their Frequently Asked Questions (FAQs) and provide their own answers. On the buyers’ end, once they enter the chat for the first time, a modal will pop up showing these questions. Users just need to click a question and the answer will show up. No more repetitive questions. No more late replies. Two birds!
Finances and Engagements. It’s like making your business a game. Check what food gives you the most money, see what item has a 100% order rate, learn the number of times your spork was shown in search results. This feature makes running an online business focused on growth while having fun.
Also, there’s no need to input sales anymore because payments are already done in the platform, sellers can add expenses in case they took some cash out of the bank for reasons none of your business :P
Recommendations
I only had a semester-long time to work on this research alone, so I really couldn’t fit everything that I had envision Spork to be (I also had other commitments to juggle along). I really had more ideas that sporked into mind during the final stages of the research and here are some:
- Interactivity. Given that buyers can be indecisive sometimes, we can have a page that functions like a “food roulette”. Spin the wheel and order the food you got, share with your friends on social media platforms what your food of the day is. That would be fun.
- Picture Feed. Spork can also adapt a picture feed layout (similar to Instagram) for sellers’ posts on updates, new additions, and promos as an alternative to stories. This also allows users to discover new food businesses and interesting option they might want to order next!
- Branding. A seller’s spork is their business, not ours. I thought allowing sellers to customize the theme of their spork profile, like changing the color blue-purple to their brand color, will be a step closer to making their business really feel at home. The system brand color could focus on the dusty black (#222222) and let the sporks make the app colorful.
What I learned…
- Talk to users more. I know sometimes it can be intimidating to think about user interviews and user researches, but don’t be, really. Enjoy it, have fun. Remember that they are your users and the reason why you started a project is to solve a problem they’re experiencing. Having conversations with users will make you realize how people really do have different perspectives on certain things, validating the statement that “you can’t be your own user.”
- Growth is relative. Yes. Other people can overtake your progress when it comes to growing in the field of design, but it doesn’t really matter. What’s important is that (1) you are growing and (2) you are happy. Learning takes time, but it’s forever. Don’t get intimidated by others’ success, because yours might just be days or months away. Venti, from Genshin said: Traveler, as you set off on your journey once again, you must remember that the journey itself has meaning.
- Choose kindness. I got this one from Ms. Smile (hello!) last semester, in every decision that we make, just choose kindness. This can be applied in designing human-centered products. Have to choose between what feature to work on? Choose what’s more valuable for the personas you’ve created. What would put a smile on their faces? What would help them more? Even in type, you make the font sizes a little bigger to make your design more inclusive and accessible to people with visual impairments. Always be inclusive in more ways than one.
Creating Spork was really a wild rollercoaster. In the middle of the process, I had doubts about whether I could really pull this off or not. But, you guys really helped me to carry on. I remember every moment when I finish a screen, I needed to stop because of how proud I am of myself, I really couldn’t believe I’ve done that (I started tearing up because no joke, doing a case study/research alone is tiring). Thank you for your love and support.
You can play with the Spork mobile app prototype here (not all elements have prototypes, just the ones I used for the usability testing): https://www.figma.com/proto/8DiyuVDjdVYToqRkrp7VwK/Spork?page-id=0%3A1&node-id=394%3A286&viewport=-336%2C534%2C0.14499813318252563&scaling=scale-down
Hello! Rafa here…
… and this is my second Medium story, and my first case study! Wow. Thank you for taking the time to read ‘til the end! This case study is my final requirement for Miss Laura’s arts class (thank you for this opportunity Miss Laura!).
What did you guys like about this case study? Comment them below :D If you have any questions, inquiries, or suggestions, feel free to drop a response down below or get in touch with me at rafael.dytoc@obf.ateneo.edu, or visit my website to learn more about me.
