Role
UX UI Designer
Stakeholder
George Visan (UXA Mentor)
Timeline
80 Hours (2 weeks)
Tools used
Figma, Adobe Illustrator

> Project Overview

Company Background.

Gather is a new mobile app concept that will help users save time from the whole gathering process – from organizing to dining in to making payment experiences. This app is expected to help both customers and merchants to improve their overall experiences. In short, this app not only helps customers save time but also helps restaurants increase table turnover rate. However, this project will only be focusing on the customer side.

Problem.

In this modern society where everyone has lots of different responsibilities that they need to fulfill, being able to save some time from something for personal leisure or recreational activities is getting harder and is becoming a luxury.

With the help of an all-in-one event planning app, organizing gatherings with coworkers, friends, and family will become simplified and less time consuming because organizers can send out invitations to guests with restaurant options for guests to choose from. And customers’ dine-in experience will become better by being able to make a reservation to skip the line, order food in advance, inform the restaurant for any dine-in or special needs, get served right after arriving at the restaurant, and make/split payments all through one platform.

Goal.

The goal for this project is to :

  • Create an all-in-one event planning mobile app from start to finish.
  • Design the app’s branding (both brand name and logo).
  • Conduct a comprehensive user research to find out users’ current pains and if there is a need/demand for the app.
  • Prototyping.
  • Run a usability testing.

EMPATHIZE

> Research Overview

> Competitive Analysis

> Secondary Research

> User Research

> Persona

> Research Overview

Research Goals.

To better understand the event planner and reservation markets in general and consumers’ concerns and behaviors, we want to:

  • Learn about the reservation system and event planning app markets.
  • Learn about the dine-in logistics.
  • Learn customers’ current pains about organizing gatherings, making reservations, and dine-in experiences.
  • Find out if there is a need/demand for the app.
  • Find out what other features customers need for the app.

Methodologies.

Three research methods are chosen to conduct the user research:

  • Competitive Analysis
    To learn about the direct and indirect competitors’ strengths and weaknesses so we can differentiate ourselves to achieve competitive advantages.  
  • Secondary research
    Secondary research will involve researching for any supporting data to the app idea and any insights that may help improve the overall app design, which will subsequently contribute to the overall user experience.
  • User interview
    1:1 remote interviews with 3 - 4 participants will be conducted in order to get the first hand feedback about the app ideas and concepts . Interview scripts and questions will first be created and reviewed so insights from the feedback will be consistent and usable for analysis. Interview questions will include both qualitative and quantitative questions.

> Competitive Analysis

Since this mobile app is a new concept and there is no direct competitors in the market, I separate the competitor analysis into two sections. One analyzes the Event Planning App market and the other one analyzes the Reservation App market. The research of these two markets will help me determine what features need to be included in the design and what can be my competitive advantages.

Competitive Analysis Findings.

After an in-depth competitor research, the findings are:

  • The event planning and reservation apps are two very absolute markets. None of the platforms above has done cross-functional integration of the two markets. Hence, it is a great opportunity for us as we are the first mover entering this new market segment, which will help us gain a competitive advantage by differentiating ourselves with others and thus, establishing strong brand recognition.
  • Among all of the platforms above, only Allset’s business model is kind of similar to our business model. This suggests that the indirect competition in this market is still very low. Thus, it could be a good investment.
  • Since there are as many company events as personal events, it makes sense to have both personal and business accounts available for two different types of users. By doing so, we can cater different features to their different needs. That is also why some platforms above would take business users into consideration.
  • All platforms above have calendar integrations that allow users to add reservations or events to the calendars of their choice.
  • Custom URL is a very useful feature because guests who do not have the app downloaded on their phone can still use the link to respond and contribute to the invitation.

> Secondary Research

Having assumptions for the demands and needs for this app is not enough and this is when the secondary research comes into play to prove and back those assumptions. While doing my secondary research, I had to split the research into two directions. One research went towards the demand of the event planning apps and the other one went towards the reservation apps. This is simply because the app concept for this project is the combination of both markets and there is no such app existing in the market at the moment.

In this section of the research, the most straightforward way to find out whether there is a need and demand for this kind of app and what pains customers have with event planning is by checking out the reviews of the existing apps from the app store and how those apps have helped make their life easier. Below are the screenshots of reviews from the event planning apps – Doodle and NeedToMeet.

Research findings for Event Planning Apps.

In these reviews, 100% of users who use these event planning apps are to save time and avoid hassles. They have mentioned that planning for group events or gatherings in a traditional way takes a lot of time to coordinate as they will have to call, text or email multiple people back and forth just to agree on a date and time. They said that these event planning apps have helped them coordinate more efficiently and effectively and saved the coordinating time from hours to minutes, which is a huge time saver as users can focus on things that are more important to them.

