Here is the link to the final site:
This site is for a restaurant called Soothing Tea. The purpose of the site is to allow individuals who don't want to spend too much money on bubble tea to find delicious bubble tea at affordable prices. Nowadays, when you go and get bubble tea, the prices are often quite expensive. It could cost someone up to eight dollars to get their favorite drink. Individuals also may struggle to get their favorite foods as prices everywhere for food and drinks are growing daily. This website targets those who want bubble tea for cheap. The restaurant's drinks are five dollars each, which normally wouldn't be the case in a normal bubble tea restaurant. Individuals can now afford their favorite drinks without worrying about the price of it.
Personas:
I geared this site towards individuals who are looking for a cheap and affordable bubble tea option. I also geared it toward anyone who may like tea and is looking for a new assortment of tea flavors to try, and or doesn't like to spend too much money on tea.
Lelani: My first Persona is named Lelani. Lelani is a 28-year-old UX Designer from San Diego, California. Lelani is currently trying to pay off her student loans and doesn't like to spend too much money. Since the price of food and drinks has skyrocketed, Lelani has had a hard time finding an affordable bubble tea place that suits her needs. Lelani's reasons for visiting this site is since she is looking for a more affordable tea option, she has a sweet tooth; she is craving tea, and Soothing Tea is able to provide Lelani with an assortment of toppings and unique sweetness levels to her tea.
Marcus: My second Persona is named Marcus. Marcus is a 32-year-old Engineer From Milwaukee, Wisconsin. Marcus is currently trying to cope with his recent breakup. He is often very busy with work and struggles to make friends. Marcus is looking for a place where he could go during his free time to grab some cheap bubble tea and bring along his dog with him. Marcus's reasons for using this site are to view the menu to see what bubble teas options there are. He wants to explore the site since he is obsessed with bubble tea and is yearning to try new flavors.
Site Map:
I intended for my Site Map to demonstrate my ideas for each of this site's pages, which included Home, About, Menu, and Visit Us. I went with a unique take for my Site Map as I chose to divide it into four different maps to layout each unique aspect of each page. I chose to do this since each page of this site has its own content and I wanted to place focus on the different parts I wanted to place on each page. I went with a big cloud in the middle to represent the page and then little clouds of ideas around it to show the parts I wanted for the page. Such parts include the how Soothing Tea was made, the prices, images of the tea and individuals enjoying the bubble tea, Soothing Tea's Origins, and the overall Soothe Experience, etc.
Wireframes:
For the Wireframes for this site, I wanted to explore the option of using Figma to make them. I've never used Figma and had a blast building my Wireframes for this website using it. I wanted to make the wireframes for this site easily readable to any audience as well as aid in the overall idea of my website. Users are easily able to navigate through my wireframes and interpret my ideas. My intention for the wireframes was to make them like the mockups and demonstrate attention to the overall layout. Figma aided in me displaying my wireframe layout, and it gives the user an idea of my thought process and my concepts for this site prior to making the mockups.
Mockups/Prototypes:
For this website's mockups and prototypes, I felt like translating the wireframes into designs was both fun and difficult. I felt that I was able to have fun with turning my wireframes into designs and translating them into designs allowed me to bring out my creative side. The fun part would have to have been choosing my overall color palette and deciding on the images in my design. I also found it to be quite interesting to be able to figure out more about what my final website would look like.
However, the process of translating my wireframe designs also was quite difficult since I wanted my wireframes to look right on every platform. I viewed my designs on my PC, MacBook Air, and iPhone, and deciding on the placement of each element from my wireframes took a bit to figure out. I also didn't want my designs to be cut out or look funky on a particular screen, so the sizing was definitively a difficult part of the process. As I was translating, I learned that each screen size needed a different mockup. Therefore, I decided to make two mockups, one for iPhone and one for Desktop since it was the easiest and most efficient way to view my designs. This decision helped me figure out the overall sizing and adjustments needed for each mockup.
When it came down to my prototypes, I felt that it was quite difficult figuring out the flow of when each page of the website would show. I had difficulty with the order at first, since the pages would show up out of order. I then figured out that I had forgotten to delete extra pages and this helped solve my problem.
What was fun about the prototypes was being able to test out the hamburger menu in action and see the flow from one page to another. I felt that it helped me try to figure out how the menu would function on the real website. To make my designs accessible, I had to often figure out the overall flow of my prototypes. Once I figured this out, I felt my design was accessible to all viewers.
As I previously mentioned, figuring out the flow of the wireframes was quite difficult since often I would deal with pages being in the wrong order, and or a page not being shown. To fix this, I checked the overall page number and saw there was more than needed. I then removed the unwanted pages in my prototype to fix the issue. Watching my wireframes and prototypes turn into these wonderful designs through Figma was an interesting experience.
Development:
When dealing with the development of my website, the process was a new learning experience for me as I have never coded before making this website. I found that coding my index.html in Figma to be relatively easy-going as I had previously for a brief time taken this class in the Fall 2022 semester so going over it again this semester was a great way for me to remember what I had learned. I felt that the overall layout of my index.html was easy to follow. Although, I often experienced some difficulties when it came to figuring out the links. When it came down to my logo, at first I had difficulty figuring out where to place it, then I managed to delve deeper into my code and realize that the logo should be its separate class. I did manage to, however, have fun exploring the class element and using it in my HTML. I found that using the class element was easy and helped guide me through my HTML page as I was building it. Since my other HTML pages followed a similar format, it was easy for me to ease into the coding compared to my CSS page.
For my CSS page, I often experienced many difficulties, such as adjusting the sizing and the overall layout of my objects. I had a layout in my mind, but the layout was more difficult to make than I had imagined. With help from Shauna, I was able to adjust my layout and use max-width and min-width to make an appealing website layout. I was able to learn that you don't need some codes to adjust your layout such as top and bottom. I felt that learning about the changes I needed for my layout was overall helpful in helping me meet the end goal of my website. When dealing with my colored box in CSS, I had a bit of difficulty figuring out how to make it look like the shape of a rectangle. I had to look up tutorials and practice with Codecademy to figure out the code for it. It required many steps for me to follow, which was new for me when it came to coding, as I was used to simply just writing in a code and the result popping up. I realized that some objects I wanted to include on my website, such as my .coloredbox would require multiple codes to make.
One code I found useful was justify-content as I learned it would help rearrange my content to the way I want. This property was useful in aligning my colored box on my homepage. One issue I ran into with my HTML was with my menu page. The biggest difficulty in my overall development stage was having to align each colored box to each menu image and then place each hot and cold icon in it. Shauna and I in class tried to figure out what the issue was and I was able to learn a lot from her within this short time. I often ended up overcomplicating my CSS pages by adding the same coding to each element which I learned was not needed. The same coding could be used for one element which would then be applied to each of the inner elements. For instance, my menu images all had the same properties to them so I learned only one group of coding was needed to fulfill the coding for each menu image.
The biggest takeaway from my menu page was that coding requires a lot of patience when building what you want. If you're going to rush the process you won't get the results you want in the end. For both my menu.css and visitus.css pages I dealt with difficulties in fitting my content on the screen and making sure it wasn't going to get cut off. This was a huge problem for me since I didn't want viewers to not see content that was important to my site and for each platform, the sizes vary. I learned that media queries can make a big difference in the layout of a website. While in the development stage, I learned that the colors for my website did not pass the color accessibility checker. I first applied white as my main color for the text, but I learned during the Midterms that a light background needs to be a dark color. I was a bit hesitant in changing the white text until I found an alternative by using a dark shade of brown. The brown would fit well into my website's color palette as I was already using white. I thought it looked great so I stuck with it and it ended up passing the color accessibility checker.
Final Product:
