Comfort in event going
through incentivization
UX Researcher |UI Designer
November - December 2020
The Problem
A social product scenario was presented with the problem being that although users of the app were reserving events, few were following through and attending these in-person events. The product manager suggested cost effective incentives for the company and/or notifications may entice event-goers to turn their invites into attendees.
Considerations for the current Covid-19 climate were used in the research and design of the project that depicted an event following proper Covid-19 protocols.
The Solution
Research
Modified Design Thinking
Empathize, Define, Ideate, Prototype, Test and repeat to my application creation process best suited for the users. In this particular project, I empathized with event-goers who wanted to attend events but were fearful with the pandemic. Like any good design thinking process, it is an iterative process, meaning that there are times that we need to go back a step or two to make adjustments throughout the process.
Three things event apps are missing: sharing, search and in-app payment options
Competitor Analysis
To better understand the current landmarks of in-person applications, I did an analysis of the main competitors: Eventbrite, Facebook Events, and MeetUp.
To sum up the results, while they all had a clean and easy Call to Action (CTA), their event applications needed other features, such as sharing ability, clear and easy way to search outside of home region, and in-app payment options.
Affinity Map
To understand the problem that was laid out of conversion rates, I interviewed 5 event goers to understand their event searching habits and what they were looking for in an in-person event application. After conducting the interviews, I created affinity maps with Whimsical which showed common themes of relocation, searching for an event incentivization, use of technology,and how to approach live events in the face of a pandemic, like Covid-19.
Empathy Map
An empathy map was created from the affinity map which more clearly showed what users liked about event apps and what was lacking.
Pains
-
Covid Regulations
-
Reaching Appropriate Groups
-
Balance between event and dates
Gains
-
Events being suggested
-
Promotions through newsletters
Persona
The target user included:
● 32 - 55 years old ● User base is an equal split between men and women ● Use phones and desktop applications equally ● Middle class ● Recently relocated to a new city
The only difference between the target user and the interviewees was that few have recently relocated to a new city. This may be a result of the current pandemic situation, where people are sheltering in place for the time being.
Design
Branding
“Michelle” is the event-goer interested in concert events. Her main concern was attending in-person events safely in the midst of a pandemic. Although information about the user target population was provided prior to conducting interviews, they were confirmed through the interview process. The target user included:
Brand personality — a trusted friend that cares about helping people and making a difference in the world.
Brand attributes: *Caring * Familiar * Humorous * Optimistic
Style Guide
Created the colors, typography, UI elements and imagery so that they were consistent across the app.
Colors
To create the feeling of the brand attributes of caring, familiar, humorous and optimistic, I used these two shades of blue, along with black and white
Typography
Initially the typography that was used was Helvetica. However, after creating the high-fidelity screens with the UI kit, it became clear that this typography did not present the right image across the screens. The kit used Gilroy for the headers and Barlow for the typography in the other elements. However, I found that Gilroy was a little too harsh for the image that I wanted to convey in the space of the screen. Therefore, the typography that was used was Varela Round for the headers and Barlow for the remaining typography.
Font Family: Varela Round
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Header and Body
This is the weight and font of H1: Varela round, 32 pt font
Font Family: Barlow
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
This is the weight and font of H2: Barlow bold, 24 pt font
This is the weight and font of H3: Barlow bold, 18 pt font
This is the weight and font of the Body: Barlow Regular, 20 pt font
This is the weight and font of the caption: Barlow Regular, 12 pt font
This is the weight and font of the footer: Barlow bold, 12 pt font
After the style guide was complete, it was used to make decisions in the high-fidelity mockups, user flows, including onboarding, search, and purchasing.
I used one HMW question to drive how I might design the next stage:
HMW create an experience that would allow for users of the app to not only reserve, but attend in person.
Userflow
Steps to creating a prototype included a sitemap and wireframes of the user flow.
The image below shows the route for virtual and in-person events for the Minimum viable Product (MVP). From there, the user would choose the type of event from different categories (e.g. music, technology, food and drink…). The user could either choose by date or event, with several categories to choose from. The user could choose to participate in an incentive, and continue to the payment options.
Initially, a profile creation section was included but was extracted when user interviews indicated that it would not be useful.
….And the name for this application is Ally-Connect, as it implements the elements of the branding personality of a trusted friend making a difference in the world.
The original onboarding screens in the wireframing did not include a home screen. However through Usability testing, it was clear it was wanted and needed. Fonts were adjusted to the rounded buttons included in the UI kit.
Type of Event
In the screens above, the major issue on the wireframe was alignment. The choice of the UI kit helped with design, making it easier on the eye. Another change was the placement and size of the back and search by date button. It is important to see these elements for usability of the application.
Getting the alignment right for the calendar was incredibly difficult. Building each element and getting the size, shade, and alignment was very time consuming. In the high-def, I used a calendar pattern that was already created which cut my time and made it a better understandable experience for users.
Because this application was created during Covid and the stakeholder had indicated that there was a low conversion rate, an incentivization was used to convert more registrations to attendees.
There was some confusion as to the cost of the after-party in the wireframe so it was specified in the high-fidelity.
Login with Facebook
The wireframes for logging into Facebook was not clear but were clarified with the design in the high-fidelity screen.
Payment
The CTA in the wireframe for the wireframe was not clear. In addition, using Facebook friends with photos was much more attractive and called users to reserve for the concert.
Confirmation
In the wireframe testing, users indicated that they had forgotten what the details of the event were so was added in the final high-fidelity screen.
Usability Changes and Results
Round 1 Usability Test Results
Five friends tested the wireframes to see if the design and flow made sense.
The major issues that came up in this test were:
-
Paying with Paypal needs a clear CTA
-
Logging into Facebook or other external site needs clear explanations of why it is being used
-
Using Facebook needs clear results with images of friends instead of just the number of friends.
-
Alignment is needed in the calendar and some other elements
-
Typography needs to be aligned with the elements
Round 1 Usability Changes
After the usability tests conducted for the wireframes, high-fidelity screens were made, implementing the changes from the usability tests. Using the evista UI kit, I was able to create simplicity, while making it look attractive. The following changes were made:
-
Facebook explanation fixed from round 1
-
Images of Facebook friends added
-
Alignment with calendar fixed
-
Paypal CTA is made clear
-
Typography was changed to a more gentler, rounder font.
Round 2 Usability Results
-
Consistency of color and shape
-
Navigation needed clarification with back button
-
Consistency with labeling
-
Correcting typos in information
Summary
In this project, I have conducted research including user interviews, affinity and empathy maps, persona creation, and user flows. I have designed the app according to the product manager’s specs, with wireframes to high-fidelity screens, as well as feedback from user interviews and usability tests.
Participants like the simplicity and ease of the app. The app includes incentives that testers felt would attract them to attend in-person events.
Interesting Insights
-
Although a trend with fewer people using Facebook (especially younger generations), Facebook has a good model for sharing ability.
-
Most testers were fearful of in-person events due to current pandemic situations
-
Testers liked the imagery, simplicity, and how welcoming it was
-
Sometimes it is better to use a pre-made pattern, rather than building from scratch