City Guides
For this project I proposed a UI redesign for an AI tourism recommendation app. The goal was to improve tourist experiences when exploring cities with plans catering to their tastes and, at the same time, integrate the app visually with other products of the company.
A simple premise with a big impact
A travel companion in your pocket and the promise of a tailor-made adventure wherever you visit: This was the essence of the AI-based tourist recommendations app. At a time when the use of AI was not as widespread, this app provided a way for anyone to immerse themselves in the wonders of the city for free.
The demand to integrate the interface with other features and products started to arise, motivated by a shift in priorities focused on expanding the horizons of the software behind the app. At the same time the need to include monetization options grew; The app had to achieve all of this without damaging the good reputation that it had in the Apple and Android stores. This is the context in which I joined this project.
Mockups from a previous redesign of the app, starting point for this project
Helping cities tell stories
The challenge was to, with a single redesign of the interface, improve the experience of existing users, maintain the essence of "exploration on your own terms" for which the app is recognized, and facilitate the integration of new features that were being developed for other projects. One of the pain points of the app, which at the same time happened to be one of the most important features, was the display of dynamically uploaded multimedia material (images, video, audio, hyperlinks). I needed to make information in several different formats easily visible and digestible, and ensure flexibility in interface components to stay ahead of future management software direction changes.
Some valuable features to keep and take advantage of in redesigns
Navigating different priorities
Photos of parts of the UX process on paper..
Although each iteration had its specific characteristics in terms of delivery times and priorities, the problem solving process was always the same:
1. Understand
User priorities and align business objectives to these.
2. Define
The most important problems are to be solved with each iteration.
3. Integrate
Project how the solution makes use of the Dream Factory platform and contributes to its growth.
4. Solve
Propose scalable, technically viable design solutions. I presented these in the form of wireframe prototypes and mockups.
5. Evaluate
Whether the proposal really meets the user's priorities, business objectives and technical requirements.
First wireframes to visualize necessary changes in the structure of the app.
Video of the second iteration of the prototype, testing a new version of the navigation
Through several iterations I sought to achieve visual harmony and give the media the necessary prominence. I experimented with implementing Material Design as a base design system to improve visual compatibility between company products and explored formats to present various information in an intuitive way.
Making the image the center of the experience
To guarantee a visual hierarchy and predictability, I proposes a 3-level structure for screen layout design:
Main Navigation (Level 1):
A visually immersive full-screen experience with swipe navigation, placing image and video front and center. Small indicators at the bottom of the screen guided users and offered an alternative method of touch navigation.
At this level it was important to get away from the rigidity of the design system patterns to favor visual impact. In addition, the the way this level of navigation worked gave us two other advantages: Ease of adaptation to our clients' branding through images, and ease of integration of ADs as an app monetization option.
Mockups with examples of navigation levels 1 and 1.5 (search, lists)
Element View (Level 2):
A full-height dynamic header using the same photo or video as the navigation screen for visual continuity, a button menu for key actions, and a vertical body that houses all related information and media libraries. Users could explore a place or item in the library and find all the relevant details and related items.
Mockups with examples of the view of an element. The element can be a place, an event, a route, etc.
Actions (Level 3):
Pop-up windows that overlay the element's view, creating a focused space for user action without losing perspective of their relationship with the element. This type of component also allowed us to separate more complex tasks into manageable steps to avoid overwhelming the user, and integrate functionality from other products that were being developed at the same time without compromising the main experience of our app.
Mockups with examples of actions
Embodying curiosity to explore
In this process my role as a UI designer was focused on creating an immersive experience. Through the iterations I shaped the application's UI, prioritizing audiovisual media and integrating design systems compatible with other company projects to facilitate the integration of new functionality. This redesign not only solved the main pain points of the existing app but also gave us a clear direction on how to implement projected features such as games and VR tours.
The end result was not only a cosmetic update, but a testament to adaptability, innovation and commitment to offering a better experience to those who already use and love our product. My greatest satisfaction with this project was participating in the improvement of a product with the potential to give real value to people, which invites them to feed their curiosity and explore unknown places at their own pace.
Video of the latest prototype demonstrating the creation of a personalized plan
