Twinings iPad App
For my university thesis, I created an iPad application to promote Twinings tea
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.
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
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.
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.
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".
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.