Tripmate, a Panama based travel site, books adventurous trips lead by local people that is based on their favorite places and experiences around Panama. Tripmate wanted to boost more traffic and travelers to their site, thus they implemented a full User Experience exploration of their customer end and the trip hosts end.
As the UI team, we received all the UX deliverables from both sides of the website. The Trip mates themselves and how they would receive payment and the visitor’s side. Knowing we had only three weeks to dedicate to the interface, we decided to plan the UI for strictly the traveler side.
We rummaged through all the UX folders we were given, looking through the competitive analysis, investigating the competitors ourselves, and examining the annotated wireframes to see what the UX research found to be most vital to include on the individual pages.
TAKEAWAYS
• hero image would be critical and have to bring the viewer in immediately
• entice visitors to come to Panama by showing the best imagery of Panama
• header title tested by the UX team was “Explore Panama with Local People” something we felt was best to continue with
• communicate all the most important travel information to a traveler in the most concise, orderly, and aesthetically pleasing way
Our meetings with Tripmate were via Skype since our clients are based out of Panama. This ended up being one of our first challenges, trying to make sure we were communicating as thoroughly as possible through numerous technical issues. Luckily, during our kickoff meeting we were pleased to host one of the founders in person while also skyping the other founder in Panama from my computer. We were able to really talk out some ideas they valued and about other sites they look to for inspiration.
We conducted a 20 second gut check with them, a presentation with varying website designs where the viewer is given 20 seconds to communicate what first comes to mind when they see the designs. The most striking designs were ones with strong visual and treatment of its imagery. We also presented a list of adjectives and asked them to choose which represented their company best. Words like bold, adventurous, and energetic came to the forefront. All too familiar to interface designers, our client also mentioned their admiration for Airbnb’s look, feel, and message.
• beautiful, black background is refined, think about product
BRAND VOICE
• Adventurous
• Bold
• Energetic
• Inspiring
• Hip
• Fun
• love, want to go there, like temperature listing, imagery so important
KEY TAKEAWAYS
• Feel like older brother taking care of you
• Be trustworthy and credible
• Inspire travel
We further researched competitors visual styles to compare. We pulled sites that our client mentioned in our kickoff meeting and found sites through our own research to pull from. Our client mentioned not only Airbnb, but one of their main competitors Triptable, as well as sites they admire.
After synthesizing some aesthetic elements that were working and not working, we delved into our own style explorations for Tripmate's site. We created three style tiles each, pulling characteristics that would stick to the brand voice of adventurous, energetic, and fun.
Style Tile 1
• Adventurous and fresh light tone
• Use of white space
• Golden yellow use emanates comfort, relatability, joy
• Use of teal to provide serene, cool, refreshing resonance
Style Tile 2
• Sophisticated, structured, strong and classic aesthetic
• Image driven
• Dark tone illicit exotic tone and contrast with imagery
Style Tile 3
• Round warm friendly photos, draw viewer in
• Fresh, light, enjoyable mood
• Clean, white space, and use of timeless and classic gray
Each tile examined three different style explorations for Tripmate. In one style, I explored the dark UI. reminiscent of some of the imagery our clients had reacted strongly to in our kickoff meeting, an interface to allow the image to speak. My second style was to energize and evoke the adventurous nature our clients wanted to exude. I used a mix of bright electric colors with the colors already in their logo and placed them as highlight colors and in icons to compliment the images. The third tile meant to relate to their wish to be hip, fun, and inspiring. I placed photos in circles to be more welcoming and like the visitor is viewing the place through a lens. Lines were very delicate and soft, an ode to the inviting nature I was trying to evoke. When presenting these styles communication was a bit of a technical struggle. Skype lost connection numerous times and we decided it was best for our client to email back feedback to us.
Our feedback was a product of the communication issue we ran across. We received minimal suggestions and opinions from the clients. Regardless, we moved forward confidently knowing what would speak best to the brand voice and mission of the client.
• do not use shopping cart
• use minimal CTA wording
• include per person per price in trip previews
• include enticing images
My personal client feedback leaned toward my darker UI style which mimicked a particular style our client found beautiful during our gut check. Their hesitation was that the darkness may evoke a bit of creepy and obscure vibes, so I moved forward with using the layout of the imagery but lightening the background a bit using gray tones. I wanted to the images to pop and come off as a slick credible professional website.
Further into my iteration, I found it troubling to continue with the dark UI, feedback from my team spoke to the feeling of a gaming site and too modern. I switched gears and went for a more minimal
clean white layout.
Further development also lead me to change the home page iconography, my teammates were keeping the three icons to explain Tripmate's mission statement, so I decided to find an more expressive way to portray the explanation that would give our client more options.
With these iterations of our key screens we conducted user tests. We first showed users
Tripmate’s current site.
• fun elements jarring against darker more sophisticated elements
• overwhelming, too much information on the first page
• needs more compelling pictures to really pull people in
The overall opinion was that aesthetically it was inconsistent which relayed a feeling of not trustworthy.
FEEDBACK ON OUR DESIGNS
• imagery was transportative
• users liked a lot of explanation off the bat, since this is an interesting concept for traveling it does need clear explanation
• screens inviting
• information well organized, and a feeling of reliability coming across with all
three of our designs
There are a lot of search filters for users to choose an adventure, my teammates placed that filter down the sides of the page one left and one right, while I placed it across the top. We had one user suggest that she liked the side better so she could get to it faster and not have to scroll all the way back to the top
to change things.
We then presented synthesized results from all our user tests and our hi-fidelity screens for both desktop and mobile to our clients. We were able to immediately get some feedback from one of the cofounders which was valuable to receive instant thoughts.
• the hero image was too shady for his taste, he wanted it to evoke more energy and fun and felt the same about the lead font as well.
•liked the idea of how to layout their story, liked more enticing images of adventures in Panama.
• overall, wanted all of us to push the “mate” story more. They felt that through the UX research for the mate side, the individuals who host the trips, it was made clear to them that showing off those individuals and their expertise is a benefit. It would give users a chance to get to know the mates, highlight them, and further provide some credibility to the basis of their travel idea.
• They also were curious about where the filters should be placed and how the users did feel about that. It was nice to be able to have some knowledge on the topic to provide to them immediately. I even called back to my previous client, Aptamigo, who we created a survey about whether a map should be on the left or right. We concluded through that survey that whatever is most important to communicate from the client to the user should be first and on the left side, since most user’s move from left to right across a page.
We concluded our presentation feeling more confident on the paths we should take to improve our designs. A few days later received more feedback from the other cofounder that was beneficial and reiterated the decisions we were already making.
The feedback also strayed a bit from the UX wireframes we received. We found ourselves trying to balance between the UX research and our client’s wishes.
• During our style exploration phase, the Tripmate team wanted to nix the use of a shopping cart which had been included in all the UX wireframes.
• They voiced concerns that perhaps the filters should be placed on the homepage which as a team we decided the UX team had strong evidence on what would be most valuable to place on the page.
• My teammates decided to also take that stance for not featuring the mate on the homepage. I decided to go against the UX and included an area for the mate, but also to give our clients some options to see what that feature could look like since we were presenting as a team. Similar to how we presented different areas the filters could be located to show them all different options.
On my personal design I changed a lot of the organization of information on the individual trip page, added some hover features, and changed many images, including the hero image, to lighten the overall
feel of the design.
I created hover states over images of the possible adventures a user could book. A black transparency appears over the image and gives an explanation to what Tripmate is all about.
We created a mate page for a full background on a possible host for a user trip. I created a gallery of images that mate would be able to post and share from different adventures. The design included other offered trips by the same mate and similar trip by other mates. I tried to make the user receive as much information and imagery as possible about a potential adventure to feel absolute
excitement and confidence.
We created prototypes within Invision, iterated micro interactions and generated those for both our mobile and desktop designs. We presented our final sprint to our client via Skype and the technical difficulties were again there, but we executed as best we could. Our client was very pleased with the final iterations and was very appreciative of all of our hard work.
In the end I personally was pleased with a lot of the changes I made to my design. I do wish I would have gone with a non dark interface from the beginning and perhaps melded my style ideas together. I felt a bit hindered staying with my chosen style and bound to a degree, only until close to the end of our sprints did I see the potential to get creative and give energy to the design. I believe I was leaning on my client’s feedback too much and not trusting my design instincts from the beginning. This client process needs to be a mix of giving my client what they want, doing that by leading with my own design
perspective and knowledge.
