Localife Event Finder | Christy's Portfolio

Localife

Local Event Finder

Studying Mobile First Responsive Design

#ux #ui #responsive #studentproject

Localife is a user-friendly responsive web application designed to help people discover and attend local events such as farmers’ markets, food trucks, street fairs, and music events in their area.

Overview

Duration

6 Weeks

Role

UI/UX designer working on the app and responsive web app design from planning to delivery

Tools

Figma
InVision
Adobe Photoshop

The Journey

Empathize > Define > Ideate > Design > Prototype > Testing > Iterate > Reflect

Competitive Analysis
User Interview
Affinity Diagram
User Personas
MVP
Jobs to be Done
User Flow
Crazy 8s
Low-High Fidelity Wireframes

Paper Prototype
Usability Testing
Severity Ratings
Mood board
Preference Test
Feedback & Critique
Iterate
Prototype
Mock Up

Context

What's the problem?

It can be difficult to find information about free local events like farmers' markets, food trucks, and street fairs on most event platforms that mainly focus on paid events. However, our aim is not to just create a product that displays these events, but to understand the pain points of users with current event platforms in order to develop a user-centric product.

What's the goal?

Let's create a platform that allows easy access to all information about free events. Additionally, let's personalize the homepage to cater to the interests of our users.

01 Building The Foundation

Am I solving the right problem?

To ensure I tackle the correct issue, I have conducted a comparative analysis of Eventbrite and Foursquare, prior to commencing the project.

Outcome

It seems that these commonly used websites do not showcase nearby events such as farmers' markets, food trucks, and street fairs, as they prioritize paid events. Great! We can now proceed to the following stage.

Gathering information

Following the completion of a competitive analysis, my next step is to pinpoint any issues users are experiencing. I conducted interviews with seven participants and utilized an affinity diagram to identify commonalities among their responses.

Discovery

Fatigue with scrolling through long lists of events
Word of mouth affects their decision
Discover events through social media and searching on Google
Not seeing enough information about the events

Personas

Through a thorough analysis of our users' pain points, needs, and frustrations, I have developed two personas that represent our target audience. These personas will guide me in addressing their specific needs and pain points during the design process.

02 Turning Insights Into Action

After conducting extensive research, I used the JTBD framework to establish the MVP (minimum viable product). I identified various features and essential information that can address the users' pain points and enhance their event search experience.

Jobs to be done

As a user, I want to be able to see...

Basic event information, so I can decide if it’s worth it.
Event layout, so I can go straight to my favorite vendor
Reviews and Pictures, so I can see if the event interests me

What pain points can we solve with these features based on the needs and frustrations of our personas?

Hilary can collect all necessary information before attending events
Carly can see events based on her interests on her homepage, and word of mouth can help her make a decision

As a user, I want to search by...

Filter and Category, so I can narrow down my search faster
Price range so that I can find free events
Map area, so I can see events in multiple cities

What pain points can we solve with these features based on the needs and frustrations of our personas?

Hilary can narrow down her search, so she doesn’t have to scroll through a long list of events
Carly can search for events with the least amount of effort.

As a user, I want to be able to...

Follow event hosts and vendors so that I can see upcoming events.
Events that I’m interested in, so I don’t have to search around

What pain points can we solve with these features based on the needs and frustrations of our personas?

Hilary and Carly can follow their favorite vendors and event hosts to make Localife more personalized to each user.

User Flow

Grouping the above features and establish the user flow

Flow 1 - Search and map search
Flow 2 - Filter and Category
Flow 3 - Follow vendors and event hosts
Flow 4 - Login/Sign up and profile page

03 Generating Design Solutions

I utilized the Crazy 8s approach to brainstorm various solutions and then narrowed down the best ones through dot voting. My selection was based on the layout and user-friendliness of each screen element, ensuring that all information is easily accessible to our users. Additional functions, apart from the primary flows, can be seamlessly integrated. This technique enables me to prioritize quantity over quality and explore unconventional ideas.

Testing Early

After creating a paper prototype with InVision, I conducted my first round of usability testing. By utilizing severity ratings to evaluate the usability problems in my initial design, I was able to make the required adjustments and proceed to mid-fidelity wireframes.

Severity Rating

Error Rating

Findings

Suggestions

Catastrophe

No manual input option for distance
Price range search instead of just paid and free
Some users don't want to turn on location service

Add an input field for distance with slider
Price range slider

Zip code input for location

Major

Notifications for upcoming events from hosts that user follows

Add notification to flow

Minor

Add event to calendar button
A long list of tags in the interests page

Add an icon or button to add event to calendar
Create a subpage for each interest category

04 Design System

Colors

Typography

Poppins

05 More Testing

During my analysis of competitors, I found that the majority of popular websites place their filter display above. Consequently, I conducted a preference test to determine which design I should adopt.

I collected 22 responses through Usabilityhub and the slide-out panel emerged as the winner.

06 Defining Responsive Breakpoints

I utilized a 12-column grid system and adopted the mobile-first approach to establish the four breakpoints at 375px, 768px, 1024px, and 1440px. Below is the filter design that underwent several iterations.

07 Feedback & Critique

After finishing all the screens, I underwent a feedback and critique session with my peers. I made some adjustments to my screens based on their feedback, and the final product was created.

What were some of the challenges you had to overcome?

Retrospective

08

I encountered some difficulties while conducting a competitive analysis. The websites of my competitors were so well-designed that I initially felt there was no room for improvement. However, after conducting some user interviews, I realized that there are pain points and areas for improvement that I can address to make my product more user-centered. To further enhance the user experience, I believe I need to expand my knowledge of quantitative competitive analysis and learn how to effectively apply this information.

What went well?

The interviews and usability tests with the users were successful. I gained knowledge on how to ask more effective open-ended questions to gather more valuable feedback and insights compared to my previous project.

In the usability test, some participants noted that the product was incredibly user-friendly due to its streamlined design. This made me consider that if I were to deviate from established design patterns, users may have difficulty recognizing and utilizing the product. Further research revealed the MAYA Principle (Most Advanced Yet Acceptable), which supports the reintroduction of familiar patterns in visual design to help users orient themselves.