Dawn Treader Books - Design Overhaul
The Dawn Treader Book Shop is a renowned Ann Arbor institution specializing in rare, antiquarian, and modern books. They needed a stronger online presence and a cohesive brand identity. Our team was responsible for redesigning their website and elevating their visual language.
Design Systems
Interaction Design
Prototyping
Introduction
Dawn Treader is a beloved haven for readers in the heart of Ann Arbor. But it has a bare-bones website that does not inspire trust or curiosity
To address this, we redefined the brand’s visual language, developed a more intuitive and standardized e-commerce platform to align with user expectations, and ensured full responsiveness across devices and display modes to enhance usability and accessibility.
Research & Insights
We selected industry and local competitors and analyzed their e-commerce experiences
Insights
Goals
Goal 01 // Visual Language
We developed a distinctive visual language that blends the store’s vintage charm with a contemporary aesthetic.
Our color palette draws inspiration from the original logo and the shop’s namesake—an iconic fictional ship. The primary teal evokes the sea, while the brown accent resembles both weathered sails and the aged pages of antique books, reinforcing the brand’s connection to literary history and maritime imagery.
We designed logo variations based on the original mark to support diverse use cases—such as a type-only version for print and a mark-only version for icons — and for better scalability.
Goal 02 // Responsive Design
We created design tokens and responsive component variants to ensure responsiveness and consistency across devices for developer handoff.
Goal 03 // Standard E-Commerce Structure
We built prototypes based on a more recognizable e-commerce structure.
Key Design Decisions
User Flow
Key Takeaways
Design System Thinking
I learned the importance of designing with scalability and consistency in mind. By establishing a cohesive design system—including typography scales, color tokens, and responsive components—I was able to maintain visual harmony and usability across multiple screen sizes and use cases.
Developer-Friendly Design
I gained experience in creating developer-friendly designs by using semantic, HTML-aligned layer naming, well-structured design tokens, and clear documentation. This significantly improved the efficiency and accuracy of handoffs, making the design easier to implement and adapt.
