places been-redesign
Places Been is an app where the users follow their achievements as travelers, but the app has functional and organizational problems. My main objective was to apply my UI design skills to enhance the information architecture and visual design of the app. By doing so, I aimed to optimize the overall user experience and create a cohesive and visually appealing interface.
Role:
May 2023
UI Designer
Tool:
Figma & FigJam
Platform: iOS
Device: Mobile
Sector tags: Travel & Exploration, Interactive Map, Social Sharing, User-generated Content.
PROTOTYPE VIDEO
THE CHALLENGE
In this particular undertaking, I faced the challenge of redesigning the app in 3 days while adhering to the constraint of not introducing or removing any existing features.
THE CHOSEN APP
I selected an application known as Places Been, which primarily serves the purpose of marking and organizing locations we have visited, wish to visit, and hold a special affinity for. The app showcases all our saved places on a global map, encompassing various types of destinations such as countries, cities, airports, national parks, the top 50 sights worldwide, and UNESCO World Heritage sites.
ORIGINAL APP ANALYSIS
I conducted an expert review and Heuristics Analysis to guide the redesign of an app. By analyzing its strengths and weaknesses, I provided valuable insights and recommendations that led to an improved user experience and enhanced usability.
Ambiguous Link Presentation: Links are unclear, resembling plain text or images rather than recognizable hyperlinks. (Heuristics: 1, 4)
Disorganized Feature Integration: Features within the app seem amalgamated without a clear structure, leading to confusion when trying to locate specific information. For instance, different categories like Upgrades and add-ons are gathered alongside maps. (Heuristics: 2, 4)
Unexpected Content in "About" Section: The "About" section on the homepage contains random information rather than explaining the app's function or how it works. This deviation from user expectations can potentially lead to a loss of trust or cause confusion. (Heuristic: 4)
Inefficient User Experience due to Feature Display: The current arrangement of features on the homepage, disposed in a long format, hinders the efficiency of the user experience. This makes it challenging for users to navigate and accomplish tasks seamlessly. (Heuristic: 7)
Amateurish Design: The overall design of the app exhibits an unprofessional aesthetic, lacking the polish and sophistication expected in a high-quality user interface. This may undermine user confidence and satisfaction. (Heuristic: 8)
COMPETITOR ANALYSIS
This insightful examination provided valuable inspiration and deepened my comprehension of competitors' strategic choices, guiding me in the development of my own design approach. These were the insights I got from the Competitor Analysis:
World map on the homepage;
Features separated into different pages;
Tab-bar;
Add and Share option directly on the World map;
Rounded cards with images;
Clean design.
THE DESIGN PROCESS
By implementing a strategic approach to feature organization, I successfully resolved the primary challenges associated with the app. This involved:
Creation of a comprehensive sitemap to establish a coherent flow within the tab-bar structure.
Creation of a moodboard, meticulously selecting words that effectively captured the essence of the app and evoked the desired emotions within its users.
Development of a set of consistent styles to be utilized throughout the prototyping phase, optimizing time efficiency and maintaining a cohesive visual standard across all screens.
Sitemap
Moodboard
Color Palette
COMPARISON SCREENS
HOMEPAGE
SETTINGS PAGE
Icons change: In the new version, the flag means places visited, the heart icon symbolizes "loved" places (visited and loved), while the bookmark icon has been introduced to indicate places users intend to visit, ensuring clearer and more intuitive navigation and understanding for app users.
STATISTICS PAGE
Tab-bar structure: To enhance usability and streamline the user experience, I devised a tab-bar structure consisting of five distinct screens: World Map, Statistics, Passport, Settings, and More.
World Map: I improved the homepage by introducing the World Map (which shows the places where were pinned by the user). In order to enhance accessibility and accommodate colorblind individuals, I replaced the colored countries with easily recognizable icons.
Shortcut buttons: This addition enables users to easily access these important actions without the need for navigating through multiple screens, streamlining their interactions and saving valuable time.
Essential options: The Settings screen offers users essential options such as reset and backup functionalities, catering to the app's design without requiring user accounts. It provides a convenient and accessible location to manage these important settings.
Extra options: On the More screen, users can access comprehensive information about the app, including details and features. Additionally, they can easily connect with the app's social media presence.
New cards: In the Passport screen, I included a section showcasing collected flags and individual cards representing visited countries. Users can conveniently access related maps and effortlessly add new places to their lists. This addition enriches the user experience by providing a comprehensive overview of their travel accomplishments and facilitating seamless exploration and expansion of their personal travel log.
ADDING A NEW PLACE PAGE
PASSPORT PAGE
The Statistics screen provides an intuitive and self-explanatory interface that showcases users' progress in expanding their knowledge of the world.
After
Before
After
Before
After
Before
Before
After
Before
After
Before
After
NEXT STEPS
Conduct interviews with users to gather insights and feedback;
Integrate the "Explore Places" feature into the app;
Conduct usability testing sessions for the app.