Process
Research
Ideation
Reiterations
Designs
• Usability testing
• Key takeaways
• The Flow
•Adding Friends and Privacy
• Trip Overview
• Trip Summary
• Low Fidelity Wireframes
• High Fidelity Wireframes
• Visual Design
Initial Interface
Research
The initial project was a team effort created with team members that were new to the product design sphere. After the project was turned in, my teammate and I spotted a couple features that we could further improve on, spending more time and fully troubleshooting each screen. Through user testing, we came up with these conclusions about the initial product.
Key Takeaways:
1. The user flow needs to be altered. Our initial design didn't make it easy for users to return to the home page where all their trips were listed.
2. A more logical approach to adding friends. The initial screen allowed for any person to be searched up and become added as a friend that would collaborate with the user on their trip. There was no accepting or denying friend requests, making it less private and intimate of an application as we would like.
3. An initial screen of specific trip overviews would be beneficial to see specific details of each trip.
4. A more detailed trip summary would also be beneficial to the user, as they can see their past travel details and have a record of where they have traveled to and who they have traveled with.
Ideation
We re-wired the user flow, keeping in mind that we mainly want the user to be able to access each page easily.
.png)
Reiterations
Improvement 1: The Flow
Our initial design didn't make it easy for users to return to the home page where all their trips were listed. Back then, our main focus was making the app look simple and sleek. But, in the process, we ran into a concept called Tesler's Law.
We tried to make things so simple that we ended up making it harder for users to navigate. This realization led us to rethink the user flow and improve our design to strike a better balance between simplicity and user-friendliness.
Our Solution
A navigation bar.
After planning out the new user flow, we realized that this feature would allow users to flexibly move throughout the application from screen to screen. Compared to the old user flow were they had to keep clicking the back arrows to get to their desired page, the navigation bar allows for that in just one click.
Improvement 2: Adding Friends & Privacy
Initially, we didn't think much about user privacy. We thought that people could just join their nomad journey through sharing links. But what if the user's friends just wanted to take a look at the trip itinerary but couldn't join? In addition, that link could be shared through multiple people, where uninvited users could add themselves.
Our Solution
In response, we designed a new frame that allows users to be searched up and had the option to accept friend requests. The new design gives users a new level of privacy in their trips, making it safer and more intimate between friends and family. we re-oriented some of the iconography, allowing for less cognitive load on the user, where icons could just be used for global understanding and visual anchors to guide the user flow.
Improvement 3: Trip overviews
When it comes to trip planning, the sheer number of details to keep track of can make it all too easy for people to forget important aspects of their journey, particularly when organizing multiple trips concurrently. With the inclusion of features like trip checklists, collaborative tools, and event management, we've made it apparent that Miller's Law is a guiding principle in our interface.
Our Solution
The trip overview page is a screen that each user encounters when they first click into a trip which can be accessed before and after the trip, where fellow travelers, announcements and location sharing can be accessed. Through chunking, it becomes easier for the user to remember fellow collaborators and announcements. In addition, while on the trip, sharing locations would be easily accessible to friends.
Improvement 4: Trip Summary
Our initial trip summary feature included a view of trip collaborators and checklist tasks. We thought that the screen could be designed with more visuals and features but where would we incorporate that?
Our Solution
Incorporating icons and graphics into the expense tracking feature is an insightful decision for users. Aligning with the Dual Code Theory of Paivio, a theory that underscores the potency of using both visual and verbal codes to enhance information retention, introducing a new pie chart visualization provides users with a vivid representation of how their expenses were distributed throughout the trip, making it even easier to grasp and remember the financial breakdown.
Designs
Our initial trip summary feature included a view of trip collaborators and checklist tasks. We thought that the screen could be designed with more visuals and features but where would we incorporate that?
Low Fidelity Wireframes
High Fidelity Wireframes
Visual Design
We also wanted to change the visual colors because we wanted the application to come off as relaxing.
Understanding how colors can affect user mood, we opted for pastel colors instead of the initial orange to blue gradient.
What I Learned
Iterations and enhancements are crucial! While revisiting previous work can feel daunting, the more we reflect on areas for improvement, the greater our potential for learning and honing our skills. In the pursuit of progress, the process of revisiting and refining our work is not just a personal endeavor but a collaborative one. Effective teamwork amplifies our ability to identify weaknesses and opportunities for improvement, fostering an environment where we can collectively learn and enhance our skill sets.
.gif)
.gif)
.gif)
.gif)
.gif)
.gif)
.png){kind=small}
.png){kind=small}
