Mobile App Prototype

Local List

Cover image linking to local list case study
Role
UX/UI Design, UX Research
Timeline
8 weeks
Software
Figma, FigJam

Overview

Local List is a mobile app for users to draw inspiration for local and travel adventures by curating and sharing lists of their favorite places. I worked with a freelance client to research, design, and prototype this concept.

view project

Problem

When planning where to go, users typically have to scour a variety of sources, from social media to popular travel sites, in order to find the best spots—a time-guzzling and often disorganized process. Different sources offer different benefits; social media might offer more personalized, trusted recommendations, while platforms specifically geared for travel provide reviews and more in-depth information.

Audience

Two main groups constitute the target audience of this app—users looking to discover new places or users looking to share their favorite places. These groups also overlap with people who want to do both. Someone primarily using the app for discovery may be actively planning a trip, seeking inspiration for future travels, and simply looking to explore their local area. The second group consists of travel enthusiasts, foodies, and local connoisseurs who enjoy providing recommendations to others.

Process

Research

Goals

  • Understand how people currently discover new places, keep track of places they’ve been, and plan trips.
  • Understand any pain points they encounter in the above processes.
  • Understand what’s important to users when discovering new places (eg: proximity).

User Interviews

I conducted interviews with four people from the target user base and diagrammed their responses on an affinity map to find patterns in responses.

I discovered three main pain points:
A lack of centralization in the itinerary planning process.
Difficulty finding trustworthy recommendations for less mainstream destinations.
Trouble keeping track of recommendations accumulated over time.

User Personas

I created 3 personas that reflected experiences, frustrations, and user needs expressed in the interviews. I used these personas as a guide throughout the remainder of the process — designing to address their needs and pain points.

User persona depicting trip planning use case

Competitive Audit

Next, I conducted a competitive audit to identify strengths, weaknesses, and gaps in similar apps. I then used these insights to make a list of opportunities for Local List to stand out. Based on my research and client input, I chose to audit the following apps: 

Google Maps

#1 app on App Store for navigation. Also useful for travel & discovering new businesses.

Mapstr

App for saving your favorite places & sharing and receiving travel recommendations.

Instagram

Popular image-sharing social media app. Recently added a “Guide” feature for sharing places.

Opportunities: 

  1. Make list creation feature a main focus, with the ability to create multiple lists. For me, the list feature in Maps was difficult to find; I had to look up how to use it. Mapstr only allows for one large list that can be filtered. Instagram doesn't have a list creation feature.
  2. Make it easy to save places to lists. This is not a feature on Instagram, I had a hard time figuring out how to do it on Maps, and the process required several steps on Mapstr.
  3. Emphasize social element. As a social media app, Instagram does a good job with this; however, the app is geared towards photo-sharing, not places. Mapstr and Maps have social elements, but have room to encourage more connection and sharing.

Design

Low Fidelity Wireframes

I started the design process by sketching different layouts for each page. With feedback from my client, I combined elements of our favorite sketches to create the final lo-fi versions, which I wireframed in Figma.

Progression of sketches (top) to final lo-fi wireframes (bottom) for Profile & Explore flows

Design System

Since the app would be highly photo-based, I wanted to keep the rest of the design as simple and clean as possible. I went with a white background, coral accent color, and neutral blues, to be used minimally.

In addition to their simplicity, I chose these colors because they could also be used in dark mode. The bright accent color added a more lively element to the design.

For the type, I chose the typeface Nunito, which is a rounded sans-serif with a friendly feel and high readability.

High Fidelity Wireframes

Once I had a solid framework for my design, I cleaned up alignment and sizing, replaced placeholder images and text, and incorporated the icons, colors, and fonts from the design system. I made sure to address the insights uncovered by research throughout the design.

Profile

A key user need that inspired the design of the profile and list pages was helping users keep track of places they've been or want to go to.

The profile serves as a central place for users to access saved and created lists and places. They can view their places both on a map and in an expandable grid view for more detailed information.

I included filter, sort, and search buttons so the lists remain organized and accessible.

Explore

To help users find less mainstream, locally recommended spots, the Explore page highlights "local lists" and profiles. I also included the creator's profile on each list item to indicate whether they are a local.

To make it easy for users to add and save places to lists, I included these buttons on the covers of list and place items.

High Fidelity Prototype

I prototyped a user flow based on the following scenario, featuring my user persona Jenna:

Jenna is a Bay Area native and travel enthusiast currently planning a trip to Paris. She wants to explore less mainstream, local businesses and destinations. She is browsing through the app and building lists of places to visit on her trip. To start, she searches for Paris on the Explore page.

You can watch the demo below or click through the full prototype here.

Outcome

I shared the finished prototype and a handoff document with the client, receiving positive feedback. My client plans to present this prototype to stakeholders as an MVP to get investors and launch the project.

Reflection

Executing this project from end-to-end was equally challenging and rewarding. Limited by constraints such as time and budget, I had to work efficiently and plan ahead. Through the process, I grew more proficient in Figma and deepened my understanding of the design thinking process. I also gained hands-on experience translating insights from research into design. 

If I were to do it again, I would try to allocate some time for usability testing to ensure the prototype was easy to use and intuitive for the target audience.