City Explorer App preview

Role

UX/UI Designer

Tools

Figma, FigJam, Pen & Paper

Timeline

4 Months

View Figma Prototype

City Explorer

An AI-powered mobile app that generates personalized local exploration plans for Chicago, designed to reduce planning friction while keeping users in control.

The Problem

Chicago has a wide variety of unique restaurants, shops, events, and cultural experiences. But planning a local outing still takes a lot of time because users have to search across multiple apps, compare options, check distance, and manually organize everything into one plan. This becomes especially frustrating for people who want to discover local spots instead of tourist-heavy places.

Project Goal

Design an AI-powered planning experience that helps users quickly create and customize a personalized itinerary for exploring Chicago’s local spots.

How I Reached the Solution

- My Design Process -

City Explorer UX design process
Research icon

Research

Background Research

I started with background research to understand broader patterns in travel planning, local discovery, and AI itinerary tools. I reviewed articles, UX case studies, and online travel resources to understand where existing planning experiences fall short.

Search icon

Key Findings :

Discovery creates overload

Many tools provide long lists of places, but users still have to compare options, check details, and decide what fits into one outing.

Local experiences are harder to find

Tourist-heavy recommendations are easy to find, while hidden gems often depend on local knowledge, events, niche searches, and community-based sources.

AI needs transparency and control

AI planning can reduce effort, but users need to understand why places were recommended and be able to edit the plan easily.

Key Findings :

Planning happens across multiple apps

Users relied on Google Maps, Instagram, and Google Search. But the process became time-consuming because they still had to compare options, check hours & distance, and manually organize everything into a plan.

Users wanted local, not tourist-default recommendations

Participants wanted to discover local places, not the same famous tourist spots they already knew.

AI was useful only when users could understand and edit it

Users were open to AI-generated plans, but trust depended on whether the recommendations felt realistic, transparent, and easy to customize.

User Interviews

After background research, I interviewed four Chicago-area users who regularly visit the city. I wanted to understand how they discover places, plan local outings, and feel about AI-generated plans.

interview icon

Competitive Analysis

I analyzed 12 direct and indirect competitors to understand how existing tools support discovery, itinerary planning, local recommendations, AI-generated plans, and user control.

Competitive analysis illustration
Mindtrip TripAdvisor Wanderlog

AI Itinerary Tools

Mindtrip · TripAdvisor AI · Wanderlog

These tools can generate or organize itineraries with maps, saved places, and day-by-day planning. However, they are mainly built for tourists, multi-day trips, or detailed manual planning.

Google Maps Yelp

Map & Review Tools

Google Maps · Yelp

These tools are strong for checking ratings, reviews, hours, distance, and location credibility. However, users still have to compare options, decide the order, and build the plan themselves.

Eventbrite Meetup Facebook Nextdoor

Event & Community Tools

Eventbrite · Meetup · Facebook · Nextdoor

These platforms help users find local events, community activities, and neighborhood recommendations. However, events are usually treated as separate items, not part of a complete outing plan.

Instagram Spotted by Locals Choose Chicago

Visual & Local Discovery Tools

Instagram · Spotted by Locals · Choose Chicago

These tools help users find inspiration, local recommendations, or Chicago-specific content. However, none of them help users turn discovered places into an editable itinerary.

Key Findings :

AI itinerary tools are mostly built for tourists

Direct competitors have strong itinerary features, but they are mainly designed for multi-day tourist planning, not short local exploration.

Discovery tools do not become plans

Indirect competitors can help users find ideas, but they do not help users turn those places into a realistic itinerary.

No tool balanced AI, local discovery, and control

Some tools require too much manual work, while others simplify planning but provide shallow personalization or limited editing.

Gap Identified

Existing tools either support itinerary planning, local discovery, or user control, but none combine all three for short, local exploration.

Synthesis icon

Synthesis

To move from research into design, I synthesized the findings in two steps: user needs analysis and design opportunities.

Themes illustration

User Needs Analysis - 7 Themes

I used affinity mapping to organize findings from user interviews and background research. Through this process, I grouped related notes into seven recurring user needs themes. These themes clarified what the product needed to support before moving into design.

Affinity diagram showing seven user needs themes
A

Planning Friction

Users needed a faster way to turn scattered options into a complete plan without manually searching, comparing, and organizing everything.

B

Authentic Local Experience

Users wanted recommendations that felt local, not just famous tourist attractions or generic popular places.

C

AI Trust

Users were open to AI-generated plans, but needed clear reasoning, accurate information, and transparency before trusting the recommendations.

D

Control & Customization

Users wanted AI to create a starting point, but they needed simple ways to swap, reorder, and adjust the plan without starting over.

E

Distance & Time Awareness

Users needed the plan to feel realistic, with locations arranged efficiently and travel time clearly shown between stops.

F

App Integration

Users wanted food, events, activities, rates, and planning to feel connected in one flow instead of switching between multiple apps.

G

Visual Design & Information Presentation

