The goal of this project is to design a mobile app for Zhi Tea that would allow the customer to browse and order teas through the online store. Users can favorite, shop and even purchase gifts for friends.
I wanted to design something intuitive and easy to browse. Tea is simple and elegant: water and leaves. Eastern philosophy teaches focus and emptiness. The user should be completely focused on the task at hand and have as little distraction as possible. I wanted my design to reflect this philosophy.
I used white space to create a sense of emptiness and Helvetica Thin for the typeface so it would distract as little as possible. The idea of this app is for the user to find his tea, get some information and have a stressless experience.
The main page tells what the app is, lists the teas and has a small navigation bar at the bottom. The teas are color-coded to allow the user to instantly know what type of tea they are looking at. The nav bars change accordingly. When a tea is found, the user can read about its history, get reviews, rankings, and steeping information.
Zhi Tea Home Page
The Zhi Tea home page takes a minimalist approach, allowing the user to focus on their objective, easily navigate to their prefered teas andenjoy their experience.
Research, Analysis and Workflow
These are some notes of other sites and apps that have similar functionality or could be competing. I also take into account who will be using the app and what they will be using it for. Afterward, I come up with a workflow for how to navigate the site.
Some ideas of what I could get the home page to look like. I start out with sketches so I don't get married to an idea too easily.
This is my rough sketch of the final layout and navigation among the three main pages used to find your prefered tea.
Final Design Layout
The final aesthetics of the three main navigation pages used to get to a preferred tea.
Colors, fonts, and toolbars are standardized and will use the same colors throughout the app layout.
Each type of tea has color assigned to it. The nav bars adjust depending on which type of tea is being viewed. The colors match the packaging of teas found in the actual store.
I was experimenting with different UI design elements for a contacts app. One is a skeuomorphic design and the other is a flat. You can swipe left to delete, right to edit and push the arrow to bring down a list of quick-links to make a phone-call, text, email or facetime.
Black Skinned Contact List
White Skinned Contact List
These are some iterations I had on my initial app design. I wanted to be able to show off images because they are instantly recognizable. I also knew that a list-view would be easiest to navigate.
Experimenting with designs for the contact screen. This will be where the user can actually access information if they need to see what a number or email address is and make necessary edits
These are ideas I had for using the app. I wanted to keep most actions kept to one page so the user wouldn't have navigate through several screens to call, text email or webchat with someone.
Designing the constitution with nothing but type was a personal project that I undertook to test the possibilities of type. No images were used throughout the process and I was only allowed to use one typeface with different fonts.