Swiss-Ski Store Content Block UX & Design Revamp

**Client:** Swiss-Ski Store (store.swiss-ski.ch) **Project type:** Modular content block / landing page design system **Format:** Figma **Engagement:** Freelance, e-commerce UX/UI specialist --- ## 1. About Us Swiss-Ski Store (store.swiss-ski.ch) is the official online retail store connected to Swiss-Ski, selling apparel, headwear, wax, accessories and fan merchandise. The store runs on a custom Next.js frontend with Storyblok as CMS. ## 2. Project Background Over time, our store landing pages and category pages have accumulated a large number of content blocks. Many are outdated and no longer used — we are cleaning those out ourselves and they are **not** part of this project. The blocks that remain and matter, however, were never designed as a proper system: they look inconsistent, aren't built mobile-first, aren't always intuitive to use, are partially buggy, and don't convert as well as they should. This project is about fixing that. This is primarily a **visual design and interface project** — not a redesign of the full customer journey, product pages, or checkout. The focus is on the modular content blocks used to build landing pages and category pages. ## 3. Project Goal Design a clean, modular system of **10–15 reusable content blocks** (not 50+), each with multiple layout options/variants, that we can combine to build modern, high-converting, mobile-first landing pages ourselves — without designing every page from scratch. The result should: - Be mobile-first (design mobile, then adapt to desktop) - Look modern and premium — not like a generic e-commerce template - Be easy to scan and navigate - Feel emotionally connected to winter sports - Work for many different contexts: partners, athletes, events, seasonal campaigns, product launches - Stay realistic to implement in an existing e-commerce environment - Stay visually close to our current corporate design (see Section 7) — this is a refinement of our design language, not a rebrand ## 4. Key Feature: "Shop-in-Shop" Pages Beyond the general landing pages, we want to be able to build **"shop-in-shop" pages**: category or campaign pages that carry their own distinct visual identity while still being built from the same modular block library. Examples: 1. **FIS Alpine Ski World Championships, Crans-Montana 2027** — this event has its own brand identity, based on blue rather than Swiss-Ski red. 2. **FZero** — our own ski wax brand, which has its own logo, tone, and content types (see the case study in Section 6; corporate design attached separately). 3. **Athlete pages** — e.g. a Marco Odermatt page, which should feel styled to that athlete's personal look and feel. **What we need from you:** each content block should support a degree of "theming" — e.g. swappable accent colors, imagery treatment, and typographic emphasis — so a shop-in-shop page feels distinct and on-brand for that partner/athlete/event, while remaining structurally the same reusable block underneath. We are not asking for entirely separate design systems per case, but a flexible skinning layer on top of one consistent module library. Please show how this would work by designing at least one block (e.g. the Header and the Image+Text module) in 2–3 different "skins" — for example: default Swiss-Ski Store, Crans-Montana 2027 (blue), and FZero. ## 5. Required Content Modules Please design the following modules. For each, explore 2–4 layout variants and define both mobile and desktop versions. ### a. Header Variants to explore: - Full-width campaign image - Image with text overlay - Split image and text layout - Video hero - Hero with a featured product Mobile version must clearly define readable areas for text, logo and buttons. ### b. Product Slider A mobile-friendly horizontal product slider, reusable for: bestsellers, new products, limited editions, athlete collections, event merchandise, recommended products. Product cards should show image, name, price, badges (e.g. "New", "Limited"), and a clear link to the product page. ### c. Product Grid A flexible grid for curated collections, categories and campaign products. Explore: a standard grid, a "featured product" layout, and a combination of product cards with editorial images. ### d. Image + Product Combination Connects lifestyle/event photography with selected products. Examples to design for: - Athlete image with matching merchandise - Event image with related products - Large image with one or more linked products - Editorial content combined with product cards ### e. Image + Text Content Reusable editorial module for collection stories, athlete profiles, event information, product features, brand/partner content. Define mobile and desktop layouts and recommended text/image proportions. Must include a button/CTA linking to a product or category page. ### f. Video Module For product tutorials (with a focus on FZero wax tutorials), product care, athlete interviews, event content, product presentations. Should include: thumbnail, title, description, play button, and related products. ### g. Text & Information Module A flexible content module for informational content without products or images — e.g. FAQs, wax tips, product care instructions. Should support: - Headlines and body text - Bullet points - Links and CTA buttons - Highlighted info/tip boxes - Single-column mobile layout, optional multi-column desktop layout ### h. Retailer Directory & Offline POS A mobile-friendly store/event locator, supporting: map and list view, search by city/postal code, location filters, address/contact details, and temporary/pop-up event locations (e.g. merchandise stands at races or the World Championships). ### i. News/Editorial Feed *(new — see Section 6)* A feed-style module for recurring editorial content: a list of short articles/posts with thumbnail image, date, tag/category (e.g. "Wax Tip"), title, short teaser text, and a "view all" link. Needs a compact variant (sidebar/list of headlines) and a richer variant (image + teaser). ### j. Social / Community Links *(new — see Section 6)* A compact module linking out to our community channels (e.g. WhatsApp channel, Instagram, Strava). Simple, icon/label based, should work as a small sidebar block or a horizontal strip. ### k. Column Block A flexible layout module with **2 to 6 columns**. Each column can contain text, an image, or other nestable content blocks (e.g. a small text+CTA, or an image). Used as a general-purpose layout building block wherever we need flexible content arrangements that don't fit the more specific modules above. Modules (i) and (j) emerged from a reference example (Section 6) and are not in our original list — feel free to propose merging them into other modules if that keeps the system cleaner, as long as the functionality is covered. ## 6. Reference Example: FZero Shop-in-Shop FZero is our in-house ski wax brand and a good real-world example of a "shop-in-shop" page. It has its own content needs, which our team sketched out as a rough outline: product finder, wax categories, tools, application videos, wax recommendations, an events/courses calendar, a "where to buy" locator, a B2B contact block, and an FAQ. FZero's corporate design (logo, colors, imagery style) is attached separately. Use this as a case study to sanity-check the module list above: most of it maps to the modules in Section 5 (Header, Product Grid, Video, Text & Info, Retailer Directory), plus the News/Editorial Feed and Social Links modules noted above. Please treat this as inspiration for how a shop-in-shop page comes together — not as a fixed spec. ## 7. Design Direction & Brand Visual direction should be: - Mobile-first - Modern - Premium - Emotional - Clear - Dynamic Important constraint: the result should **not** look like a generic e-commerce template, but it also should **not** diverge too far from our current store design — we want a refinement and systemization of our existing visual language, applied consistently, not a full rebrand. We will share our corporate design guidelines and brand assets, plus screenshots of the current store, at project start. ## 8. Navigation (Separate, Secondary Workstream) As a smaller, separate workstream, we'd also like recommendations on our overall shop navigation — simplifying the structure, improving mobile usability, better product categorization/discoverability, and a clearer menu hierarchy. This is lower priority than the content block system above and can be addressed after or alongside it. ## 9. Deliverables - A Figma file containing the 10–15 content modules, each with: - Mobile and desktop layouts - All relevant variants - Clear naming and light documentation (what each variant is for) - A short theming guide showing how a module adapts across "skins" (colors/imagery/type), demonstrated on at least one module in 2–3 skins (default Swiss-Ski, Crans-Montana 2027, FZero) - Full example landing pages assembled from the modules, to show the system working end-to-end: - A landing page for **Crans-Montana 2027** - A landing page for **FZero** - If feasible within scope/budget, a well-converting **general store homepage/start page** (default Swiss-Ski Store look) ## 10. Out of Scope - Product detail pages and checkout flow - Full customer journey redesign - Technical/CMS implementation details — we will evaluate technical feasibility internally; please focus on UX functionality and visual design ## 11. Ideal Candidate - Strong UX/UI design experience - Mobile-first e-commerce design background - Experience building landing pages and modular design systems - Experience with product/merchandise presentation - A genuine feel for winter sports, merchandise and fan culture is a plus ## 12. What We'll Provide - Corporate design guidelines / brand assets (Swiss-Ski Store) - FZero corporate design guidelines / brand assets - Screenshots and access to the current live store - Point of contact for questions during the project