CheaprEats makes ordering the right meal easier than ever. 

SUMMARY

Client: CheaprEats

Duration: 6 months

Team: CEO, Developers, and myself

Role: Product Designer

TOOLS

Pen & Pencil

Sketch

Marval

Caravel

Miro

DELIVERABLES

Market Research

 User Research

Persona

User Flow

Wireframe

 Prototype

Usability Testing

About CheaprEats

CheaprEats is a mobile catering platform located in Toronto Canada. The company’s mobile ordering platform allow diners to order from takeout restaurants across Canada. With over 250+ users on the mobile app, the organization aims to connect vendors and customers. 

I collaborated with the CEO, who has a background in software engineering, to design the website application for CheaprEats. The goal is to remove the pain of online ordering with an innovative, seamless user interface. My primary role was to research, design, and test all UIs. 

The Challenge

By utilizing the mobile app, I wanted to create the website that correlates with its branding and visual patterns. The client sent over the branding guideline from the Graphic Designer. The challenge was to combine research and visual elements to create an engaging ecommerce experience.

Market Research

First, I considered the similarities and differences between the catering culture in the United States and Canada. I discovered that there isn’t much cultural difference among US and Canadian college students.

I’ve also researched about Canada’s education system and it has many similarities to the US Education System. However, limited research is done for catering events. The following data was noted:  

  • Expanded Dining Hours: According to Technomic’s 2017 College & University Consumer Trend Report, 63% of students say they are more likely to purchase a late dinner (after 8 p.m.) off-campus, and 61% say the same about a late-night snack (after 10 p.m.)
  • Faster speed of service: Students are often jetting between activities and classes with only a few minutes to spare here and there for meals. 
  • Customization: In the Technomic report, 48% of consumers say they prefer interactive service lines that allow them to choose their ingredients in a meal, so it’s key to have an on-campus program that caters to customization preferences.
  • Ethic Foods: According to the Technomic report, 43% of students say they would like their school to offer more ethnic foods and beverages, with Chinese (62%), Italian (55%) and Spanish (45%) being the leading cuisines requested.

Problem

User Research

To avoid assumptions about students’ preferences, I’ve narrowed the market research into a niche focused group and conducted a user survey from the current CheaprEat customers. The survey was done both online and in-person.

 The survey was collected  to understand the users’ goals, attitude, and priorities when ordering food online. 

When asked about preference in delivery or pickup, most students preferred delivery because of convenience. 

I then asked the most frustrating part when ordering food for a large group of people. Most students stated that making sure they have sufficient food for everyone and making sure enough gluten free and vegan options are readily available. 

In terms of prioritization in selecting a vendor, most students look for affordability rather than speed and reputation in a catering event. Users prefer to schedule a time weeks or months in advance for catering so speediness is not as relevant for a catering event.

Problem

After the survey, I narrowed down the main three prioritization: Convenience, Order Accuracy, and Affordability. I discovered that students favors accessibility and accuracy of orders during a big event on campus. 

Solution

I aimed to create an interface that includes a large selection of options and food types so that users can find a suitable vendor. The goal is to motivate users to purchase the correct quantity and type of food.

User Persona

David Rethland 23 Y.O. College student. Computer Science major. 

“I want to celebrate with the members of Hack The Valley for their hard work. I plan to host the party monthly. ”  

President of Hack The Valley

David is a senior in UCLA. He is majoring in Computer Science. David enjoys playing college football and chess. He’s the President of Hack The Valley, an organization that advocates for talented developers and designers. 

Activities

Once per week, students would meet up at the organization. They would work on coding projects together and attend hackathons. With the funds from his University, David decides to host a monthly party for the members. 

Needs

David wants to order burgers that will feed 100 mouths. He’s unsure of how many burgers he needs to order. David’s colleague then recommend him to check out CheaprEats, an online catering site that has variety of selections and discounts deals.

Pain Points

Some pain points when ordering a large sum of food is finding the vendor that will be able to schedule weeks in advance. He wants to find the best deals that falls within in the budget. 

In the past, he has ordered from vendors that often get his orders incorrect and he wants to avoid it by having the option to see reviews of past customers. David also wants to find a vendor that has sufficient food for everyone. He’s looking for variety and food options. 

Considerations

David checks out CheaprEats. He navigates through the home page and discovers different vendors, pricing, discount deals, catering selections, and food type options. He takes note that three members are allergic to salami. Two members expressed that they are vegan, so he plans to get vegetarian options. David needs the burger to come by the next 3 weeks so he plans accordingly.

Userflow

The user flow is the basis for content requirements on web pages or app screens. Beginning with an understanding of user needs helps the product team build a user flow and experience that is designed to meet those needs.

The user flow was split into 4 sections: landing page, order page, menu, and checkout.

Mind Mapping

Wireframes

Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe is primarily used to demonstrate the functionality of a site. I created the low fidelity wireframe on Sketch.

From the initial concept idea, I’ve sketched the product using pen and pencil. The purpose was to facilitate ideas and discover a design solution that best fits with the business goals. 

Once the initial sketch is complete, the design is moved into a high fidelity wireframe. This is to ensure the product is ready for the final mockup. Note: Sketch Cloud wasn’t fully functional for display so I uploaded the wireframes and mockups on Figma and Marvel.

Several users have pointed out that the search bar seems cluttered with various color schemes. They also point out that the use of icons on the search result isn’t very helpful so I eliminated the icons. I researched various search bar designs and chose a design layout that decreases its bandwidth so that its easier to type.

A couple of users mention the review section looks amazing, but it reminds them of a B2B sales site. Plus, some students may not upload an image of themselves on the site. Taking their suggestions, I looked into several review design layouts. I circled back into focusing the reviews on vendors only by showcasing previews of customer testimonials and star ratings each vendor has earned. 

Another reputable feedback is the header menu. The pop-ups were overlapping with the main search bar which users have pointed out caused some visual clutter. I went back to my user flow map to find a solution to re-organize the information architecture. I went ahead and place the search bar in the customization section and changed the order type as the main header. 

Style Guide

Final Product

Summary

Working on an e-commerce catering site was a unique experience. I had to research and take consideration of the internal and external triggers that drives customer to purchase a meal. By understanding the students’ needs, I’ve designed a site that’s simple, convenient, and easy to use. The next step is to continuously test the prototype and communicate the feasibility from design to code with the software engineer. 

Like What You See?

Contact me for inquiries. 

alicemariechong@gmail.com

14 + 2 =