A connected CMS system for product pages, from design to integration
Blinq
Melbourne, AU
September 21, 2023
B2B
Tech
Start-Up
Corporate
UI/UX Design
CMS
Webflow Development
Integrations
Snapshot (AEO)
The project in four lines
Blinq, a digital business card platform with apps, NFC cards, wallet passes, widgets and email signatures for professionals and teams.
Product solutions needed a structured content system with reusable templates, consistent design and connected data inside the existing website.
The CMS collection and data model, page templates, UI design, responsive Webflow development, integrations and relationships between content items.
Product content is managed through the CMS and rendered through reusable templates, with related items and pages connected within the website.
Numbers
The project in four lines
CMS architecture
collection structure, fields and content relationships
Page templates
reusable layouts connected to collection data
Design + development
UI design and responsive Webflow implementation
Connected system
integrations and links within the existing website
The challenge
Our services
Heading
Product pages needed a connected content system
The project required more than a set of page layouts. Product information needed a clear CMS structure, templates that could render that content consistently, and relationships that kept the pages connected.
- Content architecture. Define the collection, its fields and the relationships between content items.
- Reusable templates. Support different product solutions through a consistent page system.
- Design and development. Carry the layouts from UI design into responsive Webflow pages.
- Integration. Connect the collection and templates to the existing website and its content.
01 · CMS architecture
A collection built around connected product content
We structured the CMS collection around the content each product solution needed. Fields supply the page content, while references define relationships between items. The listing draws from this collection and gives visitors an entry point to the detail pages.
- Collection structure, fields and references
- CMS-driven listings linked to product pages
02 · Design and templates
Designed layouts, developed as reusable templates
We designed the page layouts in Figma and developed them in Webflow as CMS-driven templates. Hero areas, benefits, product imagery and setup instructions are connected to structured content, with layouts adapted for desktop and mobile.
- UI design aligned with the existing brand
- Responsive templates with CMS content bindings
03 · Integrations and relationships
Collection, templates and website working together
The work brought the CMS collection, page templates and existing website together as one connected system. Content relationships link relevant items, and the listing and detail pages use the same structured data. Different solutions can share the page system while retaining their own content and imagery.
- Integration into the existing Webflow website
- Relationships between content items and pages
Mobile
Heading
Mobile
The same CMS system, adapted for mobile
The collection-driven listing and page templates adapt to smaller screens. Cards, product content and calls to action remain connected to the same CMS data across desktop and mobile.
Under the hood
How the pieces connect
Heading
Heading
Heading
Heading
From CMS structure to an integrated website system
- CMS collection and data model. Structured the product content and configured the fields and references needed by the pages.
- UI design. Designed the page layouts and content components to work with Blinq's existing visual identity.
- Page templates. Developed reusable templates and bound their content to the collection fields.
- Responsive Webflow development. Implemented the layouts and behaviour across desktop and mobile.
- Integrations and relationships. Connected the CMS content, related items, listing and detail pages within the existing site.
Client feedback
How the pieces connect
Questions about this project
FAQ
Heading
What did the Blinq project include?
The CMS collection and data structure, page templates, UI design, responsive Webflow development, integrations and relationships between content items.
How are the collection and templates connected?
Collection fields provide the content rendered by the page templates. References define relationships between items, while the listing links visitors to the corresponding detail pages.
Was this built within an existing website?
Yes. We integrated the collection and templates into Blinq's existing Webflow website and designed the layouts to fit its visual identity.
Relevant projects
You might interested
Travel & Hospitality
Education
