Localife

Overview

Localife is a local event finder responsive web app that focuses specifically on local events like farmers’ markets, food trucks, street fairs, and music events.

Duration

• 6 Weeks

Role

• UI/UX Designer

Tools

• Figma
• InVision
• Adobe Photoshop

The Journey

• Competitive analysis
• User interview
• Affinity diagram
• User personas
• MVP
• Jobs to be done
• User flow
• Crazy 8s
• Low-High fidelity wireframes
• Usability test
• Severity ratings
• Moodboard
• A/B testing
• Feedback & critique
• Iterate
• Prototype

Context

What's the problem?

I always enjoy going to local events like farmers’ markets, food trucks, and street fairs. But most of the sites out there don’t provide information about these local events and I always have to search for them.

What's the challenge?

Create a platform where all the event information is accessible while providing a seamless process of looking for events that users are interested in.

Building the foundation

Am I solving the right problem?

Before I start the project, I need to make sure I’m solving the right problem. To do that, I conducted a competitive analysis of Eventbrite and Foursquare.

Outcome

These popular sites don’t display local events like farmers’ markets, food trucks, and street fairs. They are more focused on paid events. Perfect! Let’s move on to the next step.

Gathering information

After the competitive analysis, I need to identify user pain points. I interviewed 7 participants and used an affinity diagram to find out what they have in common.

• Fatigue with scrolling through long lists of events
• Discover events through social media and searching on Google
• Not seeing enough information about the events

Personas

After gaining a deep understanding of our user pain points, needs, and frustrations, I created two personas representing the groups of target users I will be designing for. They will help me focus on their needs and pain points throughout the design process.

Turning insights into actions

Based on data I collected from my research, I defined the MVP (minimum viable product) using the JTBD (jobs to be done) framework. I came up with a list of features and necessary information that can solve the user pain points and improve the experience of finding events for our users.

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 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 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

Generating design solutions

Using the Crazy 8s method, I sketched out different solutions for each flow and dot voted the best ones among them for the paper prototype. The benefit of doing crazy 8s is that I can focus on quantity over quality and think outside of the box.

Testing early

I created a paper prototype using InVision and began my first usability testing. Using severity rating to rate the usability issues on my initial design, I made the necessary adjustments and moved on to mid-fidelity wireframes.

Design system

Colors

Typography

Defining responsive breakpoints

Using a 12 column grid system and the mobile-first approach, I defined that the 4 breakpoints are 375px, 768px, 1024px and 1440px. Here you can see the filter design after some iteration.

Putting everything together

Now that all the screens are completed, I went through a feedback and critique session with my peers and made changes to my screens one last time. And the final product was born.