Design case study · Books & eCommerce
An editorial introduction to a book-led storefront.
A website experience for readers browsing books and exploring a publishing brand.
- Client
- WorkingGram
- Industry
- Books & eCommerce
- Scope
- eCommerce Website Design
The challenge
Give the right information a clear place.
A book collection needs more than a product grid. The design has to make individual titles easy to explore while giving the wider brand an editorial identity that connects browsing with a purchase decision.
Our design focus was editorial presentation, products & responsive shopping. The project brings the opening message, supporting content and next-step actions into a connected website presentation.
Project goals
What the website needed to do.
Introduce the collection clearly
Give books and supporting stories room
Connect discovery with product detail
Visitor journey
From a question to a clear next step.
The content sequence follows the decisions a visitor needs to make while exploring WorkingGram.
- 1
Meet the collection
→ - 2
Browse the titles
→ - 3
Explore a book
→ - 4
Follow the purchase path
Design decisions
The decisions behind the design.
Let the collection lead
Use the opening presentation to establish the books as the main subject and give the collection a recognizable visual identity.
Balance editorial and product content
Bring story-led sections and collection views together so readers can browse.
Keep the next action legible
Maintain a clear hierarchy between browsing, product information and purchase-oriented actions.
Design system
One visual language across the experience.
Supporting detail in readable sections.
Follow the purchase pathHeadings · content · next stepA clear reading order
The opening establishes the subject; the following sections build the detail.
Repeatable content patterns
Related information uses familiar headings, spacing and section structures.
A distinct primary action
The visual hierarchy keeps “follow the purchase path” recognizable as the next step.
Website in motion
Explore the website in motion.
A closer look at the WorkingGram page experience through the available scrolling films.
The page experience
A closer look at the finished presentation.
Explore the project imagery alongside the full portfolio presentation.
Responsive presentation
Clarity on a smaller screen.
The device imagery presents the visual direction. The priorities for smaller screens are simple navigation, readable information and a recognizable next step.
Simple navigation
Keep the route to relevant information short and understandable.
Readable content
Preserve the order of headings and supporting detail.
Clear contact paths
Give the primary next step a visible, consistent place.
What we delivered
A connected website experience.
The documented project brings together the following design work and presentation assets.
- eCommerce UX/UI
- Responsive Design
- Product Presentation
- Content Structure
- Portfolio imagery
- Scrolling website showcase
Design outcomes
What the design brings together.
A connected page story
Introduce the collection clearly.
A repeatable content system
Give books and supporting stories room.
A recognizable next step
Connect discovery with product detail.
These are qualitative design outcomes. Business performance, conversion changes and client results are not quantified in this case study.
More project stories
Explore more case studies.
Your next project
Could your website make the next step clearer?
Let’s create a focused website experience around your audience and goals.