Currently, many travelers rely on tools like Docs and Excel to create their travel plans – tools that are not built for these purposes. Truffl is a Bay Area-based startup, reimagining the travel-planning experience with an easy-to-use mobile app.
When I joined Truffl, I was challenged to lead the re-design of the app's UI. From pre-launch, to the marketing website, to version 2.0, I have led all these design efforts as the sole designer, in collaboration with the engineering and marketing teams.
During this process, I created various iterations of wireframes and prototypes; conducted survey-based and interview-based user research; and curated a design system that brings the Truffl brand to the forefront and ties together the overall app experience.
Truffl was originally built without a design system or design direction in mind. When I joined the team, I worked directly with the lead engineer and CEO to improve the user experience on mobile. My goals were to reduce friction, while making the experience more visually-appealing and delightful to users.
We completely audited and improved the experience, from creating an intuitive dashboard, to revamping the creation and editing of trips, to the curation of an actual onboarding experience.
Truffl's three intended uses are: planning, inspiring, and collaborating.
As such, the original intent for Truffl's home page was to provide inspiration. We envisioned this inspiration in the form of a feed of recommended trips curated for each user, including trips created by the people they follow and trips related to their travel interests.
There were many constraints for developing such a curated feed. First of all, it was clear that adding social features was unrealistic given the engineering timeframe. Also, because the app was relatively new at this stage, there weren't enough trips to be recommended – instead, completely random (and sometimes unfinished) trips were displayed. Finally, there was the issue that the app's earlier versions didn't even indicate that this was a discovery page. Upon realizing these issues, I decided to refocus our efforts on highlighting Truffl's existing features, which fall under planning.
Thankfully, according to our user research, we know that users are not viewing other’s trips as much as they are looking for, viewing, and editing their own. Thus, we switched the focus from helping users find inspiration in-app, to easily navigating one’s own trips and recently-viewed trips.
The old layout works for quickly discovering others' trips, but fails to give access to what users actually need to view.
The new dashboard provides easier access to one's trips, while giving users a quick way to explore new trips.
Initially, users could only access their own trips from their profile.
However, because of the potentially sensitive nature of trip planning, we had to create more robust privacy settings for individual trips, leading us to rethink this profile setup. We established that it ultimately doesn't make sense for users to access trips from their profile screen. Profiles are inherently social, so a user's profile should reflect what others are seeing – and given the amount of privacy settings on trips, a user profile may look drastically different to the user, than it does to others.
For example, if Anthony were to make a private trip, and make his friend Benedict a collaborator – whose profile would it show up on? Just Anthony's, or Benedict's as well? Why would Anthony only be able to access it from his own profile, but Benedict would not see it on Anthony's profile? These questions were clear red flags, and we addressed them by removing the need to ask them.
In short, it was moved and replaced.
Considering its redundancy and Truffl's lack of social features, we determined that the profile page was not needed in app's main navigation. We tucked it away in a side menu, and replaced it with the search page. With the search page now at the forefront, this opens up the potential for making the search page also an explore page, similar to Instagram's.
Trips are our bread and butter; the trip screens are where the magic happens. We spent a lot of time polishing these screens to ensure ease of use and to provide visually-appealing ways for people to present their trips. We paid attention to the little things – like micro-interactions – because we know those can make a big impact.
As a growing start-up, it's important to understand the experience of new users.
When I joined Truffl, there was no onboarding process. In fact, the closest thing Truffl had to introducing users to the platform was a plain sign-up page, followed by abruptly leaving users stranded on an unfamiliar tool and no incentive to take action.
Thus, I created a new onboarding flow. With this, my goals were to welcome users to the Truffl and encourage them to get started planning and creating their own content.
Users are first greeted by a welcome page, where the pictures are meant to reflect the excitement and possibilities in trips, eneticing new and current users alike. Before, the signup process was one long form; now, it's broken into 5 simple steps.
Onboarding then switches to a first-run experience, where new users are prompted to create their first trip. Specifically, Truffl suggests making a guide to somewhere the user knows – based on previous onboarding questions – so users have content that they can contribute to the Truffl community from the get-go!
I established a mobile design system to create consistency across the current iOS mobile app and set up for success on future platforms. This system also defines components across platforms, enabling the engineering team to work on mobile faster – even once my internship ends, and they no longer have a design lead.
As a disabled person, I also made it my mission to make changes to the system to make it accessible, including adjusting typography and UI colours. Despite this making the design system-making process take significantly longer, it was one I justified to my leader as being important to the future of Truffl and to creating an inclusive space on this new platform.
Cleaner trip interactions make it easier for users to create and edit trips.
While the new onboarding flow increased user setup time, and it also increased the likelihood that new users would come back to the app with a great first impression.
The new design system made it significantly easier to design and engineer going forward, and overall made the app feel more cohesively designed.
As the first and only designer at Truffl, I often had to self-start my initiatives. Although challenging, this really pushed me to learn a lot about product design principles on my own and get comfortable with self-management. I now feel much more comfortable applying the design principles that I learned on this project.
Despite being the sole designer, I still had the opportunity to work collaboratively with the lead engineer and marketing head on various initiatives.
This gave me a much broader yet deeper understanding of the product, which better informed my future decisions. I also learned how valuable it is to examine a product from the perspective of multiple domains.
When I started at Truffl, I had barely any experience in product design; since the beginning of my journey, I have learnt a lot, allowing me to reflect on my projects and critique my own work. If I could do the project over, I would have started it
If I had more time, I would have created a more robust tutorial for onboarding, as well as a welcome page that introduces Truffl more before creating an account. Additionally, I would have liked to spend more time on making Truffl accessible.
Overall, I'm extremely proud of my work at Truffl. Looking through all the Figma files, I can see how I have grown as a designer, and I am confident in the future of my career.
