MeetatOnce

An app that bridges online to offline with streamlined event-organizing process for remote-working companies.

  • 2022 McMaster Designathon #1 winner 🥇

  • UX / UI

INFO

Team members

3 UX designers
work closely in 3 days

My Role

UX Research
UX Design
UI Design
Prototype
Presentation

Tools

Figma
FigJam
Adobe Creative Suite

Project Overview

CONTEXT

What is the design challenge?

Develop an app that helps WFH enterprises plan the team-bonding event

WFH is the new normal during Covid-19 pandemic. While remote working is great, it's still important to have face-to-face time to help build strong relationships in businesses.

What is the designation schedule?

Deliver research, design and presentation in 42 hours

Relevant Bits is one of the sponsors for this Designathon and created this challenge. Our team won 1st place.

The goal was to submit the design package, including user research, stakeholder mapping, persona, user flows, low-fidelity & high-fidelity prototypes, with preparation of a 5-minute presentation to the judges online.

Product Research

8 hours

Research process

Due to tight hackathon schedule, we finished the following research and interviews in the first 8 hours:

we conducted both Preliminary research, and user interviews. All the process the results can be found on FigJam if you would love to dig into it, as well as the affinity diagram, user journey map, and stakeholder mapping.

Research findings

We have one interesting observation when mapped out the user journey, that “Event organizer can also be event participant”, meaning that in an on-site event, employee’s role are not strictly defined by their title or professional responsibilities. A team member can also be assigned the task of organizing an on-site team-bonding event. This guides us to redefine the users types to the following two:  organizers, and participants.

PAINPOINTS

After thorough research and interviews, we concluded the following 5 main painpoints:

TARGETED USERS

PROBLEM STATEMENT

?

How might we

make the event-planning process simple and intuitive for both organizers and participants, to help all team members build bonds from online to offline ?

Product Ideation

Planned 2 hours, finished in 6 hours

IDEATE

After 2-round of brainstorming and reorganizing the research findings, we came up the following 2 main features to address the 2 main pain points:

A mobile app that bridges online to offline with streamlined event-organizing process for both event organizers and participants in remote-working companies.

GENERAL USER FLOW

After communicating with stakeholders on business model and discussing the with product manager and engineers on development schedule, we made structural adjustment to optimize between both user behavior aspect and business profit model considerations.

The following 3 iterations of I.A were iterated in the process of ideation and design:
⬇️ Click tabs to view past iterations:

From observation to user behavior, among the investing features, search feature placed on a more obvious place can better encourage user for browsing and trading, while portfolio performance becomes more important and more frequently-used to users once they made the trade.

Therefore, the final version of information architecture

landed on 5 main feature tabs on navigation bar. Different from iteration 2, Search tab is adjusted to the 2nd on navigation bar. In addition, all portfolio related information were detached from Portfolio overview in Home page, and became an individual tab 'Invest', which decreased the number of clicks when user would like to check portfolio performance while in other tabs.

DETAILED USER FLOW

With the limited time available for the Design challenge, we decided to focus on the first step in general user flow - When user starts even organizing.

The following 3 stakeholders are considered in this flow:

Design Iterations

Planned 16 hours, finished in 20 hours

LOW-FIDELITY WIREFRAMS

FINAL DESIGN & PROTOTYPE

Collect personal preference when user first signs in

- Preferences are saved to user profile.
- Simple sign-in method with work email.

Easy to distinguish and switch between the events user to host and those to attend

- On home page, vent cards has orange tags to distinguish your role in this event

An intuitive step-by-step guide to help user start creating an event

- You don’t need to have everything decided!

An event management page to organize location, activity, budget, participants, etc.

- Each step is independent so that user don’t have to go through all the steps at once.

Event chatroom to promote experience of social interaction for attendees

- Attendees can chat with other attendees and connect with them before the event starts.

Visual design

Design system

Event planning can be stressful.
In order to relieve stress, we chose the blue family as the primary color in order to make user chill and looks professional for this enterprise internal tool. While the bright orange helps as the accent colors for reminders and acute notifications.

UI Design iterations


The visual design evolution of the Event card is one of the examples of the design iterations. Unfortunately, we didn't have much time to further iterate the design due to limited time frame. However, I changed the layout to make the card less divided, added the task numbers and event details to make the card more informative while reminding users the tasks to-be-done.

Retrospect

Winning!

Our team's design won the first place!

TAKEAWAYS

Stick to planned schedule is important!!!
But detour may also happen...

Since we only had 42 hour to finish both the research and design(including sleeping time!), we first divided into an 8-hour research, a 2-hour ideate, and a 16-hour design process. However, we ran behind in schedule when brainstorming and defining the product we would like to land on. It took us another 4 more hours to organize the user interviews to eventually agreed on the feature and flow we want to design for. The result is my teammates and I didn't get to sleep at all the last night before presentation.

Virtual collaboration

Because of COVID, the collaboration of our group was fully-remote. I was in a different time zone with my local time 3h later than the other teammates. Besides regular Zoom & Discord meetings, we utilized platforms like Figma and Notion to collaborate in real-time.

WHAT'S NEXT

1. How can we design in-app poll for voting purpose?

2. Craft some layout design. For example, ‘host a design’ button should be at the top full screen, or hover over the event list items in the bottom.

3. We received judge's feedback to future design the desktop app in order for business efficiency and large-scale events.
Here is one iteration I tried: