Branding, UX Research, Prototyping, Web Design
Feels: Adventurous | Inspiring | Manageable
When you visit big cities like Boston or NYC and want to see some cool places, sometimes it's hard to know where to start. Or maybe you've visited before, and just want help finding a neat place for lunch.
That's where Location Station comes in. This user-friendly kiosk allows you to input your preferences and timeframe and get a customized itinerary. The kiosk removes the stress of planning and helps you quickly plan a memorable trip.
- MVP/User Stories
Wireframes - Moodboard - First Prototype - Edits - Final Kiosk
I recently visited Boston in the fall, and spent the time planning the trip, deciding on the different places I wanted to see. While there, I visited the welcome center and saw all the brochures lining the walls. That got me thinking. What if the welcome center had a kiosk where I could enter preferences of what I wanted to see, and the kiosk would give me a curated list of the best options based on my preferences.
The more I looked around at travel sites, the more I saw that they are busy sites filled with paragraphs of information, pictures and lists, which can easily overwhelm.
The traveler coming to the welcome center would not want to spend hours scrolling through 50 different options, reading lots of long text. This kiosk would need to be simple.
I decided that answering simple questions is easy to do and doesn't drive away a user. So that was the basis of the kiosk - guide the user through simple questions with 2-3 options, asking things like how far they're willing to travel, and what style of tour they're looking for.
Things a traveler would need from a kiosk:
I created personas based off my research for the kiosk.
Minimum Viable Product/User Stories
Creating UI elements from understanding the basic needs of users and what they need from the kiosk
Userflows show two possible paths a user can take from their entry point to a successful action. In this case, success means they were able to choose their destination.
These wireframes were the first layout of content and functionality.
Simple, bold, clear, with flat graphics, a map pattern, and just a few color options.
To get some UI going so I could start testing the app, I created this first prototype in Adobe Xd. This allowed me to start getting feedback on text and button sizes and element placement.
As I started creating the kiosk in wordpress, I started making changes to the original design of the kiosk based on feedback and user testing. WordPress is for making websites, not apps. So the website couldn't store the user's input then output the results at the end like I'd originally planned.
- Removing sidebar navigation
- Removing all "next" buttons
- Simplifying the progress bar
See the Kiosk
*Note, the kiosk was designed for a device larger than most monitors and laptops and is not designed to be super responsive. Consider scaling down your browser window to view the kiosk at the correct size.