A product website for a technology offering
The product website was designed to help visitors understand a technology offering and choose their next step: explore use cases, review the offer, watch materials or contact the company. Content and media are organized across a set of related pages.
The work covered discovery, structure and interface design, development of individual pages, deployment and maintenance. Reusable elements make it easier to publish new content without designing each page from scratch.
- Who it serves
- People exploring the technology, comparing the offer or looking to contact the company.
Paths through the website
Visitors arrive with different questions. Some want a quick introduction to the product’s capabilities; others need details of the offer, resources or a conversation with a representative. The site structure supports each of these paths.
- Presentation
- Pages explain product use cases using visual materials and video.
- Offer and resources
- Pricing information and resources help visitors explore the available options.
- Contact and meetings
- Forms direct enquiries to the company, and a separate path lets visitors begin scheduling a meeting.
Different questions, different resources
This overview presents three ways to explore the product website.
- Use cases
- Product descriptions, images and video introduce its uses.
- Offer and resources
- Resources help visitors understand the offer.
- Contact
- A form and a meeting path support a conversation.
Text, images and video
The work involved bringing text, images and video together in a readable layout for phones and larger screens. The offer, resources and contact forms each have a place in the navigation, so visitors can move from learning about the product to getting in touch.
- Media performance
- Image and video loading takes their position on the page into account to avoid unnecessarily delaying the initial view.
- Responsive interface
- Shared components and layout rules adapt pages to different screen widths.
Content across screen sizes
This layout illustration shows how text and visual material can be arranged on narrow and wide screens.
- Text
- Explains the uses and offer.
- Image
- Adds visual context.
- Video
- Presents the product in motion.
- Screen width
- The layout adapts the arrangement of content.
Preparing and publishing pages
The work began by identifying the information visitors need at different stages of learning about the product. Page layouts, interface elements and contact integrations followed. Pages were developed in stages using shared presentation rules.
The publishing process includes preview and staging environments and a separate production release. This provides a place to check changes before they reach visitors. Maintenance also includes updating materials, checking links and keeping forms working.
Scope of responsibility
Atomic Concept is responsible for discovery, structure, interface and integration design, development, deployment and website maintenance.
- Further publishing
- Content configuration and shared components support new pages with a consistent layout.
Changes on the way to publication
These stages show where changes can be prepared and checked before reaching visitors.
- Preview
- A place to review prepared changes.
- Staging
- An environment for checks before release.
- Production
- A separate release for website visitors.
Website foundations
The site uses Next.js static export and is hosted on Cloudflare Pages. Generated pages can be delivered without running a dedicated application server for each visitor.
Page content is separated from React and MUI components. This allows shared layouts to serve different sets of information. Forms use contact integrations and Cloudflare Turnstile protection.
- Search visibility
- Metadata, canonical URLs, a sitemap and structured data help search engines interpret published pages.
- Change review
- Preview and staging provide a place to check content and interface behavior before a separate production release.
Technologies and their use
- Next.js, React and TypeScript
- Static pages and website components.
- MUI
- Shared interface elements and layouts.
- Cloudflare Pages and Turnstile
- Page hosting and form protection.