Login screen with fields for email, password, and a orange login button.

Login form with email and password fields and a 'Log In' button.

A computer screen showing a restaurant website with images of food such as pizzas and salads, user login options, and social media icons.

Food. Work with a team. Identify an opportunity within a problem space in a category, in our case - food, to design a solution - create a responsive website to solve issues with time lost on ordering food online. We named our website Project Yum! Who? Yes, get ready for some food puns.
Price & convenience. Young (-ish, ages 29-45) professionals are on a budget and have limited time, there’s an inadequate number of food options that woukd fit within their price range.
Our users are overwhelmed from work, hungry, and only has $15 to spend. How might we help them enjoy their meals while trying to save money?

“I went on Caviar and noticed the delivery fee, but then I looked on another website and I found a discount code for free delivery. I was like “HAHA!“, saving 99 cents. SCORE!“ - exclaimed the user

HOW

Step 1: Prepare Ingredients (Research)

Slide titled 'Identified 2 key sectors to focus within the food category: Price and Convenience.' with a paragraph about targeting users based on issues and backgrounds, and the phrase 'Gathering the ingredients' at the bottom.

Comparison chart describing user preferences: on the left, users with a set budget who want to save money; on the right, users who would like to use discounts or rewards programs. Key points include interest in saving money, price consciousness, use of discounts or rewards, with respective ratings of 6 out of 6 and 4 out of 6.

Text slide discussing coupons and discounts, highlighting the challenges users face with limited time and affordable options, and mentioning frustrations with using discounts and website inefficiencies.

Hypothesize, Synthesize

A woman wearing a black hat and a red floral top, smiling. Text below describes her experience with saving money on delivery fees through a discount code, highlighting her persona as always right.

Journey map with four sections: Karen has a meeting starting in an hour, she couldn’t find the restaurant she wanted, she couldn’t find the promo code, and she’s not entirely happy with her food. The first section has a clock icon, the second and third have X icons, and the last has a neutral face icon. The background colors alternate between light orange and light gray.

During this phase, we also had a few rounds of Design Studio, devised an Empathy Map & MoSCoW Map…

While synthesizing the data generated from user interviews, based on financial, career & family standing, we realized there are at least two personas to be developed. Despite ambitious yearnings to do otherwise, we’d decide to focus on one, Karen, due to time constraints.

Persona Disorder

Step 2: Cook (Ideation)

A webpage with a thank you message, indicating the user has finished browsing. The page features a gray background, a 'seamless' button, and social media icons for Facebook, Instagram, and Twitter at the bottom.

Food ordering app interface for Saladelicious showing live wait time, delivery options, discounts, and restaurant suggestions.

Food delivery app interface showing restaurant options, discounts, and delivery options with a map at the top around Flatiron District, NYC.

Mobile app interface for restaurant services with options for Near You, Deals, Dine Out, Take Out & Delivery, and social media icons at the bottom.

A food delivery app interface for Saladelicious restaurant in Flatiron District, NYC, with menu options for seamless, caviar, and EAT24, showing delivery times and discounts, along with suggestions for similar restaurants and social media icons.

Mobile app interface for a local deals and food delivery service, showing location in Flatiron District, NYC, with options for signing up, nearby deals, dine out, take out, and delivery, along with suggestions and social media links.

Mobile app screen with a personalized greeting to Karen and options for restaurant suggestions including 'Near you,' 'Deals,' 'Favorites,' 'Dine Out,' and 'Take Out & Delivery.'

Food delivery app interface showing tabs for Near You, Deals, Dine In, and Take Out & Delivery. The screen displays options for food types, ratings, delivery time, and distance. A map with a location marker is visible, alongside a list of restaurants offering deals and free delivery.

Website homepage for a food delivery service called Project Yum, featuring options for near you, deals, dine-in, and takeout & delivery, with sections showcasing food items and social media links at the bottom.

Wireframes - Mid-Fi

Thank you message with text 'THANK YOU for browsing with us! We are now taking you to seamless' on a light blue background, with social media icons at the bottom.

