Thé-bel
For my final project in "Intro to Visual and Interaction Design," I decided to create a prototype website where users could buy tea that would be paired with their favorite musicians. My main goal of the assignment was to create designs for each of the boxes of tea and make a website design that was intuitive to users.


Deciding on a Theme
After brainstorming an idea for the title of the website (it's a mixture of the word rebel and tea in French), I choose a series of photos and a color palette to inspire the initial landing page of the website. My initial inspiration was to make the website feel cozy and warm like a tea shop. Therefore, a lot of the colors and pictures from the mood board came from that kind of feeling.



Creating a Logo
I deliberated on a few ideas for the font I wanted to used for the logo of the website, but finally decided on using the third option as the logo of the website. In order to add something unique to the design of the logo, I decided to replace the b in thébel with a musical symbol, the treble cleft, as I think the symbol resembles a "b". I used Procreate on my iPad to create the final logo and then made some other assets that I thought might be used on the landing page as well.






Iterating Through Landing Pages
In my initial designs I tried to recreate the cozy feeling of being in a window nook of a tea shop but felt that the designs were really outdated and didn't allow for the site to be more modern which was what I wanted more of. So in the second set of designs I tried to highlight the tea more. I made an one of the boxes of tea that I wanted to highlight on the website, and then in the final design I added headphones to the design to make it more clear that this website wasn't only about tea but also about music.


Finalizing the Designs
I created wireframes of the website on Figma. Additionally, I created 6 different fake boxes of tea to put on the website using Figma. Each of the names and flavors of the teas are based off of lyrics from songs of each of the artists. In addition to the boxes, I also created different versions of what the tea packets would look like. The final pages of the website are included in the prototype linked below.