Teahaus is a tea shop in Ann Arbor, MI, dedicated to high quality tea in many ways, from the selling of tea to the education of patrons. They have absolutely no mobile presence.
For my Interactive III class this semester, I am building them a mobile presence that will work on iOS, Android, and Windows. A work in progress - as I finish parts, I'll update them here.
I began with a short analysis of my client, user, and services.
Teahaus provides experience and education, as well as the highest quality tea available on the market.
The User is a tea drinker searching for high quality tea, most likely already aware of the brand.
The Services include selling tea and merchandise, offering facts about tea, providing a monthly tea club, and information about the tearoom.
Feature Sets: Once I knew my user and client, I was able to pull features from Teahaus's website to expand upon and make a mobile application.
Wireframes: Three sets were done, with three different systems of navigation specified in the iOS Human Interface Guidelines. from left to right: Heirarchical, Flat, and Content-based.
Initial styles: Whether or not these styles were followed precisely, these three columns of inspiration were a starting place for my skins.
Comps: I skinned every set of wireframes. Some were more successful than others, but each came with its own set of UI/UX challenges.
The final solution was a universal design, very similar across the three major platforms. A menu on the right housed the cart, settings, and user information, while the main app consisted of the different teas and merchandise that Teahaus sells. On a details page, the user can read about the tea and it's history, learn the best way to brew it according to the user's specifications (shown), or add the item to their cart.
Each solution went through a series of revisions in order to find the best visual solution.
Besides the final solution, I developed different solutions specific for each platform:
iOS designs: Clean and modern, with green highlighting interactivity.
Android designs: Overlays add interest, with green highlighting interactivity.
Windows designs: A panorama with images and a light green highlighting interactive features.
