Vayable is a platform that helps users discover and book unique experiences offered by other local users. For example, if I was visiting Paris, I could book an food tour with a local Parisian.  I was originally hired to visually skin a native mobile app. The brand and web app had already been created, and I was told that the only technical limitation to keep in mind was that this would be a native iOS7 app loading mobile web views.

Vayable is a platform that helps users discover and book unique experiences offered by other local users. For example, if I was visiting Paris, I could book an food tour with a local Parisian.

I was originally hired to visually skin a native mobile app. The brand and web app had already been created, and I was told that the only technical limitation to keep in mind was that this would be a native iOS7 app loading mobile web views.

 Along with the brand guidelines, I was given a google doc outlining all of the features and elements that would be needed on each screen.

Along with the brand guidelines, I was given a google doc outlining all of the features and elements that would be needed on each screen.

 Then I was provided with wireframes done by somebody on the Vayable team. They believed these were reasonably complete and simply needed a visual re-skin.   They were open to UX suggestions and also gave me permission to bend the brand a little bit as needed. They just wanted to make sure it was simple, easy to use, and felt like it belonged in the Vayable family.

Then I was provided with wireframes done by somebody on the Vayable team. They believed these were reasonably complete and simply needed a visual re-skin. 

They were open to UX suggestions and also gave me permission to bend the brand a little bit as needed. They just wanted to make sure it was simple, easy to use, and felt like it belonged in the Vayable family.

 My first step was to compare the google doc with the wireframes that were provided. Upon further examination, I noticed numerous discrepancies between the google doc and the wireframes, marked here by red boxes. Many items were missing on the wireframes, or the wireframes had extra elements that were never mentioned on the google doc. After looping back with the team, I was told that anything on the google doc took precedence.

My first step was to compare the google doc with the wireframes that were provided. Upon further examination, I noticed numerous discrepancies between the google doc and the wireframes, marked here by red boxes. Many items were missing on the wireframes, or the wireframes had extra elements that were never mentioned on the google doc. After looping back with the team, I was told that anything on the google doc took precedence.

 I felt confused by the information provided to me by the client, so I went back to the drawing board and started with a user flow. This helped me visualize more easily where all of there screens were going, what was missing and what had to be added in.

I felt confused by the information provided to me by the client, so I went back to the drawing board and started with a user flow. This helped me visualize more easily where all of there screens were going, what was missing and what had to be added in.

 Then I started with a few quick sketches with what the experience listing screen might look like. I made sure to outline along the top what information was required for each listing, and got a general rough idea of what some layouts might look like. Then I headed into Photoshop.

Then I started with a few quick sketches with what the experience listing screen might look like. I made sure to outline along the top what information was required for each listing, and got a general rough idea of what some layouts might look like. Then I headed into Photoshop.

 Usually I tend to work out the more granular details while I'm designing in Photoshop and I find that I have a lot of a-ha moments when I have to figure out the small visual details, too. Taking some elements I liked from each wireframe, I created a variety of layouts keeping in mind that the more important information should have higher visual hierarchy (price, experience title), while balancing the emotive power of large images.  I introduced an extra navigation under the header to address the problem of wanting to show their users up to 7 days of possible activities, but not wanting to give them a super long list to scroll through.

Usually I tend to work out the more granular details while I'm designing in Photoshop and I find that I have a lot of a-ha moments when I have to figure out the small visual details, too. Taking some elements I liked from each wireframe, I created a variety of layouts keeping in mind that the more important information should have higher visual hierarchy (price, experience title), while balancing the emotive power of large images.

I introduced an extra navigation under the header to address the problem of wanting to show their users up to 7 days of possible activities, but not wanting to give them a super long list to scroll through.

 Here is an example of some quick ideation and wire framing on the experience detailed view. On Vayable's original wireframes they literally had so much information on one screen. I knew immediately I wanted to separate them into "experience detail view" and "inside profile view".

Here is an example of some quick ideation and wire framing on the experience detailed view. On Vayable's original wireframes they literally had so much information on one screen. I knew immediately I wanted to separate them into "experience detail view" and "inside profile view".

 Here is where I separated out the Insider profile and the event detailed view. At this point I began to create a standard color system where all large action items were the Vayable blue, and all highlights or alerts are shown in the Vayable red. 

Here is where I separated out the Insider profile and the event detailed view. At this point I began to create a standard color system where all large action items were the Vayable blue, and all highlights or alerts are shown in the Vayable red. 

 I also split payments, originally in one long screen, into a more digestible 2 step process. There originally was no way to specify how many tickets you could buy. Using AirBnB as a reference, I placed this control to add and subtract the amount of tickets easily.

I also split payments, originally in one long screen, into a more digestible 2 step process. There originally was no way to specify how many tickets you could buy. Using AirBnB as a reference, I placed this control to add and subtract the amount of tickets easily.

 Here are the screens together to show the cohesive look and feel I've created across the entire app.

Here are the screens together to show the cohesive look and feel I've created across the entire app.