ABOUT THE PROJECT

Old World Coffee Prototype

 

  The focus of this project was to create a prototype that serves the business needs of Old World Coffee, a fictional coffee shop that has multiple locations within the city of Toronto.  The idea is that the business wishes to create an application that allows its customers to find an Old World Coffee location so that they can make an order for pickup. The prototype was designed to facilitate this task of ordering a cup of coffee, finding locations and paying for your order.  During the creation of this prototype, additional care was taken with the visual design process, particularly with the creation of user interface elements.

Process

The Problem

Old World Coffee is lagging behind its competitors that have created mobile digital payment options. On peak hours Old World Coffee locations have an influx of customers often resulting in large lineups. There is lost revenue from customers that are discouraged by this influx. Additionally, customers are crowding a single location when there are other nearby Old World Coffee locations. The coffee franchise desperately needs a digital solution that can increase shop productivity and customer engagement while also creating customer loyalty.

Target Users

The primary user of the Old World Coffee application lives in the city and has a busy schedule. They are familiar with local transportation options as they are always on the move. These users require an application that is simple and easy to understand. These customers are used to having an abundance of options and require their orders to be personalized. Lineups are often a hassle as it impedes their goal of purchasing a daily cup of coffee. Additionally, this customer wishes to be remembered so it would bring them great comfort to enter an establishment who remembers how they like their coffee.

Paper Wireframe

A paper wireframe was created which depicted the initial concepts for the application. This included user tasks such as the selection of the coffee type, size, and condiments. This approach helps with the visual design of the application helping determine the placement of components such as buttons and images. The purpose of the paper wireframe is to be able to get feedback from users by showing a rough idea of the interface. Users feel more comfortable giving feedback in this format as it is clear that the interface is a work in progress. Showing my sketches to users allowed me to collect valuable feedback. For instance, on the location screen, users needed to have more information pertaining to the distance of the coffee shop selected. This was very useful as I was able to integrate this finding into further iterations of the wireframe. Ultimately, I was able to identify key opportunities for improvements at this stage before committing to any particular screen configuration.

User Interface Design

After obtaining the feedback from the paper wireframe it was time to create the visual elements of the prototype. I first started by selecting the correct color scheme. Since this is a coffee application I worked primarily with monochromatic earth tones. Then I chose green and a chopper yellow as button colors that compliment the overall Victorian theme of the design. Flat iconography was designed but to create an aged look the assets were further rendered. The additional rendering also aids the user visually as the use of highlights and shadows on buttons create a sense of extrusion giving a visual cue that it is interactive content.

High-Fidelity Prototype

After gathering feedback from users on the low fidelity prototype a high-fidelity prototype was created using Adobe Photoshop and Invision integrating all the initial UI design aspects into a cohesive experience. This prototype contains the basic interactive elements needed by the user to customize their order, select the nearest Old World Coffee location, enter their payment method and complete their transaction.

 

 

Project Reflection

Looking back I believe this prototype does an adequate job at fulfilling its purpose. However, there are many opportunities for improvement as the experience could be more intuitive with some additional changes. For now, however, I must leave additional iterations for another day and hope to be improving user experiences around the world one coffee at a time.

Back to Top

Portfolio