Published on | Prototyping: From UX to Front End — Medium Kevin Xu

Product strategy, iOS design, UX/UI design

You’re hanging out at your friend’s place and you guys are talking about what to do. You guys don’t really know what to do, so you open up Google to look for events around you. You find the results that come up are very limited and would love it if you are able to see more events around you. You hear of this app called Lucidlife that’s available for download in the iOS store, you download it and use it to look for all the different events going around you within the next 12 hours.

You are intrigued by how you can earn points every time you attend an event! The app also allows you to earn more points as more of your friends attend the event with you. You invite and go with a group of friends to the event, you accumulate enough points for a discount code and you redeem your points for $2 off a drink.

Lucidlife: A Spontaneous Event Finder App

Everyday, there are dozens of events going on in downtown Toronto. Most of us are only exposed to a small number of events, which limits our options to what we can do on a night out. It is also sometimes difficult and time consuming to convince a group of friends to go to an event. Lucidlife helps solve these problems by:

Providing one platform for all events going on in downtown Toronto within the next 12 hours
Give users options to filter events so they find exactly what they’re looking for quickly
Gamify attending events to increase app usage and help businesses gain more customers
Help coordinate a group of friends to attend an event through offering discounts on event costs for larger groups.

Check out my prototype here.

Design Objectives:

Redesign the app’s information architecture, UI and overall user flow.
Gamify the app to increase user retention and businesses’ customer base
Simplify coordinating events with friends using incentives

Time

3 weeks sprint in Agile environment

My Design Process

I used Human-Centered Design and Lean UX Design Thinking to make sure my decisions were supported by user research and feedback.

Research

Goals:

A. Find current pain points of existing app

B. Learn about the event seeking process

C. Understand attitudes toward spontaneous planning

A. Find current pain points of existing app

I began by conducting six usability tests with the existing Lucidlife app found in the iOS store.

Unhelpful popup

When there were less than 34 events going on, a “meh” screen appeared, notifying users that the city is dead and asking them to come back tomorrow. Users felt this screen was turning them away from using the app again in the future.

2. Icons were cluttered and unclear

Map icons were too cluttered for users to see exactly where something was. The difference in colour between icons confused users. Icon images were not clear enough for users to understand exactly what they are representing.

3. Confusing event card

The “1.0K” on the top right corner was confusing, users did not understand what it meant (suppose to represent number of people interested on Facebook).

The hours of operation bar was misleading since users thought it was a slider bar they could interact with.

4. Lack of information about event on description page

Not enough information was laid out on the event description page. There was no price and no name of the venue which the event was hosted at. The background picture did not show users related information of the event.

5. Too many options for filter

The filter had too many options, it slowed down users’ decisions. When users selected some of the filters, no events appeared on the map since there weren’t any events that fit the selected categories.

The garbage bin on the top right corner was confusing, it was meant to delete applied filters but no one understood.

B. Learn about event seeking process

Survey: 58 Responses
8 interviews
Competitive analysis

Insights

When making plans, respondents prioritized:

Social factors: “are my friends going?”
Personal factors: “does the event alight with my preferences?”
Logistic factors: “Where is it?, How much does it cost me to go?”

Details we would need later:

Types of events they would go to spontaneously: 8 categories (instead of the original 24)
Mode of transportation to and from events: by foot, public transit, car and Uber
Planning methods with friends: by group chat on Facebook or text and by sharing links in these groups

c. Understand attitudes toward spontaneous planning

The majority of people preferred to plan ahead when going to an event, however, there were still a large percentage (65%) of people who planned the day or hour of. We redesigned the app with the goal of satisfying these types of users.

From the research insights, i created two personas.

User Personas

I created an user flow of the critical path a user will take through the app.

User Flow

After i understood how the redesigned app would work, i began to define the new features of our redesign.

Ideation

New UI: Feel and look of the app should fit with the spontaneity of the app (to find events within the next 12 hours only).

2. Filters: Create an optimized, minimalistic filter to help users easily find events they want to attend.

