TeaStori is a premium boba tea and dessert cafe with two Florida locations; Gainesville and Tampa. The primary goal for this project was to create a website with both store details in a nice and mobile-friendly design.
TeaStori website screenshot

Tech Used

The Problem

TeaStori was rebranding their second store in Tampa (formerly Bobacup) to be under the TeaStori brand. We shut down the Bobacup website and needed to restructure and change the TeaStori website to include store details for both stores. This allowed us to redesign the website.

Bobacup Home Full

Design and Content

For this redesign, I wanted to make use of TeaStori's main brand color #5d0408 and add more content to the website. It was important to have a section for important announcements as well as to highlight the products that TeaStori provided.

TeaStori Store Mockup

On the landing page, we wanted to just have a couple of product pictures with some descriptions. In addition, we wanted to have some information about the different store locations like their social media and physical address.

TeaStori Full

For the individual store pages, we wanted a very similar design to the landing page, but with more pictures, their store hours, and a link to their online ordering that is connected to their in-store POS.

An Instagram feed use to be displayed on their old websites, but Instagram has made a lot of changes to their website. Instagram introduced a strict-origin-when-cross-origin policy which prevents unauthorized websites from hotlinking and accessing their data. We decided to just take some images from their Instagram, put them on the website, and link to their Instagram.

Since most of the content on the website would not be changed very much, we did not need a CMS solution. The only data that would change on the website would be the store hours. Through Yelp's Fusion API, we can display current store hours and if the owner makes any changes, they will update on the website in real-time.

TeaStori Gainesville Full