
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?
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.
Let's get social
I'm open to work!