TRIPMATE
UI, UX Design
brief
Tripmate connects travelers with local people who do more than serve as guides, they provide a sense of community and immerses travelers into the local vibe. They offer an authentic experience tapping into the local culture and what defines Panama, it's people. After working with a team of UX researchers Tripmate is considering a new look to help gain traction and reposition itself online.
challenge
Working within a three week timeframe my team of three UI designers was tasked with presenting a responsive redesign of the user interface for the clients website. I contributed significantly to our research process and my final designs were embraced by the client and are currently being implemented into their new platform.
wireframes
Prior to being on-boarded the client previously worked with a research team to provide us with the following annotated wireframes below.
kickoff
After several conversations with the previous research team and a thorough review of their material I was ready to meet with the client to discuss their vision. Based in Panama, English was not the client’s first language and it was important to avoid any miscommunication and clearly define goals and expectations. To jumpstart the process we began with a visual gut check to gauge general likes and dislikes. Next we ran a brand voice exercise to encourage the client to define core values representative of their brand in addition to their value proposition.
digging deeper
After speaking with the client and conducting some domain research we explored the visual identity of Tripmate’s direct and indirect competitors. The client was heavily influenced by AirBNB and their use of transportive imagery to immerse the user into the moment. They also liked the simple and clean look of Triptable and Meetrip and the use of photo heavy cards to display trips. The people-focused imagery of Withlocals was also inline with the sense of community and connection to locals that Tripmate offers its users.
what the users say
After gaining an understanding of the clients vision and product landscape we turned our attention to how users currently perceive Tripmate and what was working and not working for their website. After conducting user interviews it was clear that there were several areas where we could improve upon the user experience.
KEY TAKEAWAYS
-
User feel lost on their current homepage with no mention of Panama or destination locations.
-
Tripmate’s service offerings are unclear to users and the second call to action “be a mate” causes confusion and anxiety. Some users perceive mate as companion or significant other.
-
Inconsistent use of language switching between Spanish and English. It appears that website copy was not written by someone whose native language was english.
-
User’s eventually expressed skepticism over taking a trip in a foreign country with a local who was a total stranger to them and their safety was a concern.
design principles
Taking both the research findings from our initial user test and the client's vision, we outlined the following principles to use as a road map throughout the design process.
Inspiring
Use transportive imagery to immerse the user in the destinations environment to encourage a visit.
Trustworthy
Convey credibility, safety, and reliability through details and consistency.
Fresh
Simplify and update design to feel new, fun and engaging.
look and feel
Staying within Tripmate branding guidelines I created three separate styles using our established design principles. One style emphasized people and community, another focused on the destination itself while the last embodied the idea of exploration and adventure.
The client preferred the style of cards used to showcase individual trips and iconography from the destination themed tile. However, they liked the layout and use of whitespace in the people focused theme.
improving the experience
Using the layout from the people theme I incorporated the trip cards and iconography mentioned above to create key screen mockups. I then conducted another round of user test implementing the think aloud protocol and iterated on the following screens using their feedback.
HOMEPAGE
Staying true to the provided wireframes I updated the copy for the main headline, but I isolated and increased the font for "Explore Panama" so users clearly understood that Tripmate catered to local experiences in this region. By removing the "Become a Mate" button from the hero image the call to action was now clear, but my initial hero image from the style tile was viewed as cold and dark. I replaced the hero image to convey an experience more inline with the tropical environment typically associated with Panama.
Hero image from first homepage mock up.
New image from revised homepage mock up.
SEARCH PAGE
To emphasize trip imagery I looked at left and right placement of trip results in relation to the search filters. I conducted a survey with an A/B test with follow up questions for both options. My results were split for the left and right placement of filters, but again I found users first looked to the left expecting to see what they considered most important. Additionally users expressed that images of available trips were top priority, reinforcing the decision to place search results to the left of the filters.
To improve glanceability I added a hover state to all trip cards displaying trip reviews and details. This allows users to quickly scan all trips without having to click on a trip and then back out to continue their search. By placing emphasis on the trip imagery and improving the glanceability, I hope to gain traction and improve conversion rates for trips booked.
TRIP DETAILS PAGE
Initial user testing revealed users felt overwhelmed by the information presented to them. The wireframes provided to us jammed all the trip details into a separate section to the right along with an option to book a tour. To reduce anxiety and cognitive overload I removed duplicated information as several detail items were also listed under the about trip section. Using proximity I grouped relevant details together and applied hierarchy to have the most important information listed first. I also removed user reviews from the right side of the page and created its own section within the main content of the page as users noted reviews as a high priority.
After several rounds of iterations based on user testing and client feedback I was able to bring it all together and presented the following key screens and inVision prototypes to the client.
bringing it all together
Mobile
next steps
The client was pleased with my final presentation and is in the process of working with their developers to implement my designs. To assist in the rollout of the new platform I created a style guide to aid the developers in staying on brand with a consistent look and feel while adhering to the established design principles.
final thoughts
This project was a turning point of professional growth seeing significant leaps in my productivity and proficiency of technical skills and as a UX/UI designer. I was able to refine and implement my own process based on what worked and didn’t work with previous projects.
I focused on creating an MVP for user testing and avoided trying to perfect my designs before having another set of eyes on them for the first time. I was able to expedite the design process and avoid wasting time by quickly identifying what didn’t work for users and moving forward with what did.