Users needed visual, easy-to-scan information such as cards, photos, and maps instead of text-heavy lists or dull tables.

User needs notes illustration

Design Opportunities

I then compared the seven user needs themes with the competitive analysis findings to define design opportunities. This step helped me decide which problems were most important to address in the prototype.

Design opportunity illustration

Easy Itinerary Generation

Generate a complete 2–4 stop plan from time, location, and interests.

Layered Personalization

Use both general interests and situational inputs to create more relevant plans.

Explain Why Each Place Is Recommended

Show a short reason for each stop to make AI recommendations easier to trust.

Inline Editing Control

Let users swap, reorder, remove, and adjust stops without restarting the plan.

Distance & Transit Awareness

Show travel time between stops and keep the itinerary realistic.

Visual-First Plan Presentation

Use cards, photos, maps, and clear feedback instead of text-heavy lists.

Define the experience icon

Define the Experience

After synthesizing the research findings, I defined the product experience through personas, journey maps, core use cases, and task flows. This helped translate user needs into concrete design directions.

Personas

The target users are people who want to explore Chicago beyond tourist attractions, but do not want to spend too much time searching, comparing, and organizing plans across multiple apps.

Journey Maps

I created current-state journey maps to understand how different users discover places, compare options, and build plans. Across Emily, Sophia, and Maya, the same pattern appeared: users started with motivation, moved through several disconnected tools, became overwhelmed while comparing options, and ended with a plan that felt incomplete or inefficient. This reinforced the need for one flow that connects discovery, itinerary generation, travel-time awareness, and easy editing.

01

Generate a Personalized Local Exploration Plan

The first core use case focused on helping users create a realistic local exploration plan within a few minutes. The user enters available time, location, and interests, then receives a 2–4 stop itinerary that fits their context. This use case directly addressed the research finding that users wanted to reduce manual searching, comparison, and planning across multiple platforms.

02

Save and Return to a Plan Later

The second use case focused on flexibility. Users may generate or edit a plan before they are ready to use it, so the experience needed to support saving, returning, and continuing later without rebuilding the itinerary.

Core Use Cases

The prototype includes several supporting features, but I defined two core use cases to keep the product experience focused.

Task Flows

After defining the core use cases, I mapped them into task flows to clarify the main user steps, decision points, and system responses before designing screens.

Task Flow 1

Generate a Personalized Local Exploration Plan

Task Flow 1 - Generate a Personalized Local Exploration Plan
Task Flow 2

Save and Return to a Plan Later

Task Flow 2 - Save and Return to a Plan Later
Prototype icon

Prototype

Before moving into sketches, I defined the core actions the prototype needed to support: generate a personalized plan, edit the AI-generated itinerary, and save places or plans for later.

Home

Start a new plan, resume saved plans, or access saved places.

Plan My Day

Enter date, time, location, interests, saved spots, and local events.

My Plan

Review the AI-generated plan, understand each stop, and edit the itinerary.

My Spots

Save and organize individual spots separately from full plans.

Saved Plans

Return to active or completed itineraries later.

Key Screens

I organized the prototype around five main screen categories.

Paper Sketches

I started with paper sketches to quickly explore the structure of each main screen before moving into detailed wireframes. This helped me test layout ideas, navigation patterns, and the relationship between the main planning screens early in the process.

Home
Home screen paper sketches
Plan My Day
Plan My Day paper sketches
My Plan
Itinerary View paper sketches
My Spots
Saved Places paper sketches
Saved Plans
Saved Plans paper sketches

Paper Wireframes

Brand Direction

Typography

For typography, I used Poppins for headings and Inter for the main interface text. Poppins adds a friendly and energetic tone to the brand, while Inter keeps the app readable and easy to scan.

Typography scale showing Poppins and Inter

Color Palette

I used white as the primary interface color and coral as the main brand accent. White keeps the app clean and easy to scan. Coral adds warmth, excitement, and a sense of movement.

City Explorer color palette

High-Fidelity Prototype

View Figma Prototype
City Explorer home mockup City Explorer home screen

Home Screen

Primary CTA: Plan My Day

The Home screen works as a simple dashboard for planning and returning to saved content. I placed the “Plan My Day” card as the primary call to action so users can start a new AI-generated itinerary immediately.

Return to Saved Plans

Users can horizontally browse previously saved plans and tap “Resume” to continue a selected itinerary.

Access Saved Spot Categories

The My Spots section gives quick access to saved place categories, so users can reopen saved cafes, restaurants, shops, or parks and reuse them when planning a new day.

Plan My Day

The Plan My Day screen breaks itinerary generation into clear input sections, including date, time, location, interests, and optional saved places or events.

Set Date & Time

Users select their available date and time window first, allowing the AI to generate a plan that fits their actual schedule.

Choose a Location

Users can search for a location, choose quick options like “Near Me” or “Anywhere,” select a neighborhood, or pick an area on the map.

Pick an Area on Map

