top of page
localife2.png
Localife
Local Event Finder

Studying Mobile First Responsive Design

#ux #ui #responsive  #studentproject

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.

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?

What's the problem?

The majority of the event platforms only offer information about paid events. Free local events such as farmers’ markets, food trucks, and street fairs are often hard to find.

 

Although we can simply create a product that showcases these events, we need to find out user pain points with the current event platforms to create a user-centered product.

What's the goal?

Create a platform where all of the free events information is accessible and provide a homepage tailored to our users' interests.

01

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.

affinitymap.png

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

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.

P1.jpg
P2.jpg

02

Turning Insights Into Action

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

user flow.png

03

Generating Design Solutions

Using the Crazy 8s method, I sketched out different solutions using the Crazy 8s method and dot votes the best ones among them. I voted them out based on the layout and ease of use of every element on the screens. Ensure that all of the information is clear for our users to access. All necessary functionalities other than the main flows can be connected and implemented efficiently. The benefit of doing crazy 8s is that I can focus on quantity over quality and think outside of the box.

localife-sketches2x.png

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.

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

localife-wireframes2x.png

04

Design System

background.png

Colors

colors.png

Typography

Aa.png
typo.png

Poppins

05

More Testing

localife-abtesting2x.png

During the competitive analysis, I discovered that most popular sites have their filter display above, so I performed a preference test to see which design I should go with.

Using Usabilityhub I was able to collect 22 responses and the slide out panel is the winner!

06

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.

localife-breakpoint-img2x.png

07

Feedback & Critique

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.

localife-screens2x.png

What were some of the challenges you had to overcome?

Retrospective

08

I was having some trouble when conducting a competitive analysis. The competitor's websites are so well made that I didn't find anything to improve on, but I overcame that thought after doing some user interviews; there is room for improvements and pain points that I can solve to make a more user-centered product. I need to learn more about quantitative competitive analysis and how to utilize that information to make better UX.

What went well?

The user interviews and usability tests both went very well. I learned to ask better open-ended questions to get more insights and feedback from participants than my previous project. 

During the usability test, few participants said that the product is very easy to use because the design is very streamlined. That got me thinking that if I was copying designs, but if I don't design it this way, user might not recognize it. After doing some research. According to MAYA Principle (Most Advanced Yet Acceptable"; It is okay to reintroduce familiar pattern, Including familiar patterns in the visual design so users can orient themselves.

Let's get social

I'm open to work!

Send me an e-mail:

christychan04@gmail.com

Connect with me on Linkedin!

  • LinkedIn
emailwhite.png
bottom of page