Introduction
Tree to Cup Product Page
In 2022, I was hired by Tree to Cup, a fictitious local Austin company, to design a page for their website. Tree to Cup sells organic, ethically sourced tea and coffee. Their main client base is socially conscious middle aged and college educated Austin locals who like to support small, independent businesses.
The client needed a template design for the page where they would be selling their products. It was crucial that this page be organized and easy to navigate to drive sales. However, the client also wanted this page to reflect their personal identity in the design. This meant avoiding a design that was too plain while also maintaining a clear, easy-to-understand page. It was also important that this page serve as a template for all potential products they could sell in their shop, meaning it could adapt to different information that was input and presented.
Key Project Data
Role: UI/Visual Designer
Tools: Figma
Ideation
Research + Sketches
I started by doing research into the competitive landscape of product pages for similar companies. I observed common patterns that were effective and those that weren’t working.
After noting these patterns and deciding which I wanted to incorporate into my design and which I didn’t, I began sketching. I ended up with over 20 sketches of different page layouts and various ideas. This iteration was a crucial part in my ideation process, as it helped me tap into unique ideas I initially didn’t consider and forced me to think outside of the box.
Mood Board
Next, I created a mood board to help guide the style of the website and serve as a touchstone for myself when deciding on the overall direction of the aesthetic of the design. This stage of designing was useful because I could try out different aesthetics without fully committing to a design yet. It allowed me to experiment with different directions before finally settling on one that I felt was most appropriate for the client and audience they were trying to reach.
Design Process
Wireframes
After these initial ideation processes were completed, I moved on to the design stage. I created wireframes based on my initial sketches of the layout of the page to get a better idea of what this layout would look like on the web, synthesizing my various ideas into one cohesive design. Once the overall layout was ironed out, I started adding color, imagery, and typography to the design, leading to a high-fidelity mockup of the initial design. I brought this design to my team and received feedback, which I took and made adjustments.
Feedback
I presented my wireframes to some fellow designers and got feedback on some of the layout choices. One area that I really honed in on was the “Reviews” section. Instead of one column with all the necessary information stacked, I created two columns to better organize the information and establish a more visually pleasing look.
Visual Design
After my layout was established and I made revisions based on feedback, I moved on to the visual design portion of the design process. Here, I added color, imagery, and texture to really establish the voice of the client and brand identity. An important part of this design developed during this stage of the design process — the pattern that is used in the background of the page. This pattern became very important to the overall aesthetic of the client since it is so distinct and noticeable. I decided to incorporate this pattern in an effort to appeal to the natural, eco-friendly yet refined nature of the product. I was largely inspired by the Gaudi tiles from my mood board and wanted to carry that aesthetic through to the final design of the project.
Final Design
Reflections + Takeaways
Challenges
One of the challenges of this project was making sure that my design could serve as a template for all kinds of products. The design had to account for long product names to short names, long product descriptions to short snippets, etc. Another challenge I faced was incorporating the intricate patterned background into the design while making sure it wasn’t too distracting or drawing your attention away from the product. At first, I had a large header filled with the pattern right next to the product images. However, the large amount of pattern showing was distracting from the product images. I experimented with a few solutions such as blurring out the pattern, reducing the opacity, and even removing the pattern at the top completely. However, I didn’t want to lose the vibrancy of the pattern or the motif of it throughout the page. In the end, I was able to solve this problem by reducing the amount of the pattern that was showing and increasing the white space around the product images so as to give them more room to breathe.