Users can select an area directly on the map, giving them a more visual and flexible way to define where they want to explore.

Plan My Day overview

Map and Spot Cards

Saved spots are shown as both map pins and visual cards.

Users can filter by area or category, select multiple saved spots, and add them to the plan.

Choose Event Types

When users turn on Events, they can choose event types such as free events, music, classes, or workshops.

Plan My Day interests, saved spots, and events overview

Select Interests

Users can choose one or more activity types using tappable chips.

An optional text field lets users add specific preferences.

Set the Experience

Setting and pace controls help users shape the overall feel of the outing, from indoor or outdoor preferences to a relaxed or active plan.

Include Saved Spots

Users can let the app automatically consider nearby saved spots or manually choose specific spots.

Include Events

Users can also turn on local events so the app can include nearby events in the itinerary.

My Plan / Generated Itinerary

The generated itinerary is shown with a map preview, date, time, area, and visual stop cards.

Understand Distance

Travel time and distance are shown between stops, helping users judge whether the route feels realistic.

Edit Without Starting Over

Inline actions let users save a spot, replace a recommendation, remove a stop, reorder the itinerary, or add a new stop.

Explain Why Each Stop Was Recommended

Users can expand a stop card to view more details, including a “Why Recommended” section. This makes the AI recommendation more transparent.

Save or Start the Plan

The bottom actions let users save the itinerary for later or start the plan when they are ready.

My Plan generated itinerary screen overview
My Plan add a stop flow

My Plan - Add a Stop

Search or Use Quick Categories

Users can type a specific keyword or choose quick category chips. This supports both specific searches and quick browsing.

Preview, Add to Plan, or Try Another

The result state shows the top match. Users can add the suggested place to the itinerary or try another option.

My Spots

My Spots lets users save individual places. This gives users a personal collection of spots they may want to visit later.

Category chips help users quickly filter saved places by type.

My Spots screen

Saved Plans

Saved Plans lets users return to itineraries they created earlier.

Plans are organized into active and completed states.

Saved Plans screen
Testing icon

Testing

The testing process included two rounds. Round 1 was a preliminary feedback session with three participants. Based on Round 1 feedback, I refined the prototype before formal testing. I slightly adjusted the color palette and typography, created additional screens that reflected different user selections, and added more Figma interactions so the prototype could better match user expectations during testing.

After refinements, I moved into Round 2, a task-based usability test with two participants. In this round, I recorded task completion, time on task, errors, satisfaction, verbal feedback, and SUS scores.

Average SUS Score 82.5

Strong perceived usability, treated as an early positive indicator because only two participants completed the formal SUS evaluation.

Core Tasks Tested

Generate a personalized plan

Review the generated itinerary

Edit the itinerary

Find why a place was recommended

What Worked

The main planning flow was understandable.

Both participants were able to move through the setup flow and reach the generated itinerary. This showed that the basic concept of selecting preferences and receiving an AI-generated plan was clear.

The itinerary screen was visually effective.

Users understood the map, stop cards, ratings, hours, and recommendation explanations.

“Why Recommended” helped build trust.

Both participants successfully found and understood the “Why Recommended” section. This confirmed that explaining the AI’s reasoning helped users understand why a place was included.

What Needed Improvement

Date and time controls caused confusion.

Both participants had difficulty with the calendar, month selection, or time controls. This showed that the input interaction needed clearer visual cues.

Generated results needed stronger preference matching.

One participant noticed that the generated itinerary did not fully match their selected location and food preference.

Editing controls needed to match prototype behavior.

Users expected visible controls such as remove, reorder, undo, and add stop to work. For future testing, I would either make these actions functional or hide unsupported controls.

Reflection & Takeaways

Challenges

Keeping the scope focused

To keep the prototype focused, I had to cut several features that were originally considered. I removed Explore Mode because the project was about planning and editing, not turn-by-turn navigation. Instead, users could open Google Maps from each stop card.

Simplifying event discovery

I also chose not to build a full event browsing screen. Events were included as an optional toggle in the planning flow, which kept the experience focused on generating a complete itinerary rather than becoming another discovery app.

Prototype limitations

Because this was a Figma prototype, the AI-generated plans were simulated through pre-built scenarios. This helped me test the interface concept, but it also showed that visible editing controls, such as Remove, Reorder, and Undo, needed to be either fully functional or removed from the test version.

What I Learned

01

The biggest takeaway was that AI interface design is not only about automation. Users need to understand why recommendations appear, judge whether the plan is realistic, and feel that they can change the result.

02

Features like Why Recommended, travel time, and inline editing became central because they helped balance AI-generated convenience with user trust and control.

03

This project reinforced the value of research before visual design. Background research, interviews, competitive analysis, and user needs analysis helped me decide what to include, what to cut, and how each feature should support the planning process.

Next Steps

If I continued this project, I would improve preference matching, make all editing controls fully functional, connect the prototype to real location and event data, and test with a larger group of users.