Teahaus


Assignment

The first project in my Interactive III class was to create a cross-platform mobile presence for a pre-existing brand that had little to no mobile presence.

My Role

I chose Teahaus, a tea shop based out of Ann Arbor, MI. They have a website, but no mobile app. They concentrate on providing their customers with knowledge about teas as well as the teas themselves, so I wanted to focus on that aspect of their brand.

Research

the client

Teahaus provides experience and education as well as the highest quality tea available on the market.

the user

Tea drinkers in their twenties through fifties that enjoy drinking, learning about, and interacting with different teas.

the services

Teahaus sells loose tea and merchandise, offers facts about tea and information about the monthly tea club, and maintains a digital calendar of events at the tea house.

web to mobile

An important task was to lay out all of the features of the Teahaus website, analyze them, and then figure out how they would transfer to mobile. I also added the Brew feature, a utility that would keep users coming back to use the app.

Wireframes

hierarchical navigation

Starting on the home page, the user may pick any of the Teahaus teas, customize the brewing process for amount and strength, and then steep their tea using the timer provided.

flat navigation

To start, the user picks a tea and selects their strength and amount. Then, the app gives them directions and a timer to tell them when to stop steeping.

content-based navigation

Users select a tea from an expandable list, which brings them to the tea page where they may view the history, brew their tea, and buy the tea. A hidden menu on the right conceals the cart and account features.

Visual Design

minimal

Across platforms, the minimal design direction was characterized by a bright green color. Platform design standards were followed strictly, leading to a large difference between platforms.

natural

The natiral design direction used slight textures and background images to ground the content. The color scheme was kept consistent across platforms, but interactive elements were changed to suit the platform.

modern

The modern design doubled as my universal design. It was kept almost completely the same across all three platforms and was designed to cross the platforms with little to no changes or problems.