Responsive Website
UX & UI Strategy

The Challenge

Find & Form originally had been helping Drync with their native iOS app. The app allows wine connoisseurs of every level to track and purchase the wines they love, from instant taste-testing at the table. Brad Rosen, CEO of Drync, wanted to translate the mobile experience into a responsive website with an e-commerce component that allowed customers to sync up their wines whether they’re on the phone or browsing on their desktop.

The Solution

Designing using a mobile first approach, the team used this opportunity to further develop the design and brand of the Drync experience. We focused on the ability to discover and browse new wines as well as creating a solution for people to easily order wine anywhere.

The Process

Because the development team had been working closely with Drync for over a year now, I was able to get information right away. Jon and I white-boarded some layout ideas before jumping into wireframing.

Coming out of a native app, I had a lot of space in desktop to focus on various elements for customers. The images are user created so I had to be sure that the site could accommodate different widths and heights as well as an array of possible error/no data states.

High-Fidelity Wireframes to Design One Page Checkout

UI Style Guide

This was the first project where I created a UI style guide for the Find & Form development team. At the time of creating this in the summer of 2013, there were over 1.7 million wines in the Drync database, so the ability to adapt to future pages and features were crucial to the success of the project.

UI Elements Over 1.7 Million Wines in Drync's Database

Role

Product Designer

A Collaboration Between

Design
Development & QA
Project Management

Design Deliverables

Wireframes & Designs
UI Elements

Tools

Photoshop & InDesign & Preview

© ∞ Yifan Frances

Work