ABOUT THE PROJECT
City Soul is an app (MVP) that acts as a travel assistant for users planning a unique, personal experience toward their tourist destination. A hyperconnected digital product designed for both traditional destinations and smart cities. With a collaborative vision focused on improving user experience, it offers B2B partnerships with airlines, museums, theaters, tourist attractions, digital ticketing and discount platforms, credit cards, restaurants, taxi services, advertising, car rental, hotels, and cinemas.
PROBLEM
Audio guides currently on the market target a broad, unsegmented global audience, and their content is expensive, generic, standardized, and dull. They don't address the specific interests of users who want content tailored to their needs. They offer audio guides for a "standard tourist" that don't go deep into their content — they're long, skip interesting or important details, and deliver vague, uneducational explanations in a neutral, robotic tone. They're audio-only, with no accompanying imagery, and limited to a tedious reading of a script.
CHALLENGE
Design an app that helps users build a personal or family experience based on functionality, bilingual content, and personal interests — academic, touristic, culinary, leisure, accommodation, and shopping. Reduce wasted time and eliminate uninteresting information.
SOLUTION
Design an app (MVP) with content delivered in different tones: historical, humorous, and academic. A product with a collaborative vision that lets users discover and share their experiences. Offer the option to explore tourist spots in a creative and fun way, as well as lesser-known places through other users' personal experiences.
A hyperconnected app linked to a city's tourist landmarks and most-visited spots, with the goal of building large communities worldwide and enabling users to:
- Get free audio guides of varying length — official and controllable — for a city's most iconic tourist sites.
- Discover a city in a different way, through traditional routes or trips recommended by other users.
- Earn likes through their rewards system by sharing experiences and making recommendations, in exchange for prizes (metro tickets, museum entries, concert and event tickets, flights, etc.).
MY ROLE
UI Design
Design MVP
User Flow
Persona
Wireframes
Prototypes
User testing / Ideation
Presentation to Client
HYPOTHESIS
Most people traveling on vacation don't want to waste time on a tourist tour that includes information unrelated to their interests. They want to plan their experiences using digital products, in order to make better use of their time and have a better personal experience.
"I believe that developing an app offering a personal, interest-based experience-planning service can build trust, provide security, and save time."
KEY FOCUS AREAS
- What are the challenges or barriers to the adoption and use of the app?
- What matters most for delivering a great app experience?
What are users' needs — and unmet needs — both online and offline? - How do users interact with their smartphones at tourist sites, with or without internet access?
Feedback on the Low-Fi prototype.
KEY USER NEEDS
Find what's right for me
Easily find what they're looking for, plan and share trips, buy and download official audio guides for tourist sites, belong to a virtual community, and have individual and group experiences.
Personalization is an important feature for users with both specific and general needs.
Make the space worth it
Customers guard their storage space and regularly choose apps they don't use frequently.
We had customers complete a card-sorting exercise to help us understand what matters to them in an app experience.
I need help
Some of customers' main frustrations occur during their on-site experiences — they're unimpressed by busy, disengaged staff, as well as poor assistance at changing rooms and room availability.
It needs to be easy for users to find, access, share, and save information, with or without a regular internet connection.
The product is key
Whether exploring new places or looking for something specific, searching for information or planning the experience needs to be well thought out, intuitive, and easy to do.
Without a traditional website to browse and buy products, it's important that an app can meet these core customer needs.
PROCESS
Without an established presence in Spain yet, we couldn't recruit existing City Soul customers, so we interviewed our target audience (tourists) on-site to gather insight into their interests, needs, motivations, and frustrations in order to shape the app's solution. Empathizing was the first step in planning, allowing us to gather the initial data needed to develop the following phases.
INTERVIEWS
I conducted interviews with stakeholders from different areas to understand needs, opinions, and strategy for the app (MVP). This stage was important for understanding the current state of existing apps, analyzing their sitemaps, understanding their flows and access to information, and then analyzing the qualitative and quantitative data and cross-referencing it to reach conclusions and solutions.
Main topics/goals of the user interviews:
- Information on audio guide usage.
- Perceptions of app usage habits for planning tourist experiences.
- Awareness of the benefits of audio guides.
- Awareness of current technology on the market.
- Users' vision of the product (audio guides).
When conducting the analysis, I focused on Nielsen's 10 usability heuristic principles and used green, yellow, and red in my notes to flag whether something was good, moderate, or needed improvement:
- Visibility of system status.
- Match between system and the real world.
- User control and freedom.
- Consistency and standards.
- Error prevention.
- Recognition rather than recall.
- Flexibility and efficiency of use.
- Aesthetic and minimalist design.
- Helping users recognize, diagnose, and recover from errors.
- Help and documentation.
I interviewed 110 users — 55 men and 55 women, aged 20 to 45 — in Barcelona's busiest tourist areas.
I designed a questionnaire focused on their personal interests, ease of use, and interest in the app.
The research helped identify our target audience and their purchasing habits; demographic data and digital inclusion gave us insight to move the project forward.
In summary, the analysis pointed to two areas to focus on:
Adding more value to the planned experience through enhanced tech-tracking features and by building communities that share information to create a unique community database.
Key metrics would include engagement, comments, ratings, and gamification.
PERSONAS
The interviewed users allowed us to observe and analyze their interactions and behavior with this and other apps. This data, along with demographics and preferences, laid the groundwork for the research and helped define three persona types: a group traveler (family or friends), a solo traveler (professor or researcher), and an open, adventurous traveler (tourist).
I referred back to them throughout the entire product development process, and each persona had a scenario identifying a realistic goal the user might have when using this app.
The information about each persona focused on their goals and frustrations with the product, as well as their interaction with it, which heavily influenced my design decisions.
Based on the personas we interviewed, there's a need to create a product with a strong market differentiator, one that's fully digital and adds real value to people's lives.
Users' attitudes and interests helped strengthen the core idea: to create a collaborative, simple, and intuitive app for sharing information, gathering data, and planning a unique personal and group experience.
USER FLOW
We created the information architecture and ran several brainstorming sessions. We covered many categories and subcategories, taking into account how users group information. We also factored in that the mobile app had additional features for following or chatting with influencers.
I created a user flow diagram to map every step of the user interaction required to achieve the app's main goal:
"Plan my experience based on my interests, discover touristy and lesser-known places, and share my experience quickly, safely, and without wasting time."
FLOW CHART
We noticed that existing audio-guide apps have complex structures with poor content distribution. To avoid confusing users, we simplified navigation and unified the purchase, download, and content-publishing process, along with route planning and sharing — as well as data, gamification, and trip publishing. Three navigation levels unify interaction across these app processes.
WIREFRAME
Based on these studies, we built mid- and high-level navigation structures. This process involved the product owner to validate and align the navigation flow with the new information hierarchy.
DESIGN SYSTEM
Since the site was aimed primarily at a very general audience, the client wanted a light, friendly look (even slightly understated), fresh but traditional — one that wouldn't confuse users while they searched for information.
I created four different versions of the look and feel to present my ideas; after meetings with the client and gathering feedback, the final proposal emerged.
COLOR, ICONS, AND TYPOGRAPHY
Working closely with the Brand Experience team, we defined the tone of voice and brand identity and developed a brand usage guide.
SKETCH PROTOTYPE
Throughout the creation process, we kept a mobile-first mindset front of mind, mainly because it was the primary access point. Another interesting solution was creating different content depending on location, since the company would be present in nearly every tourist spot in each city.
We built functional prototypes for mobile devices: phone and tablet. These prototypes were tested to identify weaknesses in areas like usability, UI, navigation, and other issues.
THE PROBLEM
The biggest challenge was the mobile app's menu structure and simplifying the information. Our users are used to a hamburger menu that, in the cases we studied, surfaces site content, plus a bottom navigation bar that depends more on the app's functionality.
DETAILED UI SCREENS
Once we defined each screen's interface elements, we combined them to create the final version.
THE SOLUTION
In the end, we stuck with bottom navigation because users found what they were looking for much faster.
USER INTERFACE DESIGN
With the tone of voice, look and feel, brand identity, and brand guideline defined, we moved on to UI design. I designed the app's interface based on the research findings.
CARDS
A summary of the interface's main cards. I designed a card system with a minimalist aesthetic, surfacing key information that varies by context.
PLAYER
Various states of the audio guide player. Easy to use and adaptable to the app's various contextual screens.
BUTTONS
The app's button system and states are fully integrated with the visual language. Active, inactive, and pressed states.
Welcome to City Soul. An app (MVP) that will be your personal travel assistant. Plan your personal and family tourist experience. With this hyperconnected digital product, you can enjoy traditional destinations and smart cities in a whole new way.
B2B partnerships with airlines, museums, theaters, tourist attractions, online ticket vendors, credit card usage, restaurants, taxi services, car rental, hotels, and cinemas will enhance your experience.
ONBOARDING
The welcome screen introduces the user to the app and highlights its main features. It helps users understand the app's functionality and showcases its most useful aspects.
SIGN UP
This would be the main function right after onboarding. It can be skipped and completed later. The interface has active access points to various features related to registration and app access.
NEW USER
Creating a new user is a basic function in this type of app. Account creation is based on the user's interests, and is quick and simple.
PASSWORD RECOVERY
Password recovery is essential in this type of app. Recovery is universal and simple.
HOME
A simple, always-accessible menu based on cards with images and useful information — any user can discover (or already know) a tourist spot, products, brands, and services. App personalization is an essential part of the experience.
Simple, intuitive navigation and basic mobile-app usability ensure an optimal experience with City Soul.
A traditional purchase flow for items, plus a booking feature, became an important part of the app. For users to easily use an audio guide, book a spot, buy a ticket, download a trip, and plan their experience, navigation simplicity is key.
SEARCH
By user demand, searching for tourist sites — and lesser-known ones — needs to be easy to use and accessible throughout the entire experience. That's why the menu appears and disappears depending on the active feature. Users can configure it to stay always active.
ADD CREDIT CARDS
Here you can find all the basic information about your money and deposits. You can configure card information in settings if needed.
The app's big advantage is that you can easily switch from one card to another. This feature saves you time.
SCAN CREDIT CARDS
The app's user experience was designed so anyone can use its full functionality. Switching payment methods, scanning a card, adding it, and using Touch ID are important features for our users.
City Soul doesn't have rich functionality, but it can perform basic operations such as: adding credit cards, switching and adding payment methods, and making online purchases.
That's why the interface has a modern, minimalist style, making interaction with the app as easy and pleasant as possible.
ADD CREDIT CARD
CHANGE PAYMENT METHOD
PAY WITH TOUCH ID
PROFILE
Users can easily set up their profile based on their data and interests, view their rewards, level progress, benefits, profile settings, and access reward codes and offers for various locations.
PREFERENCES
Simply and accessibly, users can always configure the app — a feature requested by users in the interviews.
CATEGORIES
CITY SOUL
Here we see the process of searching, accessing, purchasing, and downloading audio guides for very specific tourist spots that define the soul of a city like Barcelona.
PLAY
Process for purchasing a concert ticket.
EAT AND DRINK
Summary of the process for discovering restaurant and bar options near you. With City Soul, users can book and include this option in their planning.
BUY IN · STEPS
Here we present the global payment process designed in three steps. Buying a ticket, an audio guide, or a restaurant/bar reservation uses the same method.
PAY WITH APPLE TOUCH ID
Cash-free transactions are one of the key features in the tourism sector. That's why we developed this feature with the utmost care, to make payment easier through modern, accessible electronic systems for our users. Touch ID is a feature requested by them.
DOWNLOAD
Viewing, buying, and downloading an audio guide quickly and easily was something our users asked for — along with adding all the relevant information to a predefined route.
MAPS AND TRIPS
Integrating the map, audio player, and route into a single screen was quite a challenge.
The goal was to bring these three elements together simply, offering immediate access to their functionality while users enjoy their experience without complications when using the app.
Both the app's own map and the Google map show the defined route, images of the route's tourist points, information about each location, the option to download the map for offline use, and audio control through a versatile player.
OTHERS SCREENS
A broader view of the app across this variety of product screens.
LEARNINGS
Our client
With the pressure of a tight budget and deadlines, it was difficult to redirect the client's focus from "the next feature" toward the customer. We were able to get periodic updates from customer service and analytics, but we couldn't gather important qualitative feedback. This made it harder to help our client make evidence-based decisions with ongoing features. This isn't an uncommon problem, and it isn't solved simply by raising these issues in meetings. Running small workshops to assess customer convenience could have been an effective way to surface important unknowns and encourage directional research.
Out of sight, out of mind
Introducing design systems into our agency's workflow was a relatively new part of our process, and I had underestimated how hard it would be to drive adoption. A design system needs constant reinforcement, particularly when operating within teams that see regular staff turnover. The success of a design system depends on having a dedicated advocate.
Hello,
Want to know more?.
Want to talk about your next project?.
I will be glad to hear from you.
Thanks.
© 2016 Jhonatan Medina Caguana. All right reserved.