UI Design
Takeaway Tea
The Brief
During the pandemic we found ourselves confined in our own homes for much of the time. Now that things are starting to ease we can now meet friends and family and eat and drink in restaurants, cafes and bars. However, many people are still very anxious about meeting in crowded bars and restaurants.
​
To cater for the many people who are unable to enjoy eating and drinking out again, we want you to create an app which will allow them to order drinks and/or food from their local restaurants, cafes and bars.
​
Research the area you are going to cover thoroughly. Always start on paper and sketch out how you feel the app should look. Wireframes on screen will help bring these sketches to life and will allow you to develop the flow of content.
​
Your app should consider the audience, typographic consistency and clarity, colour contrast and accessibility, imagery that fits within your creative approach. ​
Your app should include: home screen, login/sign up screen, and two additional screens.
The Approach: You should use Material Design foundations as the basis of your app design. This should include reference to layout, typography, colour and components. You can focus on Material 2 principles for the development of your app but, if you wish you can incorporate aspects of the recently released Material 3. Your design can make use of your own typographic choices but they should remain within Material typographic scaling guidelines where appropriate.
The Product
Takeaway Tea - an app that allows users to order ready-to-taste speciality tea and treats that are delivered to a location of their choice in Belfast. Note that the app was initially called "Tea Time" and this is reflected in some of the early sketches. The name was changed to emphasize the "takeaway" experience.
Target Audience
The Takeaway Tea app is geared toward middle class young adults or middle age adults living in Belfast.
Market Research
For this project I looked at the TPass app, CoCo app, Tea app, Teavana app, and the Uber Eats app but focused on David's Tea online store and the Starbucks UK app for the UI design of the Takeaway Tea app.
​
I based the UI design on the design for the David's Tea app, mainly the emphasis on showing high quality photographs of tea leaves.
I was inspired by some of the screens in Starbucks UK, given its popularity and user friendly features.
User Flows
Low Fidelity User Flow
​
Low Fidelity Wireframes
Feedback on High Fidelity Wireframes
High Fidelity Wireframes
