Problem, Solution, Impact
Problem: Current travel apps do not consider that travellers want to be able to see all aspects of their planning and booking for their travels in one spot.
Solution: The solution is to offer travelers a way to keep all of their travel information organized and open for those involved in the planning process, all in one app.
Impact: After redesigning my high fidelity prototype, I was able to save my user time by decreasing the amount of time it took for them to add a booking/reservation from 16 seconds on the original app down to 9 seconds on the new high fidelity prototype.
Research
I began my project trying to understand the pain points of how people plan to travel in the future, post-pandemic. I conducted user tests in order to understand user pain points. From there, I developed a user persona that draws from the affinity diagram and empathy map that I created. I began my study with an online survey and five user interviews:
-
Online Survey
-
Through Google Form
-
Posted to Facebook Story, Instagram Story, Snapchat Story, & UX/UI Bootcamp general slack channel
-
16 responses in 24 hours
-
-
User Interviews
-
5 user interviews with candidates that corresponds to the proto-persona
-
Convenience sample, not random
-
12 open-ended questions & a few follow-up questions.
-
From here I combined all of my feedback into the affinity diagram below.
I was able to utilize the information from the affinity diagram to create an empathy map to understand how to empathize with my interviewees and soon with my persona. Empathy Map shown to the right >>
Persona
I created Rebecca Chang, my user persona. Rebecca was similar to my proto persona but has all the goals, wants, and pain points I learned from my user interviews and survey feedback. Rebecca wants to be able to plan her vacations with a cost breakdown of the overall budget that adjusts to her spending on the trip. She has a goal to have all of her bookings in one place with a cost breakdown so she can show all of the people going on the trip her plans as they get made.
User Insight & Problem Statement
Rebecca struggles with managing confirmations and budget while traveling to Orlando, FL, mainly due to the challenges of keeping track of bookings for the entire travel party. During the survey, it was evident that many individuals find coordinating with their travel companions and staying updated on confirmations and reservations the most stressful aspect of trip planning. They express a strong desire to have all trip-related information conveniently accessible in one centralized platform.
Based on this discovery, it becomes clear that people need assistance in efficiently organizing their travel plans (solo and group) and confirmations in a single space. To address this pain point, I believe developing an app that simplifies the process of tracking and organizing confirmations, reservations, transportation, budget, and other pertinent details while planning their travel could provide valuable support and alleviate their stress.
Definition & Ideation
Once I gathered all the research and defined the problem, I brainstormed the features that would be most beneficial to the users. I then translated this user experience emotionally through the creation of a user journey map and storyboard.
I brainstormed potential features for PlanIt using an "I like, I wish, What if" chart, dot voted on the best ideas, and narrowed down to a system that keeps holding of bookings/reservations, budget, and a chat feature to plan with other tripgoers.
User Journey Map
My journey map shows Rebecca's emotional ups and downs when it comes to planning her next vacation. She begins overwhelmed and goes through a rollercoaster of emotions that begins to make her trip planning easier the moment she opens the PlanIt app.
.png)
.png)
Storyboard
I then created a storyboard featuring Rebecca. This storyboard gives a better visual to Rebecca's journey while creating and planning her vacation with PlanIt.
I went through and utilized my dot voting and created a Feature Prioritization Matrix and Value Proposition Canvas to figure out what should be prioritized. I also shared with peers to get their feedback on my process. That can be shown here.
Feature Prioritization Matrix
Competitor Analysis
While conducting research on our competition in the travel mobile app market, I identified several direct competitors who possess unique strengths. My competitors included apps like Wanderlog and Pluto. Both fierce competitors. Some competitors excelled in features like scanning and searching travel materials, aiding users in learning about different destinations and setting reminders for important travel tasks. However, all of these competitors face challenges related to technical and visual aspects. On the other hand, the indirect competitors mainly consist of generic travel search platforms, lacking the specific focus on comprehensive travel management that our app aims to provide.
Wireframing & Prototyping
After finalizing the user flow, I transitioned to wireframe sketches where I outlined the key features Rebecca (my user persona) would need using the optimized user flow.
I then drew sketches of each wireframe page I would need from my user flow. Below are the sketches I made for the wireframes.
Low Fidelity Wireframes
Moving from wireframe sketches to low-fidelity sketches was a crucial step in the design process. These sketches helped me figure out the layout, composition, and what I want to stand out the most for the PlanIt app. Once I was done with the low-fidelity sketches, I was able to move on to more detailed prototypes and high-fidelity mockups. It's all about being flexible and iterating on the design to make sure it meets both the users' needs and the aesthetic goals I had set for the app. This flexibility and iterating comes up later after the initial high fidelity prototype.
Initial High Fidelity Wireframes
With this being my first project, I had not learned how to come up with a style guide and was not aware of the crucial UI design elements I am aware of now. I brought color and icons into myhigh fidelity wireframes to give the app more personality from its low fidelity roots.
.png)
Usability Tests
I created a usability testing plan consisting of four testing tasks to get through Rebecca's flow on the Plan It mobile app. I completed four usability tests producing lots of feedback.
The usability tests were done through zoom and were a convenience sample. The main goals were to find out how the different features were used by users and if they understood how to use or access them.
​
The users had these issues during the tests:
-
Users had trouble understanding wording of different things
-
Users got confused on what was something that was an existing booking/contact
-
Users got confused from page to page because of lack of continuity
I was then able to put together my usability testing notes and created a 2x2 matrix to find the priority of what needed to be iterated first.
End of Project Reflections... Or so I thought.
After completing my project, I couldn't shake the feeling that it wasn't the best version I could create. Something about it just didn't feel right. So, I took a step back and decided to go back to the drawing board and iterate on my design. I knew there was room for improvement, and I was determined to make it happen. With a fresh perspective, I dove back into the project, carefully analyzing the feedback I had received and identifying areas that needed enhancement. It was a challenging process, but I embraced it wholeheartedly. By iterating and making improvements, I was able to transform my project into something that truly reflected my vision and exceeded my expectations. It was a valuable lesson in the importance of pushing myself and never settling for anything less than my best work.
​
So back to the low fidelity wireframes I went. I created a new, more visually appealing version of the PlanIt mobile app that aligned more with what I felt my user, Rebecca, wanted and needed.​
Final High Fidelity Wireframes
During the design process of PlanIt, I realized that the color palette I initially chose didn't quite capture the essence of the theme. Determined to find a better fit, I embarked on a quest to discover a color scheme that would truly resonate with the concept of space exploration and futuristic travel. After extensive research and experimentation, I stumbled upon a new palette that perfectly encapsulated the cosmic atmosphere and futuristic vibes I was aiming for. The revamped colors brought a fresh energy to the project, elevating the visual impact and immersing users in the captivating world of the PlanIt mobile app.
Below are the high fidelity wireframes I came up with after 5 A/B testings between the prior high fidelity design and this one. Four out of the five tests preferred this version more and felt it kept their attention better.
Reflection
Lessons Learned
In conclusion, I have reached a profound realization that shortcuts in the pursuit of progress ultimately result in retracing steps and the importance of following the correct order for optimal outcomes. Upon reflection, I now appreciate the significant investment of time I made in meticulously crafting wireframe sketches. This upfront effort proved exceptionally beneficial when developing the digital wireframes, as my well-executed planning paid off splendidly. Furthermore, I have developed a newfound appreciation for the indispensable role of a seamless user flow in the design process.
Engaging in this journey has been an absolute pleasure, despite the considerable effort it demanded. The combination of challenges and excitement has left me feeling invigorated and inspired. I hold a genuine desire to witness the expansion of this mobile app, envisioning its integration with other applications as the final step towards realizing the comprehensive design vision for this travel-oriented mobile app.
In my upcoming plans, I will focus on key features to enhance the app. This includes developing a new iteration based on user feedback and usability tests. I also aim to integrate with popular calendaring tools like Calendly for seamless syncing of trip bookings to the user's phone calendar. Additionally, inspired by a successful competitor, I will implement email integration, allowing users to effortlessly sync their bookings with the app. These enhancements will streamline trip management and elevate the overall user experience.