My role:
Visual, interface designer
Timeline
May 2019 - Aug 2019
Team
2 Designers
1 Team lead
Overview:
I interned as a UX/UI designer at PinOn Inc. in the summer of 2019. My job was to design customer-facing and business-facing products.
The customer-facing product provides interactions between users and businesses. Users can browse the digital menu, customize foods, claim promotions, or place orders.
What is PinOn?
PinOn is a web-app-based Smart Menu System that enables customers to access the menu directly on their phones by scanning the QR Code or by clicking the web link. At the same time, PinOn leverages big data to provide businesses with a Smart Sales Solution so they can customize their menus and interact with their customers in a way traditional menus cannot.
My objectives
One of my main objectives for me during this internship is to collaborate with another designer and design:
Customer-facing product
Business-facing product
The customer-facing product will revolutionize the traditional way of food ordering, while the business-facing product will enable businesses to edit menus or keep track of the data.
Emphasizing process
Nowadays, people are living in a digital age in which people are doing everything online – including eating. We have online food delivery statistics to prove it. Maybe we want our food delivered to our doorstep when the weather is not that great; maybe we want to understand better the restaurant's menu, or even customize the food as we want.
According to Deloitte Digital's research, visualized menus and ordering foods from phones are becoming trends in the hospitality industry.
Defining process
We believe that good design comes from understanding users' needs. So, before starting to design the product itself, we did user research and interviews to understand what are some problems the customers & businesses are facing.
Here are the main problems for the customers & businesses we have identified:
Customers
Understand how each item is made;
Reduce the wait time;
Food customization;
Business
Customers acquisition & retention;
Constant menu editing;
Ensure tipping;
Ideating process
After listing the above problems, we have analyzed a few competitors' products, including Doordash, Uber Eats, Yelp, GrubHub, etc. After comparing those products, we have identified things they have in common and things that those products did not actually solve.
By conducting interviews, we found out that customers usually cannot fully understand how the foods are made, existing apps only provide static images and brief descriptions of items. We have added videos, ingredients, and nutrition details to make customers understand better about each item. In addition, we have also added various promotions, such as loyalty rewards, discount coupons, red pockets, and pre-paid vouchers to attract and retain more customers.
Journey map & Task flow
We have summarized the research findings and then drawn a user journey map of the entire customers' food ordering process to give us a general idea. The user journey map is helpful by providing visualization of the customer experience and how they interact with the business. In addition, it removes obstacles and makes the process simpler.
We have also drawn a task flow chart to represent ideas and functionalities that will be included in our customer-facing app.
Mobile web app instead of native app
We have decided to develop a mobile web app instead of the trending native mobile app. Although the native app might have more advantages and it is more common, we still believe that the mobile web app is more suitable for our product. Even though native mobile apps are better and more convenient for users, the mobile web app does not require downloads. Customers can access our product by just scanning a QR Code or by clicking a web link.
Access method
We have printed QR Code stickers and placed them on each table of the restaurants. We have also printed posters with the QR Code and placed them in front of each partner's business.
Below are examples of the stickers that we have attached to the tables.
Wireframes
Given the fact that we follow the agile product development methodology with limited human resources, we agreed to start from the MVP version which has some basic features, such as browsing the menu, viewing items, viewing the wallet, adding to the cart, placing an order, review order, etc. without any fancy UI customizations, or any type of promotions.
We started with some basic paper sketches, followed by wireframes. We make changes to the wireframes before moving to the mockup and prototyping process. We believe that wireframes bring clarity to the projects, allowing the team to work through all the interactions and layout needs.
Custom designs
We have created custom designs for our early partners to retain their branding. However, the general flow and features remain the same.
Leverage limited resources
Limited time and budget for conducting interviews and research.
No reference apps
Since we are the first company that enables the dine-in option, we could not find any existing experience for reference.
Edit/add new features
Adding new features or editing a certain part of the product in the middle of the development process; How to communicate with developers.