Twinings

ipad app

Twinings iPad App

In 2012, for my University thesis, I decided to create an iPad application. I chose to design one for the Twinings tea company.

client
TWININGS
agency
PERSONAL PROJECT
role
ux/ui design
lettering
Twinings iPad Screens
THE BACK STORY/MAKING A DECISION

Twinings is a well-known English company that has been selling tea for the last 300 years. The successful trading business, which began in England in 1706, is now selling over 500 tea varieties to more than 100 countries around the world.
Although I did not drink tea very often, I have always liked Twinings’ aesthetics and thought of their products as an addition of a natural and pure element in almost everyone’s everyday life. There was no official Ipad App for Twinings, and thus I decided it would be an enjoyable challenge for me to go ahead and design one.

I already had some web designing skills going into this project, which I had obtained from college during my previous years of studying. I was also an iPhone 3GS user myself and I was familiar with these new technologies. However, I have not had previous experience designing applications for touch devices. I also had to keep in mind the Apple User Interface guidelines which are required in order for any application to be accepted in the App Store. In the past, I mostly focused on a project’s aesthetics. However, before starting this project, I decided to change my way of thinking and focus on the needs of each user as well as the usability / functionality of the application.

RESEARCHING TWININGS AND PRE-DESIGNING PREPARATIONS

I researched the brand online and bought a number of different tea blends from my local store. I began writing down what the application's goals and functions should be. I studied some similar applications for the iPad and chose, in my opinion, the most user friendly names for the application's buttons:

  • About Twinings: History of Twinings · Benefits of Tea · Twinings Tea Tasters · Latest News
  • Tea Mood: User choices (Day, Mood, Goals) · Results (tea match)
  • Tea Spot: Enable the choice of finding the location of the user by geolocation iPad · Display Google Map and user options to share it with friends on Facebook / Twitter.
  • Twinings Gifts: iPad camera activation 
· Tea codes scanning · Codes collection · Gift selection
  • Ratea: View comments and feedback on tea flavours from other users · Option for user evaluation and comments.
  • Buy Now: Find a Tea Store near you · Ability of buying through the Twinings on-line store.
  • Options: User Profile Settings · Newsletter Settings · Push Notifications settings · Credits
flowcharts
Flowchart of the app.
low fidelity post-its
Low fidelity wireframes with post-its.
LOW FIDELITY PROTOTYPING

After the completion of the wireframes with the use of post-its, I proceeded to design each page individually. At this point everything was still on a trial, black and white, draft phase. Some objects turned into buttons (links) to give the impression of navigating from one page to another. The icons and buttons had rectangular and square shapes, without emphasizing the aesthetic part. Step by step I designed an “outline” of how the final app and its navigation would look. After creating the clickable demo, the need emerged to test its functionality with people of different ages.

Low fidelity prototyping. (Press play to interact)
DISCOVERING THE “DESIGN FEELING”

After the low fidelity prototype testing, I studied how the interface of the application would look like, using the main menu as an example page. I selected the main menu, because of the large number of buttons and also because this is usually the page which defines the aesthetic consistency with the other pages and subcategories. In addition, I dedicated a lot of time adapting the objects of the application for portrait and landscape mode.

When I initially researched the brand, I decided that the aesthetics and style should combine their past with their present image. To achieve that, I studied the Twinings' company web sites, their internet commercials, and products' packaging. Next, I created some drafts via Illustrator; I explored different styles, typography, and colour palettes for every draft while comparing them to the brand’s style through the years.

Initial Drafts
First drafts
RETHINKING INITIAL DECISIONS

Although the initial drafts were aesthetically in sync with the brand, they did not evolve that way; I felt they lacked emotion. Realising this, I started a secondary research on tea in general, rather than the Twinings brand itself. I discovered that making and drinking tea was,in a way, a ritual which manifests differently in many countries around the world. This realization led to new ideas and the drafts that followed had a happy, "handmade" style which, I hoped, would resemble the atmosphere of an "English afternoon tea party".

Final Drafts
A second batch of drafts.
final design

I finally selected the drafts that I thought best showcased the brand and had the highest functionality. Next, I chose fonts and user movements (gestures) that I believed would enhance the application. Below you can see the design of the user interface (UI) in detail.