Matcha Microsite Process Summary

David Liang

1. Topic Understanding

I started with a very basic understanding of matcha as a popular tea drink, but I was not too familiar with the culture and historical background because I don't drink tea anymore. Our idea was to create an infographic page like the content on wikipedia but specifically designed around matcha. We wanted the site to feel clean and contain both modern elements as well as traditional just like how matcha is used today.

2. Input and Feedback from Creative Director (Grace Choi)

Feedback throughout the entire project was specific and really practical. Key direction including the use of images for the cover page should represent the theme of each section, ensuring clarity and visual appeal. Layout within each section page, and just the overall visual consistancy

3. How I Translated Feedback into the Website

I first followed feedback directly from the creative director, making the most obvious changes like cover images, layout adjustments, and spacing improvements. Then I try to see the site from a user perspective and make adjustments to improve usability and overall experience. For example, images did not have supporting text like wikipedia explaining that specfic image, so I added the hover effect to be more clear.

4. Design Process

My design process began with an overall structure and hierarchy: deciding what pages were needed, the most important content, order or each section, and how information should be grouped. I then built a draft using a very limited color palette and experimented with different typography to fit the project style. After that, I iterated on image layout, overall structure and spacing so that the design looked balanced and easy to be viewed on desktop, then moving to layout in mobile, considering there's no hover interaction on touch devices.

5. Tools, Approach, Challenges and Successes

Tools used: VSCode, Photoshop, Figma

Challenges: One of the biggest challenge I had was finding good images, espically for the cover page and flavor profiles. I wanted the cover page to look like a menu with each item representing a section, so finding transparent matcha product images took way longer than expected. For flavor profile there are many different versions and most images are advertisment for a specfic company, so I had to remove all images and created my own version. Another challenge I had was maintaining consistent spacing with mixed text and floated image layouts as well as creating the alternative mobile layout without all the hover effects.

Successes: I think the page has a strong visual consistency across all pages by using the correct font and colorpallete. It's user friendly and easy to read, responsive behavior that works well on different screen sizes, and a polished microsite that covers all the historical and modern aspects of matcha clearly.

7. Where and How I Used AI

AI was used for writing the actual matcha information, specifically the flavor profile section since its not covered in the wikipedia page. I also used AI to help me with layout problems debugging issues with spacing of the images and text which took longer than expected. Lastly I used AI to clean up my code, removing a few lines that I wrote but was never used in the final build.

8. Final Reflection

This project improved my ability to connect the background research and visual communication. I learned alot about taking feedback from others and iterating on my designs,One thing I really liked about this project was the idea of working with another creative director to make their website. I also learned a lot about the technical side of web development, including layout, spacing, and responsive design.