Comfort in event going
About this Project
UX Researcher |UI Designer
November - December 2020
In this project, it involved a number of different roles and responsibilities. These include management (project planning, designs, recruitment for usability), UX analysis (flows and competitive analysis), design (style guide, wireflows, and hi-fi designs, and prototyping (low-fi and high-fi).
How a cost-effective incentive entices event-goers in attending in-person events
In this student project, 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.
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
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.
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.
An empathy map was created from the affinity map which more clearly showed what users liked about event apps and what was lacking.
Reaching Appropriate Groups
Balance between event and dates
Events being suggested
Promotions through newsletters
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.
“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
Created the colors, typography, UI elements and imagery so that they were consistent across the app.
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
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
Header and Body
This is the weight and font of H1: Varela round, 32 pt font
Font Family: Barlow
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.
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.
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.
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
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.
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