Instant Keg

Role:   UX, UI

Project:   e-Commerce Application Design

Agency:   Foundry119

This application gives users the ability to purchase or rent kegs online. After client discovery process, I began by creating the initial site map/user flow in OmniGraffle, which was reviewed and discussed both internally and with the client.  

Paper Prototypes

I then began sketches and paper prototypes to communicate layout ideas and basic concepts with the team. After just a few sketches and an idea of where the initial direction was going to go, I switched to functional prototypes to work out some of the usability issues that didn’t come up in the sketching phase.

Interactive Wireframes

After a few sketches and feedback/discussion with the internal team, I moved quickly to creating interactive prototypes in UXPin. Since this was essentially a long order form that could potentially overwhelm the user, I broke the process down into steps and included a completeness meter that would inform users of how close they are to completing the process. I wanted to give the design a simple, app-like feel, and to make each step in the process quick. It was important to keep the process as easy and as pleasurable as possible to keep users from abandoning the process.
Click here to view the interactive wireframes

We included a running total that is updated each time a change to the ‘order’ is made, to act as informative feedback, and so users could make better decisions based on price when choosing from the various options.  Additionally, the client wanted to push the leasing option, while still allowing users the ability to buy.  Putting the buy and lease options side-by-side was an effective way to highlight the better affordability of the lease option, and encourage shoppers in their decision-making process.
Click here to view the interactive wireframes


Below are a few initial explorations into color options and first-draft ideas/concepts for the UI/design.