Introduction
As a capstone project for my UX bootcamp, I was tasked with designing a responsive website. Since I love to travel, I decided to create a website that helps in planning trips -- from brainstorming ideas, booking plans, to creating an itinerary to keep all of your plans together.
Due to the timeline of the project, I chose 2 main features to focus on:
• "Find a Destination" feature
• Save ideas to a trip and build an itinerary
Timeline
6 weeks at 20 hours a week
My role
End-to-end UX researcher and UX/UI designer
Research
I started the design process by conducting research to decide what features would be helpful for users to have in order to plan their trips in the most efficient way.
Interviews to understand user needs
I asked people questions about how they go about planning their trips to get a better understanding of their thought processes and what they could benefit from.
From the interviews, I was able to understand:
• Factors that are important when choosing a destination
• How people go about planning their trips
• Difficulties people have when planning trips
• How people keep track of their travel plans once they've made them
Competitive analysis to see implemented solutions with similar goals
Once I knew what my users could benefit from, I started thinking about specific ways I could meet their needs. I looked at existing travel websites to see what they offer and how they lay everything out. This gave me an idea of what I wanted to include in my website, and how I could address weaknesses of competitors in my design.
Define
Persona to relate to users and better understand their needs
I started the define stage by creating a persona to help me visualize who would be using my website, so that everything I designed was made with this person in mind to help meet their needs.
Project goals to stay on track
Once I had the user goals laid out from my persona, I defined the goals for both the users and the business to ensure that the website design would be useful for everyone involved.
Task flow to define steps to complete main task
After setting the goals for the website, I started thinking about the specifics of what the website's main functions would include. Based on my research, I decided to design two main tasks: finding a destination and creating an itinerary. I created these task flows to explain the main actions a user would take to reach these end goals.
User flow to visualize user paths
I then used the task flows as a starting point to create user flows displaying the different paths a user can take to reach the end goals. This helped me understand the user's thought process while using the website, and understand the paths they would be taking to complete a task. This allowed me to ensure that the paths I would be designing made sense.
Design
Wireframes to lay out design
I started the design process by writing down what to include on each page, and sketching wireframes on paper. I designed for desktop first and then moved to mobile. After sketching my initial ideas, I started putting my wireframes together in Figma.
Main challenges:
• Deciding how I wanted the "find a destination" criteria to interact, and how results are selected based on information input by user
• Designing layout for itinerary -- I spent a lot of time thinking about how to add items, edit existing items, and display information for each item
I overcame these challenges by trying different solutions and thinking critically about each of the pieces that were interacting with each other, while keeping the end goal in mind.
Desktop:
iPhone:
Test - Round 1
Before moving on in the design process, I conducted a round of usability testing with my wireframes using my Figma prototype. I decided to test it before designing the UI in case there would be any major changes to make. Below are the difficulties users had, and the corresponding solutions I came up with.
Branding
Once I had my screens laid out with the wireframes, it was time to create a brand for my website. I wanted to convey the sense of adventure that many travelers have.
Name: I decided the name would be Wander Not, hinting at the planning functions provided so users do not have to wander.
-
Logo: I chose a font that represents the idea of being free-spirited yet a planner, paired with a simplistic compass for a modern feel.
-
Colors: I went with a bold orange as the main color to bring out the feeling of adventure.
-
Typography: I wanted a modern sans-serif font with a slightly playful feel, which I think Heebo conveys.
Design
User interface design for increased usability and visual appeal
After creating the branding, I applied it to my wireframes to build the user interface.
Desktop:
iPhone:
Prototype
Below are my Figma prototypes with the final UI. Click on the white bar at the bottom to open in a new tab if the sizing needs to be adjusted.
Test - Round 2
Usability testing to assess previous changes along with UI
I wanted to assess whether or not the changes I made after the first round of usability testing were effective, and I also wanted to see if I would get different insights now that the UI was done.
-
There were no issues with the first task of finding a destination, but some testers had difficulties with adding items to the itinerary. To address this, I decided to change the process of adding to the itinerary and rearranging items on it. I eliminated the edit itinerary screen for desktop, distributing the functions on this screen elsewhere on the website. I made the same changes on mobile, but kept a simplified version of the edit screen for rearranging items.
Desktop changes:
Mobile changes:
Conclusion
Next Steps
If I were to continue this project, I would start by designing the rest of the website since the provided timeline did not allow for this. After that, I would like to conduct more in-depth research to ensure that the website meets user needs as well as possible. It would also be interesting to interview a group of people planning a trip together to see how helpful Wander Not would be in planning their trip.
Challenges
I had complete creative control over this project, which was fun and challenging at the same time. I enjoyed having endless possibilities and getting to create my own branding for the site. However, with so many options it was difficult to pick a single focus. I was able to think of a lot of different things I wanted to include, but I was not able to execute them all given the timeline. For example, the navigation menu on the itinerary shows rankings, preferences, and reservations but I was not able to actually design the pages for these features. As Don Norman said, "The hardest part of design... is keeping features out."
-
In addition to having many options for the focus of the website and features to include, there were also many ways I could go about designing the details for each individual feature, such as the itinerary. I learned that it's best to just start designing and exploring options instead of getting caught up in the details right away.
Outcome
In the end I was able to overcome the challenges, and I enjoyed getting to design a website that aligns with my passion for travel. I'm glad I was able to design a website that addresses some of the weaknesses in existing travel sites and offers something new.
