AuraHarmony is a native mobile app for iOS and Android — a software product of our own. Its website therefore had to do more than serve as a landing page: explain the product, carry content, support several languages and audiences, and stay closely tied to the product strategy.
The starting situation
For a digital product, a single download page is not enough in the long run. Alongside the app itself, features, background and related subjects needed to be conveyed clearly.
The website had to serve several purposes at once:
- explain the product
- guide visitors to the mobile applications
- publish content and background material
- carry several languages
- provide technical and legal information
- account for data protection while the architecture was being decided
- remain cleanly accessible to search engines
It was therefore treated from the outset as a part of the product in its own right, not as an accessory.
The goal
The web platform was to complement the mobile app without rebuilding its functionality in the browser. The focus was on clear product communication, the link to iOS and Android, multilingual content, blog and knowledge sections, technical SEO, a data-minimising architecture, controlled external dependencies and room to grow.
Website and app serve different purposes while remaining part of the same product environment.
Website and mobile app as one product environment
AuraHarmony is not an app with a separate marketing site attached. The application provides the actual functionality; the website concentrates on the product description, feature overviews, further content, blog and knowledge material, links to the mobile applications, data protection and legal information, and long-term discoverability through search engines.
Product and communication can therefore develop independently while staying connected in substance.
Multilingual from the start, not translated afterwards
AuraHarmony is not aimed solely at a German-speaking market. Support for several languages was therefore treated as part of the site structure rather than as a later translation of individual pages.
Each language version has its own content, metadata and URLs, and they are connected technically:
- language-specific pages at their own addresses
- localised product copy and navigation
- blog and knowledge content in each language
- canonical and hreflang relationships, including a default for unmatched languages
- language alternatives listed in the sitemap
The relationship between content stays traceable as the number of languages grows.
Content beyond the product description
A product website need not stop at features and download links. AuraHarmony therefore has an editorial section where subjects around the product and its wider context can be treated at greater length: articles, background material, explanations of features, and technical subjects such as architecture and data protection.
Articles are organised by category and maintained editorially in each language — the English section is not a mirror of the German one but a body of content in its own right.
Visible labelling of generated media
In the editorial section, generated images are labelled visibly as such. The origin of an image stays apparent to readers without their having to look for it in metadata.
Privacy by design
Data protection is not treated solely as a question of consent after the fact. Product and web architecture take into account which processing is actually necessary and which external dependencies are required. External services are included deliberately and governed through a consent solution.
The approach fits the offline-first design of the mobile application, where the essential functionality runs locally on the device.
Technical quality
Discoverability, maintainability and controlled dependencies are part of the work on a product website too. They include:
- structured, language-specific URLs
- canonicals and hreflang
- structured data
- a sitemap with language alternatives, and robots.txt
- redirection to the appropriate language version
- responsive rendering
- consent handling for external services
The route to the mobile applications
The website is where information turns into use: visitors learn about the product and then move on to the appropriate mobile application.
Website and app remain technically separate systems. The website neither duplicates the app's functionality nor builds a second application layer. That separation keeps complexity down and lets both systems develop independently.
The outcome
The result is a product website that brings product communication, several languages, editorial content, data protection and the link to the mobile app together in one architecture — without becoming a web version of the app.
The project illustrates a further principle of web development at EicDevCon: a product website should not be considered in isolation. Architecture, product, content, data protection and later development all have to fit together.
Technical overview
Product environment – web, iOS, Android Website – product pages, blog, knowledge content, several languages Discovery – canonical, hreflang, structured data, sitemap, robots.txt Privacy – privacy by design, controlled external services, data-minimising architecture Integration – product communication, mobile applications, web
