top of page

TIMELINE

Feb - Apr 2023

ROLE

UX Researcher,
UX/UI Designer

TOOLS

Figma, Mural, Canva 

METHODS

Brainstorming, Competitive Analysis, Semi-structured Interviews (+ guide creation), Affinity Diagramming, Personas, Storyboarding, Sketching, Wireframing, Low-Fi Prototyping, Usability Testing (+ guide creation), High Fi Prototyping, Heuristic Analysis, Accessibility

PROJECT CONTEXT

My Role. In my Spring 2023 UX/UI Design class, I collaborated with a team of five, leading accessibility interviews/usability testing, analyzing research, and contributing to ideation and prototyping.

​

Requirements. The class project required us to focus on designing an interface that addresses a problem faced by people. As travel enthusiasts in our team, we decided to target the challenges faced in planning group trips. In addition to accessibility considerations.

​

Limitations. Given a semester's timeframe, we prioritized research methods and limited our design scope to produce and test a meaningful prototype efficiently.

Introduction

(INITIAL THOUGHTS)

Group travel while enriching, brings along unique complexities - from varied payment methods to organizing joint confirmations. Current tools offer isolated solutions like calendar sharing or multiple payment options, but the real need is for a comprehensive platform that seamlessly integrates these functionalities. 

McDonalds Tweet
TikTok Post
Twitter Tweet
Reddit Thread
Reddit Reply
Reddit Reply
tripify banner (70 × 36 in).png

PROBLEM

Individuals find it challenging to plan for group trips.

In the process of planning group travels, whether it is with your family, friends, or coworkers, individuals often encounter difficulties organizing itineraries, coordinating schedules, and managing shared expenses, leading to a stressful and inefficient planning experience.

GOALS

User Research: Understand group travel challenges and the specific needs of users with disabilities through comprehensive user research.
App Development: Design a unified platform to streamline group travel planning by consolidating key features into one app.
Inclusive Accessibility: Ensure app inclusivity by incorporating accessibility features tailored to users with visual and hearing impairments.

INITIAL FEEDBACK/INITIAL CHANGES

From UX/UI Design class, Professor, and TA.


1. Solo vs Group Travelers

Integrate options for solo and group travels

2. Feature creep - excessive; overload of features​

***Focus on collaboration/communication/coordination (CCC) aspects of streamlining rather than integrating multiple apps. Example: Rather than integrating payment apps & booking apps, we give users a space to communicate with all members of a party that these designated tasks have been done/confirmations can be posted or shared

tripify banner (70 × 36 in).png

THE SOLUTION

Tools that connect all members of a group are key 

Information

Designation/Budgeting

Organization/
Communication​

  • Sync Calendar with streamlined planning and color code

  • Personal/Group real-time notes

  • Centralized comms in one platform/efficient for quick decision making

  • View group members, countdown til trip, and timeline with map integration & pdf upload capabilities

  • Destination Info sheet -- including Language 101, Overview, Weather, Currency Converter, Rec. Activities, Transportation, and Important Laws

  • Allow group members to claim responsibility for various tasks/items, promoting accountability and ensuring tasks are evenly distributed

  • Facilitates setting group/individual budgets and tracking expenses in real-time, helping members manage funds more efficiently

  • Split payment feature with notifications ensures transparency in shared costs and more timely process

Research

COMPETITIVE ANALYSIS + THE GAP

Seven Criteria: Itinerary Management: Does the app allow users to create, share, and update travel itineraries? Group Coordination: How does the app support group decision-making, role assignment, and information sharing? Communication: What tools does the app provide for intra-group communication or communication with travel service providers? Budgeting: Can the app track expenses, allow for shared payments, and help with budget planning? Destination Information: Does the app provide relevant details about the destination such as attractions, local customs, weather, etc.? Accessibility: Does the app cater to users with various abilities? Are there options for text-to-speech, high-contrast visuals, etc.? User Interface (UI): How intuitive and user-friendly is the app's interface?

Competitor Apps
Competitive Analysis Chart

The competition had NO accessibility aspect and group designating aspects.

I analyzed the top 5 iOS trip planner apps. I discovered a significant gap – none had an accessibility feature to help users achieve their goals. None of them had a way to designate certain group members to take responsibility/charge for the travels. I based this analysis on 7 key features (Read more above), but none of these applications met all the criteria. This then became my opportunity for the solution.

USER INTERVIEWS

In order to uncover the underlying problems and user needs before designing our application, we conducted interviews with two individuals to gather insights. 

Click below to view our Interview Protocol/Guide!

AFFINITY DIAGRAMMING

To aid us in synthesizing the data we gathered from our interviews, we created an affinity diagram to pull key themes, insights, and pain points. Furthermore, added new features in response to our user feedback.

