TIMELINE:
Aug 2025 - Oct 2025
ROLE:
UX/UI Designer
LOCATION:
Ann Arbor, MI
COURSE:
SI 407 - Advanced Design
Bearclaw Coffee
overview.
This project involved redesigning a responsive website and creating a scalable design system for a local e-commerce business. The goal was to improve usability, visual consistency, and the overall experience across devices. The process included defining typography and color foundations, building reusable components, developing page templates, and delivering final designs.
typography.
The typographic system was designed to reflect Bearclaw Coffee Co.’s bold yet welcoming brand personality. Aller Display was chosen as the primary typeface for headings to convey strength, character, and a handcrafted feel that aligns with the Bearclaw name, while Gomme Sans was selected for body text and UI elements to ensure clarity and approachability. A Major Third typographic scale (~1.25) was used to establish a clear hierarchy across headings, paragraphs, labels, and buttons, with responsive adjustments to maintain readability across screen sizes. Reusable typographic variables were created in Figma to support consistency, scalability, and efficient updates throughout the design system.
colors.
The color palette was developed by referencing Bearclaw Coffee Co.’s existing brand colors and refining them into a cohesive, accessible system. Core brand hues were translated into primitive color variables, which were then mapped to functional roles such as primary, secondary, success, and error states. This approach ensured visual consistency across the interface while supporting usability, accessibility, and scalable application throughout the design system.
components.
Core components were designed for consistency and flexibility, with a primary focus on buttons as key interactive elements. The button system supports multiple states, sizes, color variants, and content types, allowing it to adapt across layouts and use cases. Reusable variants and variables ensured scalability, responsiveness, and easy maintenance within the design system.
templates.
Templates were created to establish consistent page structures that could be reused across the site. They provided a foundation for layout consistency and responsive behavior throughout the overall design system.
final designs.
Here’s a glimpse into the redesigned home page across desktop and mobile. Key decisions include prominent CTAs, sticky navigation for quick access, and a responsive hierarchy to support readability and consistency.
