ABOUT THE PROJECT
Enhancing travel experiences
Cityscape encourages people to discover the local businesses and experiences that make each city unique. Competitive analysis for similar apps revealed that other platforms focus on helping people discover food and restaurants that are nearby. With Cityscape, I identified an opportunity to provide more curated recommendations that focus on communicating the story and personality of each city while connecting users with local experiences. I found that users often make decisions about where to eat based on proximity but also want to find experiences that are unique.
Client
Self-motivated
Role
UI/UX Designer
Timeline
June 2023 - July 2024
Team
1 designer
The Prompt
My self-motivated project began with an auto-generated prompt to design an app that allows users to order food from a beachside snack shack. I used this prompt as an anchor for my project, but stayed open to evolving the direction of the project based on my research findings.
01
Research & Discovery
I started my process by trying to get to know my target audience and identify possible opportunities for design intervention. I also conducted competitive analysis to learn more about existing products and how I could make my offering unique.
User interviews
I talked to 5 potential users about what they like to do when they visit new cities and how they feel about their experiences.
People love trying new foods when they travel, whether picking up food on the go or dining out at a restaurant
People don’t like long waits when they are ordering food or dining in (standing in line to order and waiting for food to be ready).
They want to find unique local foods and experiences when visiting a new place.
They’re interested in knowing more about what makes a restaurant or location unique.
Almost all users recounted traveling with groups of friends or family
Traveling with a group limits opportunities to be spontaneous and explore
People like to explore new cities on foot
Key themes
I identified the following opportunities for design intervention:
Wait time
According to the principle of Idleness Aversion, wait times feel even longer to people when they don’t have anything to do.
Proximity
When people are on foot, they need to see recommendations within a walkable distance.
Local experiences
People like to know what makes the place they visiting unique but don’t always have insider knowledge
02
Ideation
Possible interventions
And possible solutions that I wanted to explore:
Prevent idleness by allowing users to order or make reservations without being at the physical location
Show users things to do while they wait
Give timely and intelligent reminders when it’s time to pick up their food
Point out local favorites
Create space for locals to share their memories or experiences tied to a location
Process work
I began exploring different ideas and concepts through wireframing, which helped me think through the app’s information architecture. I also considered various ways that users may be introduced to the app.
Wireframes – I mapped out the end-to-end workflow (from discovering a restaurant to order pickup) and sketched multiple concepts for each key screen in the workflow.
Site map – I started to consider how the app structure would look.
I considered possible entry points:
Scenario A: Location already found – Users can easily access the app via a QR code.
Scenario B: Planning – Users can set the app to show restaurants and attractions near their current location or within a specific city. Favorite local businesses are marked with the tag “Local Gems” for users who are casually browsing.
Scenario C: Already out exploring – Users can browse options that are closest to their current location on the “Nearby” page.
03
Testing
I built a mid-fidelity prototype in Figma and used Maze to design an unmoderated test with 10 participants.
Working Well
Participants understood the purpose of the app and believed they would enjoy using it:
Most participants understood the purpose of the “Nearby” tab immediately
10 out of 10 users were able to create and submit an order easily
9 out of 10 users were able to navigate the menu easily
7 out of 10 users were able to change the city successfully
Needs Work
Users confused the map on the pickup screen (which indicates things to do while waiting for your order) with the “Nearby” tab:
Users thought they should be able to change the city on the “Nearby” screen
Users conflated changing the city with showing their current location.
Updates
I updated the designs based on feedback from the testing sessions.
Nearby– User can adjust the top level filter while viewing “Home” or “Nearby”. These are the screens they are the most likely to use when looking for an attraction.
Visually distinct maps– “Nearby” features an immersive experience that encourages users to interact with either the map or the carousel. “Checkout” features a smaller map for a snapshot view.
Filter– Users can choose to filter app content based on most popular attractions in a selected area or based on what is closest to their current location.
04
Visual Design
Logo
The logo combines the image of a pin and gem–an important icon that reoccurs in the UI to mark local favorites.
Brand Name
“Cityscape” refers to a piece of art that depicts an urban scene. Similarly, our app tells the stories behind each city and conveys the attributes that make it unique.
Custom Icon Set
I created custom icons to reinforce the app’s playful personality. In compliance with WCAG recommendations, all non-decorative icons throughout the UI are paired with meaningful text.
Colors and Typography
The bright color palette connotes friendliness and adventure. It is used to emphasize actionable elements. Color contrast was tested for WCAG compliance to ensure visibility.
05
Results
After testing and updating my mid-fi workflows, I brought the vision to life with a high fidelity prototype. Out of 21 users, most were able to navigate the workflows easily due to the reuse of familiar patterns, similar to apps like Doordash and Uber Eats.
Find experiences – Users can find top rated experiences from local restaurants to shops, beaches, and parks. They can view experiences for a specific city or near on their current location.
Check walkability – Users can easily check their current proximity to recommended experiences by switching to a map view.
Make the most of wait times – Users how are planning to order online can easily view experiences near their destination to check out while they wait.
Receive timely reminders – the app sends pick-up reminders based on the user’s current location.
"The app is well built and super user friendly."
〰️
"I think that the app is useful if you want to search for good local spots to eat."
〰️
"Absolutely loved the app, has a fresh and modern feel to it. 9/10."
〰️
"The app is well built and super user friendly." 〰️ "I think that the app is useful if you want to search for good local spots to eat." 〰️ "Absolutely loved the app, has a fresh and modern feel to it. 9/10." 〰️
Positive user feedback – Users responded positively to the concept and provided helpful feedback for pushing the idea further.
CONCLUSION
What would I do differently?
Deviate more from the prompt – since this is a self motivated project, it would have been interesting to see how this concept could evolve without such a heavy focus on the food order/pickup angle.
Conduct more usability testing – this was a low budget project, but I could have found ways to test with more people at low cost.
Integrate AI – AI can be an exceptionally useful tool for planning trips and providing recommendations based on popularity. It would be interesting to explore how an AI integration could strengthen this concept.
Dig deeper – Some concepts need further research and iteration. For example, how does the app know what experiences are local favorites? Would locals want tourists to know about their favorite spots or would this cause unwanted traffic?
PREVIOUS