Features that users like: in-app messenger, custom link, proposed locations, and voting polls.

Research findings for Reservation Apps.

In this research section, I have found some very reliable sources from the food ordering system vendors – Social Hospitality, UpMenu, and GloriaFood. These vendors have stressed how reservation apps with pre-ordering food features will help improve both customer and restaurant experience.

On the customer side, busy and hungry individuals will be happier as they no longer need to wait for table/food/check, they can enjoy real restaurant food at a fast food restaurant speed, and they can use the extra time they have saved for themselves or for something important. As a result, customers will have higher satisfaction with the overall dine-in experience.

On the restaurant side, restaurants can benefit from increased table turnover, more orders fulfilled, and more customers’ expectations met. As a result, business profit increases. This is because when restaurants know ahead of time what customers need and when they are coming, servers and chefs can plan ahead, organize tasks, address any issues in advance, and are, thus, well prepared. So when customers arrive, they will be served right away, personalized quality service is provided, no more overstays, and more happy customers. This is especially helpful when there are large group customers during busy hours.

> User Research

Creating an interview guide will help me conduct the 1:1 interviews consistently by asking the same designed questions. Hence, the responses from participants will be consistent and usable for deriving insights. View User Research Plan,  Interview Script, and Interviews’ Records.

Research Debrief.

Here are the valuable findings derived from the 1:1 interviews:

  • Regardless of who we are and what we do, everyone must have involved and experienced in planning and coordinating gatherings or meetings before. Thus, our app can be used by everyone.
  • Participants have been so used to the traditional ways of making reservations and dinning without realizing their hidden pains and how much time they have spent on these two activities. Thus, users can use this app to save time and hassles when they are planning for a group meetup/gathering at a restaurant with coworkers, friends, and family.
  • All participants were not aware there were so many apps out there that could help them make their life easier when it comes to event plannings and making reservations. It shows that a stronger marketing effort still needs to be done in order to get the app’s existence exposed to a wider audience.
  • Voting Polls feature was deemed as important by participants.
  • All participants are impatient when it comes to waiting at a restaurant especially when they are hungry. Hence, this app can help improve their dining experience entirely.
  • Participants expected to see not only the essential features that they could easily find on event planning and reservation apps but also some features they have used every day and on other apps. For example, voting polls, reminder, in-app messaging where they can communicate directly with guests, restaurants, and customer support, feeling lucky features, venue suggestions, custom URL, calendar integration, reviews and ratings, and etc.
  • All participants prefer to split the payment when it comes to group gatherings at restaurants. So, this is also when the in-app payment tool is needed and comes in handy to help them take care of the payment transactions automatically. Split payment method can have two options as users may have different preferences. One is split the total payment evenly and the other one is everyone pays for his/her own food.

> Persona

With all the findings derived from research and interview findings, Jessie Gonzales comes into being the best representative of all the interviewees' characteristics, behaviors, goals, needs, and pain points.

DEFINE

> Feature Roadmap

> Sitemap

> Task Flows

> Feature Roadmap

After having a clear picture of how the product should look like, Feature Roadmap is used to find out what features are essentially needed in the product design and what features can come next with four levels; P1 (Must have), P2 (Nice to have), P3 (Surprising & delightful), P4 (Can come later).

> Sitemap

This sitemap represents the links on the app’s navigation bar. This Sitemap is simple and concise in order to promote easy navigations for users. Based on the persona, I am having both Events and Venues on the navigation bar because some users would like to see who can join the gathering first and then have everyone decide the venue later whereas some users would like to try out a restaurant and then send out invitations to see who can join.

> Task Flows

Based on the persona, there are two possible scenario flows. One is that the Host would like to see who can join the gathering first and then have everyone decide the venue later and the second scenario is that the Host would like to try out a new restaurant and then send out invitations to see who can join.

IDEATE

> Wireframes

> Brand Design

> UI Design

> UI Kit

> Low-Fidelity Wireframes

Based on the researches, sitemap, task flows, and persona, these low-fidelity wireframes show the app's main flows from start to finish. The design is a minimalist approach to promoting easy usability and learnability. Hence, I have reused elements and patterns throughout all the pages for easy navigation so users can focus on completing their tasks.  To view the low-fidelity wireframes, please click here.

> Brand Design

Logo Inspiration.

Since Gather is a concept company and my personal idea, I am thinking of coming out with a brand message that is easy for users to remember and recognize. A brand that is efficient, trustworthy, thoughtful, reliable, optimistic, and modern.

The design inspirations I got are from words such as forgather, gather, what's up, and hi 5.

Finalized Logo.

