VAcation All I ever wanted

Gozengo launched in June of 2015 with the mission of bringing a personal experience back to the online travel space and creating a product that made booking-a-vacation enjoyable.  

 

My Role

As product designer my role shifted early and often across all disciplines and departments.  I felt most confident blurring the lines between design, product management and marketing.  I advocated for quickly prototyping ideas, testing them and using that data to improve and iterate on the product.

Research ➡️ Make ➡️ Break ➡️ Learn ➡️ Repeat

 

SITE REDESIGN

When I first arrived at the company, they had just released a v1 "desktop only" site.  After some initial talks with the team, we knew the main focus should be to optimize the site for mobile (which at the time was about 60% of our users).  

"not having a mobile optimized site is death to a product..."

Simply put, not having a mobile optimized site is death to a product.  I'm sure you've been to a site on your phone where you're pinching and zooming to read all the content... I know, it's the worst.

There was also one other problem.  V1 of the site was originally designed for travel agents so we would need to create a new visual language that was more consumer friendly.


The Problem

  • We didn't have a site optimized for over half of our traffic
  • The original site was designed for travel agents and people familiar with the travel industry

The Plan

  • Collaborate with content producers, branding & communication and engineering to piece together requirements
  • Create mockups and style guides to aid development
  • Create prototypes for long flows and micro-interactions
  •  A/B test old design against the new design

Prior to getting into flows and mockups, it's important to have complete understanding of the problem.  The best tools for exploring all angles of a problem are pen and paper.

“If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” - Albert Einstein

Once you have an overall sense of  1) the content that will be driving the site and 2) the technical constraints, you can move on to mocking up screens.  Majority of the time, my process is to go from paper sketches to mockups – especially with the advent of tools like Sketch and Invision which make it easy to test out different styles, layouts and flows without having to create detailed wireframes.  Keep in mind though, the first solution is never the right solution.  It often will take 20 - 30 iterations to get a design right.

 An example of how I work through many iterations quickly.  Each line represents a different exploration; I just move it down to the next row and keep plugging away.

An example of how I work through many iterations quickly.  Each line represents a different exploration; I just move it down to the next row and keep plugging away.

"...the first solution is never the right solution.  It often will take 20 - 30 iterations to get a design right."

After the visual style and direction is signed off, I created mockups for multiple screens and an style guide which defined rules and patterns to help guide development.  Below are screens and assets I personally worked on.

"Getting from 90 percent to actually shipping is the most difficult thing in product development"

During my time at Gozengo, we tried numerous tools and processes to better align design and development.  Two things immediately stand out to me as "major keys" to having awesome collaboration:  Zeplin and prototyping

If your not familiar with Zeplin, its a tool that gives designers magical powers when they hand off designs to developers.  It generates every spec needed for front-end developers, ensuring that designs get implemented correctly. 

 It even generates the CSS

It even generates the CSS

There are cases where a static mockup or specs cannot clearly communicate a design.  This is where creating low and high fidelity prototypes are essential.  Applications like Invision, Principle and even Keynote make it simple for designers to communicate a complex flow or a simple micro-interaction.

"don't trust the data (blindly)"

Now that we've come all the way to shipping the product, I wanted to talk about one important lesson I learned while performing A/B tests.  One thing I always tell myself is that we can only optimize what we can measure.  Since we can't measure things like delight there will be certain things that hide in the data and get overlooked if you don't use your gut.  

One early test we performed was a simple one – testing different homepage hero images and it's affect on conversion.  Here are the results of the test:

We pitted our original hero image with 3 variants – all different in perspective, action and color.  The test came out flat (at the time of capture, we didn't have statistical significance, but let's imagine we did), the conclusion from most of the team was that it didn't matter what image we had as a hero for our homepage.  I had a really hard time believing this, so we opted to couple our A/B test with a qualitative test.  We showed multiple versions of the homepage and had users walk through some basic tasks.  The results were incredible.  Without any prompting, there was one particular image that people immediately connected with and generated excitement.  Watch the first minute of the video below and you can witness it just like the team did.

Needless to say, we went with our gut and chose the image that clearly resonated with our potential customers.

So, my words of advice to designers who are in charge of using data and analytics to measure the effectiveness of their designs?  Use other tools and forms of research, and don't trust the data (blindly).


OTHER WORK/PROJECTS

 

Contextual email capture

Depending on what page of the site you are on, you would be presented with a email capture modal that has a expert tip pertaining to that page.  For example, if you were on the Hawaii destination page, the modal would have a tip about Hawaii.  Also, the form would recognize what type of email you had and present you with the correct call to action.

Various Ads

B-Reel that aired of The Ellen Show