*hover*

Interviewee

Travel Experience

Themes + Pain points

Interviewee 1

student with some travel experience and hearing impairment

Theme:  The need for easy ways to research and prepare financially for a trip. Stressed the importance of Bluetooth compatibility and closed captions to accommodate hearing needs.

Interviewee 2

has extensive travel experience spanning 19 countries

Theme: the necessity of managing various tools effectively when planning a trip and understanding diverse needs within a group.

High-lvl:  Steered our focus towards two critical elements of group travel: robust organization and thoughtful planning

Features + Insights

Original Features | New Features

Bluetooth Compatibility & Captions: One interviewee with a hearing impairment stressed the importance of Bluetooth compatibility and closed captions for inclusivity.

 

Additional Accessibility Features: We plan to include options for color-blind individuals, as well as light and dark mode settings.

 

Destination Information Page: Interviewees showed interest in having accessible destination-specific details, such as local customs, transport practices, popular activities, and currency details.

 

Collaborative Calendar & Notes: To address communication issues within travel groups, we plan to incorporate shared calendars and notes for effective coordination of group or individual activities.

 

Group Chat: A communication portal was suggested by interviewees to locate specific texts easily and maintain active group communication.

 

Responsibility Registry: A registry feature will be introduced where members can assign responsibilities for trip-specific tasks, aiding in role organization within the group.

 

Notifications: Time-bound notifications for trip updates, reminders, and relevant information about the destination were identified as essential features.

 

Payment Reminders: A reminder system for payments will help prevent financial issues and facilitate accountability among group members.

 

Financial Tracking & Card Scanner: Features to track expenses, keep records of payments, and a card scanner for swift payment information input were seen as crucial for smooth financial management during the trip.

tripify banner (70 × 36 in).png

HOW MIGHT WE STATEMENT

How might we...

streamline communication, organization, and information for members of a group during group travel and make their travel planning experience more efficient?

PERSONAS

*hover*

CHALLENGES/SETBACKS

Accessibilty

  1. User Interface Implementation

Design Options

  1. Website

  2. Shared Online Spreadsheet

  3. Mobile App

After evaluating the pros and cons of these options, we concluded that an app was the best solution. Reasoning/Considerations Website - Considered because of the potential for comprehensive features. - Discarded due to limitations in flexibility, accessibility, and difficulties with real-time notifications. Shared Online Spreadsheet - Considered for its accessibility and sharing capabilities. - Discarded because of its lack of real-time communication, itinerary tracking, and reminder functionality. Mobile Application - Chosen because it provides real-time updates, reminders, notifications, and advanced features like chat, shared calendars, and budgeting tools. - Further selected for its potential to be inclusive and accessible for users with disabilities, and its overall ability to streamline the travel planning process effectively.

Ideation & Design

STORYBOARDING

*hover*

SKETCHING

​Based on the storyboard, we had an idea of what we wanted the product to look like and the features it will have. 

Wireframe Part I
Wireframe Part II

WIREFRAMING

Click below to view our lo-fi prototype!

TESTING & ITERATION

Method: The Think Aloud Method

Format: Virtual via Zoom​

Click below to view our Full Usability Testing Guide!

FINDINGS/INSIGHTS SUMMARY

1. Participant A

Undergraduate college student with a hearing disability. Has experience with group travel. Provided valuable feedback on the accessibility settings and specific page details of the Tripify app. Interviewee A - Navigated sign-in, trip creation, and traveler addition with ease. - Struggled to locate shared notepad, registry features, and captions/settings for video/audio notes. - Couldn't add a table in notes. - Successfully transitioned between app themes but had issues altering trip duration. Suggested Improvements: - Introduce expense tracking and budget setting features. - Include weather updates, language and cultural insights, and currency auto-converter. - Enhance accessibility for captions and settings of video/audio notes. - Implement invitation links for app sharing and popular destination videos. - Add hover text for bottom bar icons to assist with navigation.

2. Participant B

Senior undergraduate student with local and international travel experience. Interviewee B - Successful sign-in, but struggled to find the "plus" button for trip creation. - Could add a table in shared notepad and an item to registry without issues. - Suggested distinguishing personal vs. group expenses through color coding or pop-ups. - Suggested reorganization of information hierarchy in the country info sheet. - Found difficulty in finding captions for video/audio notes. - Failed to add a table for personal notes. - Effortlessly managed expense addition, cost-splitting, and theme switches. - Experienced confusion with trip duration setting. Suggested Improvements: - Enhance visibility and accessibility of the "plus" button. - Implement a clear distinction between personal and group expenses. - Revise information hierarchy on country info sheets for better clarity. - Make captions for video/audio notes more intuitive. - Improve personal note-taking functionalities. - Refine navigation and setting controls for trip duration.