My final choice of the logo is the one that has four symmetrical arrows pointing towards the same direction with the circle located in the center indicating that people are heading to the same place for a meetup. I also came out with two different versions where one is stacked on top and the other one is side by side for different purposes of usage.

> UI Design

By incorporating text styles, icons, colors, illustrations, images, and logo, the high-fidelity wireframes come out as below. To view the wireframes, please click here.

> UI Kit

After having a design comp, I regather all the elements I use on my design associated with all the elements’ states and categorized them with expanded details and information as a comprehensive UI Kit.

PROTOTYPE

> Prototyping

> Prototyping

This prototype was created with high-fidelity wireframes, animations, and states to mirror as close as a fully functioning app. By doing so, it will make the usability testing more interactive and participants can test the app at its best version so the test results can be more accurate and useful. To play with the initial prototype, please click here.

TEST

> Usability Testing

> Test Interpretation & Prioritization

> Iterated Prototype

> Usability Testing

Planning.

  • Test Objectives
    - To test the app’s ease of use.
    - To test the usability and learnability of the app.
    - To test the app flows.
    - To identify any obstacles/frictions that prevent users from completing their tasks.
  • Task testings
    - To sign up for an account.
    - To create an event.
    - To invite guests.
    - To do vote pollings for the event date, time, venue, and payment style.
    - To send a food order to the restaurant.
    - To make a reservation.
    - To inform the restaurant that you are on the way.
    - To give a rating and tip.
  • Test Goals
    - To ensure every task performed by users is error-free, friction-free, intuitive, and easy.

Usability Test Finding.

  • All participants found that instructions are very much needed for every section/task so it won’t confuse new users and, thus, they know what each task is about and what they can do with it.  
  • Although some of the tasks could be confusing to the participants at first, they could still easily become familiar after learning it. When they encountered the same design pattern again, they could quickly recall the way to complete the tasks. Thus, the ease of use and learnability of the app has been established.  
  • Voting polls section needs to be more visible and focused.
  • All participants liked the design.

> Test Interpretation & Prioritization

Affinity Map.

I began by referring back to my testing notes and grouped every note based on similarity to create this Affinity Map. In order to easily identify each participant, they all have their own Post-it note color. By having this Affinity map, I get a bigger and clearer picture of which iterations I need to prioritize and what can be next.

Next Iterations.

Based on the usability testing report, I have created a prioritized iterations list:

  • Rearrange Voting Polls section to a visible area.
  • Add instructions to all sections.
  • Add Tax to Order Page.
  • Get rid of “Take Out” option on Order Page.
  • Add a line after the title on the alert dialog.
  • Add alert dialogs  and question marks to “Enable Location and Notification” pages.
  • Add drop shadows on all the arrow header boxes.
  • Change status colors to texts.

> Iterated Prototype

Based on the feedback from the usability testing interviews, I prioritized iterating elements that previously caused confusions to participants and elements that participants thought could be iterated in order to improve the overall design.
*The UI design and prototype have been refined to align with my current skill set (2023).
View prototype

Live Prototype.

NOTE: Since the app below is just a prototype, many features and links are not working/tappable or do not work as expected.
* To see which feature/link is working, simply tap anywhere outside the app and the blue rectangular boxes will show up.
* To restart the prototype, simply tab "R" on your keyboard.
* If you have a problem playing directly with the live prototype below, please click here.

> Reflection

The hardest part of this project is unquestionably time management. Having to finish the project within a self-set timeline while also maintaining the quality of the user research and UI design is challenging and lots of self-discipline involves. While completing the project within the timeline is crucial, but I find that the quality of the product is always the ultimate in a product design. When a product is hurriedly designed, it most likely has issues and will take extra time to go back to get it fixed. Thus, it is conversely a waste of time. On the contrary, taking an extra time to take care of every small detail from start to finish will not only save the overall output time from unnecessary reworks but also subsequently empower the product to behave consistently as it is designed and to serve its purpose.

OTHER CASE STUDIES

Delivery + Service

Moto-Prono

Led in conducting UX research from scratch, redesigning all of the apps and the website previously poorly developed by a third-party company, and overseeing the entire development process after handing off designs to developers.

View case study

Delivery

Doordash

Made Doordash a fully one-stop platform by seamlessly adding in-demand features such as 'Favorite restaurants and orders', 'Leave a review for both restaurants and drivers', and 'Save orders' into Doordash’s iOS app.

View case study

Home Bakery

Baby Baker

Worked with a local home bakery owner to create and design the company’s branding and responsive sites for desktop, tablet, and mobile screens.

View case study

Time Travel

Zeit

Identified users’ current pain points, needs, and goals for time traveling, and solved their problems by creating and designing responsive layouts for desktop, tablet, and mobile screens.

View case study