TeaTalk
An easier way to meet people in your local community who share same interests in tea.
TeaTalk is a social platform designed to help people self-organize around local tea events. It’s a planned event where people with common interests in tea can meet up in person. And the mobile app makes it easy for individuals to organize their own local tea groups for in-person meetups or searching for existing tea events. They can explore events by city zip code to find tea groups close to them.
Prototype 1
For my first prototype, I explored the UI/UX of the mobile app I’m about to create. This prototype was inspired by the case study I’ve done on “Meetup” and I did some iterations based on the “Meetup” app and I also added a few new features to fit my audiences.
PERSONAS
I crafted one persona. This persona is purely based off of my assumptions and serve to inform my design decisions during the initial phase of design & research.
USABILITY TESTING
Usability testing is a very quick way to understand obstacles faced in an application from a user’s perspective. In order to create a brand new app based on “Meettup”, I first had to gain insights by observing people using the app. Luckily, I found a couple of my friends who would be willing to participate in this experiment.
I came up with scenarios in the following topics:
- Group creations
- Scheduling a meetup
- Finding a group/meetup
- RSVP a event
AFFINITY MAPPING
After I had completed my initial round of usability testing, I wrote down any obstacles they came across on post-it notes.
PAPER PROTOTYPE
Sketching is a great way to get my thoughts on paper without being committed to a single design. I came up with a few potential ideas that could be possible solutions to the pain points.
PROTOTYPE
Once I felt ready to create hi-fi versions of a few of my wireframes, I transferred my sketches into Adobe XD.
Once the user creates a profile, they will directly go to profile page. This page allows user to view their upcoming meetups, interested tea articles they saved and the groups already joined in the past. If the user wants to create a new meetup, they can simply tap “+” button on the corner left. It features group limitation switch allows the meetup to be individual-focused. The app also features tea education section which includes only science institution verify articles that specifically discuss about the tea health and culture in general. Above were my initial prototype of the app, I think there will be a few iterations along the process to make the app more polished.
Prototype 2
In this prototype, my goal is to understand what is API and to choose what kind of API for my capstone project. Before that, I haven’t exposed too much knowledge on this part and hopefully, this study could help me get an deep understand on API.
I spent most part of yesterday watching a few tutorials about the API, including Building an app from scratch and API for beginners. Technically, API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. And there is one more example I think it did much better job in explaining what is API in real life.
Since my project works really similar to Meetup, I took a look at their API. One of their feature is location-based requests, which I will use in my project as well. That is, When organizer create a event, while remaining private, still wish to show location about the event. By following this tutorial:
First, I created a new directory called geolocation.
Then I created a HTML file called index.html and a JavaScript file called script.js. Save both of these files in the geolocation directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GeoLocation</title>
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false http://script.js
This code sets up the main web page and I also have included two JavaScript files. The first loads a JavaScript library for the Google Maps API and the second loads the script.js file that you created earlier.
Now add the following code to the top of the file.
window.onload = function() {
}
I also need to check if the user’s browser supports geolocation. I can do this by looking for a geolocation object on the browsers navigator object. Browsers that do not support geolocation will not have a geolocation object.
// Check to see if the browser supports the GeoLocation API.
if (navigator.geolocation) {
} else {
// Print out a message to the user.
document.write('Your browser does not support GeoLocation');
}
In the else statement I have added a message that will be displayed to the user if the browser does not support geolocation.
// Get the location
navigator.geolocation.getCurrentPosition(function(position) {
};
The getCurrentPosition() function should itself contain a function. A Position object will be passed to this function, which can then be examined to retrieve the location data.
var lat = position.coords.latitude; var lon = position.coords.longitude;
The last thing to do now is to add a call to the showMap() function, passing in the latand lon variables as parameters. Add this line below the code you added in step 5.
// Show the map showMap(lat, lon);
Then I need to create a LatLng object for the Google Maps API. This object is used to position the map later. Add the following lines to the showMap() function.
// Create a LatLng object with the GPS coordinates. var myLatLng = new google.maps.LatLng(lat, lon);
// Create the Map Options
var mapOptions = {
zoom: 8,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Generate the Map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
WEB DEMO
Prototype 3
For the last part of prototyping, I decided to explore brand identity of the app
- App name
- Color palettes/logos
- Video mockup
NAME
An app’s name paired with the logo is the first interaction a user has with my app. It is my app first chance to make the right impression and evoke emotion to encourage someone to become a user. To identify the type of emotional response I want to give users, I first need to understand the purpose of my app and its target audience. For my app, I came up with the following keywords and sentences.
Purpose: meet people in your local community who share same interest in tea
Keywords: social, common, tea, community, friends, share, interest, talk
Then I start to play with keywords and try to combine those keywords together to see if there is anyone I think it’s good. I came up with nine new words and narrow down to three.
Down to three
Lastly, I picked Tealk as my app name because I loved the combination of “Tea” and “Talk” together. It’s simple and straight forward to the point that user could tell it’s an app about tea.
COLOR PALETTE & LOGO
I went to pinterest for any tea-related images and put it together to form a moodboard which help me to expand color palette and logo ideas in a much broader perceptive.
Then I used eyedropper tool in Illustrator to get those main colors in images
Overall, I loved it all but I have to pick final four as brand color palette. I choose
Next, I started to sketch some of the logo ideas on paper. I knew I wanted to created something that is simple and also straight to the point that this app is about tea when user first see the app. Below is the sketches.
Down to final three
VIDEO MOCKUP
I am pretty comfortable using Adobe Aftereffect at this level since I took motion class last semester. One of the project we did was to make an app explainer video of any kinds. For Tealk, I wanted to follow same template I created last semester and change a little bit on the background color as well as typeface. Below is video prototype.
Yue Liu 