Website Design
Casco Bay Soap Co. Project
In the Spring of 2023, I took my first web design class and discovered a profound interest. As a part of my semester-long project, I was assigned to revamp the website of Casco Bay Soap Co. My responsibilities included analyzing the current website, identifying areas of improvement, and developing design systems and wireframes using Figma. Through this project, I gained a deep understanding of the steps involved in UX/UI designing. Below are the wireframes for the homepage and interior pages I created for desktop and mobile devices. Clicking the thumbnail brings you to the full wireframe; the high-fidelity wireframes will preview in the appropriate screen size and you can then scroll.
-
Casco Bay Soap Co. is a small business that creates homemade soaps in small batches, prioritizing the idea of being Maine Made—a term recognized worldwide as quality and integrity in craftsmanship. The company is solely owned and operated by founder Shannon Grauer, who has upheld her grandfather's old-fashioned tradition of handcrafting soaps.
-
Lack of color
Inconsistent use of fonts
Unprofessional language in some areas
Absence of header navigation
Difficulty in navigating the website
Picture in the "hero" section takes up the entire screen
-
Develop a website that is easy to navigate and enjoyable to use
Retain the old-fashioned and nautical aesthetic of the brand
Update product images to provide a better user experience
Highlight the time and effort invested in crafting each bar of soap
Hand-Drawn Wireframe Homepage Desktop
Low-Fidelity Wireframe Homepage Desktop
High-Fidelity Wireframe Homepage Desktop
Hand-Drawn Wireframe Interior Page Desktop
Low-Fidelity Wireframe Interior Page Desktop
High-Fidelity Wireframe Interior Page Desktop
Hand-Drawn Wireframe Homepage Mobile
Low-Fidelity Wireframe Homepage Mobile
High-Fidelity Wireframe Homepage Mobile
Hand-Drawn Wireframe Interior Page Mobile
Low-Fidelity Wireframe Interior Page Mobile
High-Fidelity Wireframe Interior Page Mobile