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.

© 2017 Website designed by Jason Elliott

  • Resume
  • LinkedIn - Black Circle