3. Sneak Peek: Let users know when events are happening with sneak peeks catered to their past searches. This ensure users are aware of what’s coming up and don’t miss out on events they might like.

4. List View: Account for browsing of events instead of pointing out events on map view.

5. Gamification: Create a points system to encourage and incentivize spontaneous planning

6. Travel Aid: Link map to Google maps and Uber to allow for simple commute to and from event.

1. New UI

We redesigned the app’s UI because we felt the old UI was dull and did not fit the app’s purpose.

Style guide of redesign

We redesigned the app to have a spontaneous and fun feel to it.

We redesigned the logo as well, the original logo was generic and off-brand due to it saying “Lucilife” not “Lucidlife”.

2. New homepage with new filters

The new homepage has two search bars, when and where. It also has a new filter that is horizontally scrollable with eight togglable categories: music, nightlife, sports, shopping, film, theatre, art, and culture. If a user wishes to apply two filters, they would select two categories to filter events that goes under those two categories.

Map icons were redesigned for increase clarity. A new footer was created so all critical paths of the app are at the users’ disposal.

3. Sneak Peek

The sneak peek popup appears once every day, to notify the user that there are events similar to the ones they attended in the past, to help them make a decision faster.

4. List View

A list view was created to account for users’ browsing habits. Some users preferred to casually browse through events instead of having to spend mental energy to look for events on map view.

Each event card showed which had a discount, how many people were going to the event and how many are interested (data pulled with Facebook API).

The “13 minute walk” told users how long it would take to get to the event from their location. It can be changed when the user clicks on it to set new settings (travel via foot, car, public transit, bike).

5 & 6. Gamification through points system

We designed a points system that works in the following way: When you attend an event, you receive 5 points due to your phone’s location services knowing that you are at the event location. You invite friends through your own chat services (Facebook messenger, text, etc…), they receive a link to your event and a suggestion to download Lucidlife. When they accept, they become part of the group you are going to the event with. Their names will appear with “on the way” beside them, letting you know they are on their way. As they arrive, their names will be checked off and points are given as more friends arrive and the progress bar updates. When you accumulate enough points, you can redeem your points for a discount code that you can show to event employees to receive discounts as specified by event host.

We created this feature because we wanted to make it easier for users to convince their friends to go to events together and to help businesses gain more customers, it’s a win-win situation.

The map on the event page will be linked to Google Maps and Uber, to allow users to find their way to the event easily.

Prototype and Testing

I used Sketch to create hi-fi mockups of my proposed solutions and used Invision to create a prototype. I tested the prototype with six new individuals. Insights from the tests led me to reiterate on my designs. Below are the before vs. after mockups of my final solutions.

Pain Point 1: Users did not understand that map icons were clickable. They also did not know which events had discounts on the map view.

Solution: New map icons that are designed to be consistent with existing map apps such as Google or Apple maps, for better information recall. Put a $ beside map icons with discounts to indicate which events had discount codes available.

Before vs after of home screen

Pain Point 2: Event breakdown screen was confusing due to elements being inefficiently laid out. Points progress bar was out of sight.

Solution: Redesigned screen with clearer element layout. Made the map smaller so users can see part of points progress section to let them know there is more to see below the initial screen.

Pain Point 3: Users thought the event location map could have been more clear on indicating exactly when they got to the location.

Solution: Redesigned the map to be live, tracking you until you get to the location, earning you five points.

Check out my InVision prototype here

Key Learnings

Lucidlife is a spontaneous event finder app to help users find events available only within the next 12 hours. It has a unique points system that incentives users to increase their usage of the app while also offering businesses a way to increase their customer base. I can’t wait for this app to be updated in the iOS store and when it comes out on Android in a few months, i for sure see myself using it!

Thanks for reading! If you want to talk about UX design, product design, or have an work opportunity, hit me up at xkevinhyx@gmail.com or connect via Linkedin.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Gamifying Your Night Out was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Gamifying Your Night Out

Cool stuff, every week

More Articles