20 minutes read
This brief defines the structural architecture for Jocosa’s website. It establishes information architecture, user flows, content requirements, and technical boundaries.
This is NOT:
This IS:
Brand: Jocosa
Positioning:
Core Product Types (The Jocosa Icons):
Operational Reality:
From hollandcooper.com - Use for:
1. Le Chameau (lechameau.com/en-eu)
2. Ghurka (ghurka.com/collections/duffel-bags)
3. Holland & Holland (hollandandholland.com)
4. De Niro Boot Co (denirobootco.com/en/)
5. Voltaire Design (voltairedesign.com/us/)
[Logo] [Account] [Cart]
────────────────────────────────────────────────────────────────────────────
Explore Products Customization About Jocosa For Clubs Contact
Header:
[Hamburger] [Logo] [Cart]
Menu (full-screen overlay):
────────────────────────
Explore Products
Customization
About Jocosa
────────────────────────
For Clubs
────────────────────────
Contact
Shipping & Returns
────────────────────────
[Account]
Purpose: Position brand, orient visitor, offer clear paths
Section Breakdown:
| Element | Content | Designer Guidance |
|---|---|---|
| Image | Single product (Club Bag primary) | Full viewport, cinematic ratio. Lifestyle context preferred-bag in club environment, post-match, or travel moment. Avoid pure white studio. Natural light, warm tones. |
| Headline | Max 8 words | Centered or lower-third placement. Serif or refined sans. High contrast against image. |
| Subline | Max 15 words | Smaller, lighter weight. Same area as headline. |
| CTA | Single button | “Explore” or “Discover” - no hard sell language. |
Hero Image Rules:
| Element | Content | Designer Guidance |
|---|---|---|
| Text | 2-3 sentences on philosophy | Centered. Generous whitespace above and below (80-120px). Typography should feel editorial-consider larger body size here. Background: neutral (off-white, warm cream) not pure white. May include subtle texture. |
Content Direction:
| Element | Content | Designer Guidance |
|---|---|---|
| Layout | Two equal cards: “For Individuals” / “For Clubs” | Side-by-side desktop, stacked mobile. Equal visual weight critical-neither should dominate. |
| Imagery | Distinct imagery for each | Individuals: Single person with bag, personal moment, solo activity. Clubs: Group context, club environment, multiple bags, partnership feel. |
| CTAs | “Explore Products” / “Partner With Us” | Same button treatment for equality |
| Element | Content | Designer Guidance |
|---|---|---|
| Layout | Image left, text right (or vice versa) | Asymmetric balance. Image takes ~60% width. Large editorial product shot. |
| Image | Single product in context | Lifestyle, not catalog. Shows scale, use-case. Warm natural light. |
| Text | Product name + one-line description | Name as heading, description should mention use-case not specs. |
| CTA | “Discover” or “Learn more” | Subtle, not aggressive |
Rotation Strategy:
Reference: Le Chameau “The Icons” section
| Element | Content | Designer Guidance |
|---|---|---|
| Headline | “The Jocosa Icons” or similar | Creates clear break from above. Consider subtle separator line or background color shift (per Holland Cooper style). |
| Layout | 4 cards: Club Bag, Weekend Bag, Daily Sports Bag, Racket Case | Horizontal scroll mobile, 2x2 or 4-across desktop. Each card self-contained. |
| Card Contents | Image + Name + One-line description + CTA | Image: Product hero shot, consistent angle/lighting across all four. Name: Product type (not SKU). Description: Function-focused (e.g., “Handcrafted for the court” or “Your weekend essential”). CTA: “Discover” links to filtered view or PDP. |
Visual Treatment:
| Element | Content | Designer Guidance |
|---|---|---|
| Format | 3-4 horizontal indicators | Icons + short text. Single row desktop, may stack mobile. |
| Content | Shipping, Returns, Craft/Quality, European production | Keep text minimal-“Free Shipping EU” not lengthy explanation |
Visual Treatment:
Homepage Prohibited:
Purpose: Allow product discovery without overwhelming
Required Sections:
| Element | Content | Designer Guidance |
|---|---|---|
| Headline | Max 5 words | “Explore Our Collection” or similar. Understated. |
| Subline | Optional, max 20 words | Sets mood, not hard sell |
| Element | Content | Designer Guidance |
|---|---|---|
| Layout | 2-4 image links | “For the court” / “For the weekend” / “For daily sports” etc. |
| Imagery | Each card shows relevant context | Designer note: Images should communicate use-case without text being necessary. A “weekend” image might show travel context, airport, hotel. A “court” image shows sports club environment. Consistent image ratio and treatment across all cards. Warm tones, natural light, lifestyle feel. |
| CTA | Category name as link | Clicking filters view or scrolls to relevant products |
| Element | Content | Designer Guidance |
|---|---|---|
| Layout | Editorial, not grid | Alternating layouts: image-left/text-right, then image-right/text-left. Creates visual rhythm. |
| Products | 1-4 products max | Each gets full editorial treatment |
| Card Content | Image + Name + CTA | Lifestyle images preferred. Size should be apparent from context. |
Explore Page Prohibited:
Purpose: Build confidence, enable purchase
Required Sections:
| Section | Content | Rules |
|---|---|---|
| Gallery | 3-6 images | Lifestyle + detail, zoomable |
| Product Title | Name only | No taglines |
| Price | Clear display | Single price |
| Variant Selectors | Per variant rules | Max 2 visible axes |
| Add to Cart | Single button | Clear state changes |
| Description | 2-4 sentences | Benefit-focused |
| Details | Materials, dimensions, care | Expanded |
| Shipping Info | Lead time, dispatch notes | Expanded |
| Personalization | If applicable | Refference: https://www.misela.com/products/lyna-at-anatolia-brdx-os-fw25 |
Prohibited:
Purpose: Lead generation for club partnerships, wholesale, and private label inquiries
Required Sections:
| Section | Content |
|---|---|
| Headline | Club/partnership-focused, max 10 words |
| Audience Definition | Who this is for (3-4 bullets max) |
| Partnership Types | Wholesale and Private Label with brief descriptions |
| Process Overview | 3-4 steps, linear |
| Trust Signals | 2-3 credibility points |
| Inquiry Form | Full form per specification |
| Direct Contact | Email alternative |
Wholesale
Private Label
Note: Co-branding removed from offering
Inquiry Form Fields:
| Field | Required |
|---|---|
| Club/Company name | Yes |
| Website | No |
| Contact name | Yes |
| Yes | |
| Phone | Yes |
| Country | Yes |
| Partnership type (Wholesale/Private Label) | Yes |
| Estimated volume | No |
| Timeline | Yes |
| Message | No |
| How heard about us | No |
Post-Submission:
Prohibited:
Purpose: Set expectations, prevent operational chaos
Required Sections:
| Section | Content |
|---|---|
| Headline | Philosophy-focused |
| Philosophy | 2-3 sentences on approach |
| Tiers Overview | What’s possible at each level |
| Limitations | What Jocosa doesn’t do |
| Next Steps | How to inquire |
| Contact CTA | Form or link |
Customization Tiers:
| Tier | Name | Availability |
|---|---|---|
| 0 | Standard | All customers, immediate ship |
| 1 | Personalization | All customers, +X days |
| 2 | Custom Selection | Qualified customers, made to order |
| 3 | Bespoke | B2B/VIP only, project-based |
Phase 1: All tiers explained via content only. No configurators. All paths lead to contact.
Prohibited:
Purpose: Establish brand identity
Required Sections:
Prohibited:
Purpose: Build quality perception
Required Sections:
Prohibited:
Purpose: Build purchase confidence
Required Content:
| Topic | Content |
|---|---|
| Dispatch | Orders dispatch within 48 hours |
| Shipping destinations | List of regions/countries |
| Delivery timeframes | By region |
| Shipping costs | Or free shipping thresholds |
| Returns window | X days |
| Returns process | Step-by-step |
| Condition requirements | What qualifies |
| Refund timeline | X business days |
Format: Clear sections, scannable, no legal jargon where avoidable
Purpose: Extend product life, reduce returns
Required Content:
Purpose: Enable communication
Required Sections:
Prohibited:
Required Pages:
Access: Footer links
Format:
Throughout the site, use visual section separators to create rhythm and break between content types:
Types:
When to use:
| Format | Where | Rules |
|---|---|---|
| Single hero feature | Homepage, landings | One product, full-width, editorial |
| Use-case entry points | Explore | Links to curated views, not categories |
| Editorial story | Explore | Image + text + single product |
| 2-product comparison | Explore (rare) | Size comparison only |
| Icons grid | Homepage | 4 product types, not individual SKUs |
| Variant Type | Display | Limit |
|---|---|---|
| Color/Material | Visual swatches | Max 5 visible, “+X more” for overflow |
| Hardware finish | Swatches or dropdown | Max 3 |
[Newsletter signup - full width]
Column 1: Shop Column 2: About Column 3: Help Column 4: Connect
- Explore - Our Story - Shipping & Delivery - Contact
- Customization - Craft & Materials - Returns - Instagram
- Sustainability - Care Instructions
- FAQ
────────────────────────────────────────────────────────────────────────────────
© Jocosa [Year] | Privacy Policy | Terms | Cookie Settings
Accordion structure for each column, stacked bottom bar.
Homepage → Hero interest → "Explore Products" → Browse → Product click → PDP → Add to cart → Checkout → Confirmation
Direct PDP link → Evaluate → Variant select → Add to cart → Checkout → Confirmation
Homepage "For Clubs" → B2B landing → Review offerings → Inquiry form → Submit → Confirmation → [Manual follow-up]
PDP or Nav → Customization page → Understand tiers/limits → Contact CTA → Submit → [Manual response]
Email link or Footer → Returns page → Understand policy → Contact or initiate → [Process]
| Element | Desktop | Mobile |
|---|---|---|
| Navigation | Horizontal bar | Hamburger |
| Product images | Gallery with thumbs | Swipe carousel |
| Variant selection | Side-by-side | Full-width, larger targets |
| Footer | Multi-column | Accordion |
| Forms | Multi-column possible | Single column always |
| Icons section | 4-across or 2x2 | Horizontal scroll |
Show with editorial treatment. Never “1 product” count.
Keep page, show message, offer notification signup.
Show greyed, selectable with “unavailable” message. Don’t hide.
Always 301 redirect old to new.
"This page doesn't exist"
"It may have moved or been removed."
[Explore our collection]
[Return to homepage]
Tone: Matter-of-fact, not cutesy.
"Nothing here yet."
[Explore our collection]
[Product name]
"This product is no longer available."
[Explore current collection]
[Looking for something similar? Contact us.]
| Area | Detail |
|---|---|
| B2C e-commerce | Full flow via Shopify |
| B2B lead generation | Shopify static + inquiry form |
| Customization explanation | Content + contact |
| Standard pages | All defined above |
| Guest checkout | No account required |
| Optional accounts | Post-purchase only |
| Newsletter | Email capture |
| Analytics | Shopify + GA4 |
| Trigger | Threshold | Addition |
|---|---|---|
| B2B inquiries | >20/month qualified | B2B portal |
| Product count | >30 | Search |
| Return customers | >25% orders | Wishlist, accounts |
| Customization requests | >15/month | Tiered intake, configurator |
| Traffic | >50k/month | Performance optimization |
| System | Purpose |
|---|---|
| Shopify | E-commerce |
| Email platform (Klaviyo) | Newsletter, transactional |
| CRM | B2B inquiry management |
| GA4 | Analytics |
| Cookie consent | GDPR |
| Shipping app | Labels |
Shopify + Headless B2B
| Version | Date | Changes |
|---|---|---|
| 1.0 | 09 Jan 2025 | Initial consolidated brief |
| 2.0 | 23 Jan 2025 | Refined: “For Clubs” terminology, B2B (Wholesale + Private Label only), 48h shipping dispatch, Icons section added, enhanced designer guidance, reference sites documented |
Prepared by: Nikolay Panev
End of Brief