Responsive Website Design for a Cause
Quick Facts
Timeline: 3 Weeks
My Role: Lead UI Designer & Graphic Designer
Tools: Figma, HTML & CSS, Github, Google Drive, Miro, and Invision.
​
Coffee Tree was designed to achieve consumer awareness of sustainable coffee and support ethical production by enabling consumers to plant coffee trees on farms. We have observed that most consumers are unsure if their daily coffee is sustainable, but they want to know more about the process and how to improve their habits.
Low-Fidelity Prototype
After looking at some of our competitors and learning what our users would want from a website like Coffee Tree, we created this low-fidelity prototype. During testing, we had two main takeaways the users enjoyed the rewards system to give back to sustainable coffee farmers and wanted to learn more about the farms Coffee Tree would support. Therefore, we added a page giving more detail on the sustainable coffee farms Coffee Tree would partner with for the next iteration of the site. When we tested the next version of the site, users were satisfied with this solution.
Story Board
Click Image to Expand.
Style Tile
Click Image to Expand.
The End Result
The rewards page of the Coffee Tree website is the most significant part. It allows the user to give back to the community they enjoy and get rewarded for a small change to their daily habit. The idea was to gamify the process by displaying a progress bar showing how many 'Beans' the user has earned through Coffee Tree's point system. The user can gather beans by engaging with Coffee Tree's partners, and these engagements will keep the user excited. When the user reaches 100 Beans, they can redeem them to donate to a sustainable coffee farm of their choice. To give the user more control over the rewards and make them feel influential.