Tripr
Using new technologies to build a completely new user experience
OVERVIEW
Tripr is an online platform present in Portugal and Brasil, it helps tour operators to sell experiences and tours.
On Tripr you can find some of the best local experiences to do in the country, some of them you cannot find anywhere else.
The problem is that the tour operators are too busy to upload their experiences on an external website.
CHALLENGE
What: save tour operators' time automating most of their tasks
How: creating new user experiences that integrate new technologies such as API and AI to import tours on Tripr
SOLUTION
-
Connect Facebook profile with Tripr at the very first stage of the subscription and automatically import profile, page and groups information from the social network.
-
Display in the easiest way possible the information e and allow the users to quickly verify and upload the experiences.
Time
Two weeks
Roles
Solo project
UX designer
UI designer
Tools
Figma, Figjam, Pen & paper, Trello
How Might We create a new user experience that integrates new technologies and features, helping agencies to automate most of their tasks requiring the minimum setup?
Research
The main purposes were to understand what Tripr had already developed for this feature, so I could conduct the User Research matching this with the goal they want to achieve.
Get to know the technology behind the feature and how this works, to provide the best user experience to our users.
Find the best practices that our competitors use and analyze patterns in the onboarding process.
Surveys
Interviews
Developers
Tour operators
Affinity diagram
& Statements
Maket research &
Business comparison
Interviews & Survey
To better understand the problem I decided to separate my research into 3 steps:
1 Stakeholder Interview
From this first stage, I understood that the Team at Tripr was working to pull information from Facebook, and using API and AI, automatically import it to Tripr.
Based on this we had to understand how to visually show this process to our users.
2 Developers Interview
By interviewing 3 developers I learned more about API, how they are used and why, I found out about the new world of AI and how it can be implemented. I had more clear the process, so it was time to move to the users' side.
3 Users Interviews and Surveys
Find target users to interview has been tough because the majority are based in Brasil, speak only Portuguese and they didn't reply to any of my messages or emails.
I decided then to switch from interviews to a survey, with which I got 10 answers, so for the users, it was easier to answer and I have been able to reach more people in different countries.
Small agencies are very busy and don't have time to publish their tours online.
Bacause it takes too much time to set up and sometimes it doesn't worth the price.
Business Comparison
To overcome the problem of finding users, I conducted market research between many competitors to understand how the tour operators interact with those websites, which forms they have to fill out and what services they are offered.
Statements
BUSINESS
We want to help small tour operators easily set up their profiles and tours on our platform with the help of new technology.
USERS
We need a third party website easy to set up, that helps us to sell more with the minimum effort and still manage the information we want to insert.
Define
To connect the dots between my target users, the insights I gathered and the goal I want to achieve, I created a User Persona and a User Story.
This also helped me to visually show my stakeholder how I was matching the business need with the users' needs and expectations.
AS A
small and busy tour operator
I WANT
to easily import on Tripr the tours and experiences I posted on Facebook
SO THAT
I can keep bringing clients on tour and automatically sell my experiences
Design
Before I started designing I prioritise the "must-have" features to understand what was essential to develop in this first sprint.
To prioritize I used the MoSCoW method, so I could explain my decisions to the stakeholder.
Fitt's Law
Based on the users' needs I applied Fitt's law and designed larger buttons, making it easier to reach the target and complete the actions in less time. Moreover, I designed the icons and kept the font a bit bigger to simplify the user interaction.
Law of Proximity
In the "edit" screens, I used the law of Proximity to separate the different sections on the same page. This allowed me to create a shorter process, including more information on a single page.
Tripr features
SUBSCRIPTION
The very first and key step was to allow the users to subscribe with Facebook so that Tripr can automatically pull the info of their profile and tours from there.
IMPORT
In a few steps, the users need to understand how to set all the options to import their tours from Facebook.
REVIEW INFO
Throughout the process the users are able to review all the imported information and if necessary review it, either at the beginning or just before creating their tour on Tripr.
Branding
For the new feature I decided to maintain the main colours to keep consistency with the existing website and accordingly with the stakeholder change a bit the secondary blue to better match it.
I also kept the existing fonts because they have good readability either on mobile and desktop.
Based on the users' habits, they are always busy and on the go, I decided to use the font a bit bigger for some fields or actions. Also I decided to add icons and text in specific parts of the app to make it more clear and user friendly.
Mockups & Iterations
The low-fidelity version has been important to test mainly the flow and, in fact, I found out that I needed to add one more screen to make the process clearer.
From the mid-fidelity to the hi-fidelity I still made some changes and added a few missing screens, but I made some major improvements testing and iterating the hi-fidelity version.
ITERATION 1
Testing the low-fi, my users told me that they post on a lot of Facebook groups and it would be easier if they could select from which pages to import the posts.
So I designed a screen to allow them to just select the pages and groups from which to import the info.
Here are the low and mid-fi versions.
ITERATION 2
In the mid-fi, the users couldn't easily tell which was the page or the groups.
They felt confused and also if there a many groups it could be difficult to filter.
I then decided to separate more the 2 categories and add a search field to create a better user experience and reduce the cognitive load.
ITERATION 3
Details matter and this change is something that seems a small detail that made a huge difference.
I noticed that most of my users felt lost in the editing process because they couldn't find the progress bar, so I decided to move it to the bottom of the picture and make it more consistent with the design.
ITERATION 4
In the first version of the tour info page, I just inserted one starting time and point and after discussing that with my stakeholder I noticed that I needed to add more information.
I then redesigned the page and change the layout, so it could work better with the content we needed to display.
Considerations
To get the most valuable results for this project we should be able to test it with more users, so we can verify if the labels and text we used are clear.
Since most of the real users don't have spare time to test the project, we should consider launching it and offer a free subscription to get insights.
Prototyping
Final Mockups
Hi-fidelity prototype
You can navigate, and test the prototype by yourself. Interact to see how it works.
Conclusion
Learnings
Being focused and aligned with my stakeholder throughout the process allowed me to work with the business goal in mind and easily adapt it to the users' needs.
TECHNOLOGY
Thanks to this project I learned about new technologies like APIs and AI. I had the chance to interview experts in the field and find out that I like working with tech products.
USERS
Next Steps
After creating the second version of the hi-fidelity and test I noticed that:
DIRECT USERS
I need to test the page contents with more direct users and verify if the titles and information are appropriate.
NEW FEATURE
I need to implement a feature that allows tour operators to schedule directly on Tripr the tour to be posted on Facebook or Instagram.
I learned that being flexible is important, how to adapt the research part based on how I can find my users and where I can find them.