ROUND 2 FEEDBACK & ITERATION

Feedback from UX/UI Design class, professor, and teaching assistant (TA)

Changes

  1. Registry → Colored profile pictures to signify changes; make action tasks/information display more intuitive (i.e. incomplete (action) vs complete (no action needed))

  2. Communication → ineffective, confusing naming/information architecture; calendar → redundant; remove from communication portal

  3. Bottom Navigation Bar → remove naming labels

 

Additions

  1. Sign-up page → name, email, email confirmation

  2. Calendar → Drop-down menu for filtering/choosing view


Design/Aesthetics

  1. Calendar → padding, space it out and make it easier to view

  2. Communication → Excessive white space

  3. Registry → Avoid greying out every other line

  4. Info Page → Improve consistency

CHALLENGE

User Testing feedback and Professional feedback conflict:

Interviewee A: Adding hover page words for the bottom bar icons can help users understand each app section.
Professional Feedback: Bottom Navigation Bar → remove naming labels

My Solution: (given time) → A/B Testing

HEURISTIC EVALUATION

I critiqued and evaluated one of our competitors, Wanderlog, using the 10 Usability Heuristics and identified ways that the app could be improved in 3 of the heuristics.

Wanderlog- Travel Planner has a wide array of features aimed at streamlining the travel planning process. However, the number of features can be overwhelming for users.

Aesthetic and Minimalist Design. The User Account Page and the Trips Page are cluttered with buttons, options, and recommendations, lacking a clear visual hierarchy or organization. This could be improved by reducing clutter, combining similar categories, and removing redundant sections and icons.

 

Consistency and Standards. The application lacks consistency, with tabs using a mixture of word labels and icons. The "Share" function also varies across the application. Standardizing these elements and organizing the page to align with user expectations would improve user experience.

 

Recognition rather than Recall. The current design requires users to remember the location and functionality of each section, which can be confusing. The app could be redesigned to be more intuitive, positioning functions in familiar spaces similar to popular applications, and better utilizing the bottom navigation bar.

After my critique, I redesigned 1 page Wanderlog in accordance of heuristics.

  1. The Home button was relocated to the center bottom navigation bar to improve consistency, and to ensure it is always visible, even on the trips page.

  2. The photo icon was removed. A triple horizontal bar was added to represent settings or more options, which include photo editing, trip settings, and accessibility modes.

  3. The hero section was simplified by removing the profile page, which was relocated to the bottom navigation bar. The option to share the trip was moved under the three-dotted icon, removing redundancy.

  4. The tabs bar was decluttered by removing "Itinerary", "Explore", the expense icon, and the three unaligned horizontal bar icon. These functions were integrated into the bottom navigation bar as “Maps, Bookings, Home, Expenses, and Profile”. A new tab, “Planning”, was introduced to centralize the app's main function.

  5. The progress bar was retained, but sliders with lengthy descriptions were removed and their functions reallocated to relevant tabs or pages to reduce clutter and improve navigation.

  6. The “Reservations and Attachments” sections were removed. Reservations were moved under bookings and attachments under “Notes”.

  7. "Notes", "Lists", and "Attachments" were combined into one section under “Notes” for better organization. The "Places to Visit" section was reformatted for readability and clarity.

  8.  Maps was moved to the bottom navigation bar and the redundant plus icon was removed.

tripify banner (70 × 36 in).png

FINAL PROTOTYPE

Following our individual heuristic evaluations, my team and I came together to discuss and identify usability best practices, recognize potential pitfalls, and determine areas for improvement to ensure our hi-fi design is both user-friendly and competitive. 

Click below to interact with our hi-fi prototype!

Future Steps

WITH MORE TIME:

  • Careful consideration to style guide

  • Ethical considerations

  • Advanced Settings: Language accessibility options/Notification settings

  • Additional Screen: Explore integrating similar to “Find my friend” for groups

  • Quick and Secure Login: Two-step verification/face-id identification/allow notifications /allow location pop-ups

  • More user interviews/feedback and continual iteration (at least 6-8 diverse participants)

  • More detailed report with all Usability Heuristics evaluated/critiqued

  • Explore different methods of testing such as a/b testing and card sorting

REFLECTION/HIGH-LEVEL LEARNING OUTCOMES

  • Learn and apply foundational design knowledge, methods, and skills to create effective and compelling UX

  • Engage in and respond to constructive design critiques

  • Communicate design concepts clearly and compellingly in different phases of the UX design cycle

  • Learn how to work as a team effectively
     


For more work inquiries or coffee chat,  please email me at nanitang89@gmail.com ☕️✨
Thank you for reading! 🧠

bottom of page