Purchase experiences on any device. Design Strategy, UX, and Code

A seamless flow from email to checkout

San Francisco-based startup ZOZI found that the visitors coming to their site through a mobile device (phones and tablets) comprised 29% of their total traffic, which made up 15% of their revenue. The problem? Their current site wasn t mobile friendly. That’s where ZURB came in.

As senior designer on the project, I worked with one of the ZURB partners to create a mobile-first website using ZURB’s Foundation framework.

Mobile alternatives Taking what currently exists, we produced ideation sketches to show alternatives for various features that would work better for mobile devices.

Designing mobile first

After a quick round of hi-fi wireframes, we dove into code. Taking a mobile first approach, I started coding for the small view (devices with a max-width of 768px). Straight forward enough, but adding in progressive enhancements for the mid-size view (up to 1024px) and then the larger devices (min-width of 1024px) were a bit more challenging as I wanted to write as little markup as possible. In the end, we created 19 coded pages that works responsively.

Progressive enhancements We made the mobile presentation as simple as possible (single column layouts with large, tappable areas) and then made enhancements for users as their screen size got larger.

Check it out

The workflow we looked at was from the user opening their email, clicking over to an experience and then completing their purchase. We developed templates for the experience pages, including their new multi-day getaways, which work differently for small and medium screens.

We completed this project in May 2013. The app has been iterated on and updated since our initial work.

Visit ZOZI