Mobile app settings menu with options to sort by, choose price range, set ratings and distance filters, delivery time, and prep time, with sliders and checkboxes.

Food delivery app screen showing salad ingredients at the top, including cherry tomatoes, cucumber slices, radish slices, avocado, boiled eggs, and salad greens. The app offers delivery, takeout options, with discounts and order customization buttons.

Food delivery app interface showing restaurant options in Flatiron District, NYC, with images of salads, Asian dishes, and pizzas, and labels for deals, free delivery, and discounts.

Mobile map app showing nearby restaurants and food options in Flatiron District, NYC, with restaurant ratings, discounts, and free delivery indicators.

Screenshot of a food delivery service website showing a colorful salad with sliced cucumbers, avocado, and eggs at the top, a live wait time graph, and options for ordering salads from various delivery services.

Mobile restaurant app homepage with a greeting to Karen, location in NYC, featuring food images, and options for deals, map, dine-in, and takeout/delivery.

Login screen with fields for email and password, and a large orange 'Log In' button.

Online food delivery website for a restaurant in the Flatiron District, NYC. Features menu categories like sushi, pizza, salad, burger, donuts, tacos, sandwiches, and kebabs, with free delivery options, ratings, and a map showing delivery locations.

Login form with email and password fields, orange 'Log In' button, on a light blue background.

Restaurant homepage with a banner image of a burger and fries, featuring menu options for map, deals, take out and dine-in, and pictures of various dishes like pizza, salad, pasta, and grilled fish.

Wireframes - Hi-Fi

Step 3: Ready to Serve (Prototyping)

A mockup of a mobile app displaying a personalized greeting, food suggestions, and options for dining in or takeout, with text instructions and explanations on the right.

Laptop screen displaying a food delivery app with a personalized account icon, welcome message, and food suggestions, with descriptive annotations on the right. The screen shows a breakfast-themed banner and a section with food images.

Mobile phone screen displaying a map view with nearby food delivery options, including images and ratings, on a list page for a logged-in user.

A laptop displaying a food delivery app interface with map, filters, and restaurant icons, along with some on-screen instructions and descriptions.

Guide overlay on a mobile app interface for food delivery, showing features like map view, food categories, order options, deals, and icons for user interaction.

A mobile app screen displaying a restaurant page with a cover photo of a wooden table, plates of vegetables and eggs, and icons for delivery options, ratings, and menu navigation, with annotations describing the page elements.

Screenshot of a restaurant online ordering platform shown on a laptop, with numbered labels pointing to features such as restaurant information, wait time bar, toggle tab for delivery or take-out, menu options with offers, continue to menu button, and restaurant suggestions with thumbnails.

During this phase, we also devised Usability Testing & Report for every stage and iteration of Wireframing, then revised and reiterated based on feedback data until we finalized with the Prototype.

Meet the Team

My Role

UX Researcher, UX/UI Designer, Wireframing, Prototyping, Presentation.

Tools

Adobe CC, Canva, Otter, Sketch, InVision, Google Suite

Next Steps

Expand on the personalization because we received positive feedback.
Create default settings to encourage users to choose more cost-effective options, saving time.
Apply suggestions tailored to the persona’s needs.
Further development on the suggestions section.
Onboarding: proper introduction to site features.
Develop & expand secondary persona, Ollie: Ratings & Reviews.
Lots more things are cooking in our design kitchen, BON APPETIT!

Lessons Learnt

This 2-week sprint is the first assignment working with a team. I cannot imagine a better way to start things off right. There were moments when the rest of the team regrouped and went back to the drawing board, where I’d stubbornly kept going. It’s an eye-opening experience to see & learn the creativity & thought process of fellow team members. Eventually, we’d come to a conclusion that’s more insightful and concise.

I also learnt firsthand how integral & crucial usability testing is throughout this exercise. For instance, confusion on the terminology used as “Sign In.“ An issue we resolved by changing it to “Log In“ and so on…