An app that bridges online to offline with streamlined event-organizing process for remote-working companies.
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
What is the design challenge?
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?
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.
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.
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.
After thorough research and interviews, we concluded the following 5 main painpoints:
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:
â
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.
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:
- Preferences are saved to user profile.
- Simple sign-in method with work email.
- On home page, vent cards has orange tags to distinguish your role in this event
- You donât need to have everything decided!
- Each step is independent so that user donât have to go through all the steps at once.
- Attendees can chat with other attendees and connect with them before the event starts.
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.
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.
Our team's design won the first place!
â
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.
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.
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ïŒ
