top of page

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.

Screen Shot 2020-05-11 at 1.42.38 PM.png
Screen Shot 2020-05-11 at 1.42.25 PM.png

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.

Screen Shot 2020-05-11 at 1.43.59 PM.png
Screen Shot 2020-05-11 at 1.44.06 PM.png
Screen Shot 2020-05-11 at 1.44.12 PM.png

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.

Screen Shot 2020-05-11 at 1.45.49 PM.png
Screen Shot 2020-05-11 at 1.45.59 PM.png
Screen Shot 2020-05-11 at 1.45.03 PM.png
Screen Shot 2020-05-11 at 1.44.43 PM.png
Screen Shot 2020-05-11 at 1.46.35 PM.png
Screen Shot 2020-05-11 at 1.46.49 PM.png

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.

Screen Shot 2020-05-11 at 1.48.53 PM.png
Screen Shot 2020-05-11 at 1.47.54 PM.png

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.

Final Prototype

Website.png
  • linkedin
  • twitter
  • Instagram

©2020 by Jourdann.

bottom of page