Karma Numbers: website, PWA, Telegram and SEO in one platform

KARMANUMBERS is documented as an educational platform for an international Russian-speaking audience. It combines courses, practices, meditations, a member area, PWA and Telegram with administration and CRM tools. Design needs to maintain one identity while explaining what each person can do at every stage.

Organise the catalogue around participation

Courses, practices and meditations involve different ways of using content. KARMANUMBERS presents them as distinct material types. This helps visitors choose an experience suited to their time and interests before reading every product detail, rather than browsing an undifferentiated list of names.

Cards prioritise the name, material type, brief explanation and action. Full pages can add programmes, format and access conditions. Where duration or level information exists, present it consistently so visitors compare products using the same reference points and recognise what remains to be clarified.

Design the transition from presentation to membership

The project separates public information from material available after access is granted. Visitors explore the offer while signed-in users see their content. Design expresses that distinction through precise actions: viewing a course, requesting access and opening a lesson have different outcomes.

Draw the complete product journey: card, description, request or order, confirmation and member area. Every screen explains the next step. A receipt confirmation can describe pending review, while active access can lead directly to the available material.

In a design test, follow someone starting on a phone and later returning through Telegram. They should recognise the product and its state. Consistent titles, images and action names reduce the need to relearn the interface at each entry point and reinforce one coherent platform.

Build an atmosphere suited to reading

Visual identity can use colour, imagery and symbols while keeping the main text legible. Choose a limited scale of headings and paragraphs. Spacing shows which elements belong together and where a new idea starts, providing orientation throughout longer content.

Check contrast against actual backgrounds and text width on phones. Decorative headings can support atmosphere while explanations need familiar, clear letterforms. Reserve strong visual emphasis for important actions so navigation remains recognisable across long pages and different sections.

For spiritual material, identify its educational or interpretative nature. Numerology can be explained as a symbolic practice without scientific guarantees about the future. A clear editorial boundary in the presentation, maintained consistently throughout the product, provides the necessary context.

Make access states visible and explainable

KARMANUMBERS includes access following payment or approval, including defined periods. The member area should express active, pending and expired states through text rather than colour alone. People need to understand what they can open and where to request clarification.

In a hypothetical example, a course is active while a separate practice awaits confirmation. Show each state beside the corresponding product and provide the appropriate action. If the period starts when access is granted, explain that moment; if another rule applies, display the exact condition.

The application checks permissions, including media access. Design explains restrictions and recovery while implementation applies the same rules. Test active access, expiry and a different account so messages describe the actual situation instead of a generic error without a next step.

Treat the player as a central product feature

Meditations and media are used repeatedly, so the player deserves as much attention as the homepage. Display the material name, playback controls and loading state. When chapters or lesson order exist, show the relationship beside the material so learners understand their current place.

Test one-handed use, enlarged text and returning from another application. Prepare explanations for weak connections and unavailable files. Learners should be able to resume or seek help while retaining the context of the material they were trying to open or continue.

Use PWA and Telegram for return visits

The PWA and Telegram mini app are documented entry points. They support repeated phone use: returning to the member area, catalogue or content. Preserve the same navigation logic and access conditions even when the surrounding application has different controls.

PWA installation varies by browser and operating system, as the web.dev guide explains. Offer it after a useful interaction. Check offline behaviour separately: MDN documentation describes mechanisms, but each material type needs its own decision about local saving and applicable conditions.

Telegram: Give the bot and mini app different jobs

The bot suits brief conversation, action selection and notifications. A mini app can display a richer interface inside Telegram. For KARMANUMBERS, this distinction allows a simple chat menu and a catalogue or member area with more context in the web interface.

Sketch the main journeys before drawing buttons: exploring a course, opening available material and requesting help. Each needs a clear final state. Visitors can read descriptions while users with access continue their material. Actions differ because permissions and immediate goals differ.

Telegram: Connect Telegram identity to the right account

A display name can change and is not a reliable access key. Linking a platform account to Telegram identity requires an explicit verification flow. People should understand which account they are connecting and how to correct a mistaken association without losing existing materials.

Validate mini-app initial data on the server according to the Telegram Mini Apps documentation. An identifier sent directly by the browser is not sufficient authorisation. Establishing identity and checking permission to view a particular course are separate operations, even if the interface presents one smooth opening action.

Prepare support for someone using a different Telegram account from the one previously connected. A clear recovery route is more useful than repeatedly displaying “access denied”. Staff should verify the situation through the intended process without requesting a password or granting rights based on a matching name.

Telegram: Send notifications people expect

Separate access-related messages from news and promotion. Confirmation that material is available serves a different purpose from an offer for another course. Allow optional notification preferences and stopping, while explaining which information concerns important account changes.

Use an identifier for each planned notification so one change does not produce repeated messages. Check the state before sending: withdrawn access or a resolved request may make a message unnecessary. Record the sending outcome and provide a clear route for staff to investigate persistent delivery failures.

Design administration around team activities

The documented panel manages content, users, media and access, while the CRM follows enquiries and orders. Organise screens around reviewing a request, publishing material and granting permission. Tables support these tasks, but priority information should remain visible without searching through unnecessary columns.

Show the product, relevant person, state and consequence of a change. Access for a particular period should be easy to review before saving. History and roles let another colleague continue the work and reduce dependence on separate conversations that obscure why decisions were made.

SEO: Separate the reader's question from the course offer

An article might explain what a method means, while a course page describes its programme and participation. Those pages serve different intentions. Give each a clear role so search results lead to the information promised by the title rather than an unexpected commercial form.

In a hypothetical editorial example, an article about a symbolic practice explains the term, the approach's background and a reflection exercise. Its associated course page describes lessons, format and access. A link helps when it explains what readers can explore further and what the next step involves.

SEO: Build a small topic map

Start with the actual catalogue and questions received by the team. Group subjects into introductory explanations, methods, platform use and product descriptions. For each page, record its audience, principal question, sources and relationship to other content so the plan supports editorial decisions.

Avoid publishing several identical answers with only a number or phrase changed. When subjects overlap, combine information or explain the difference in purpose. A useful map lets writers identify what a page adds, which question it resolves and why readers need a separate page before drafting it.

SEO: Protect private content through authorisation

Material granted after payment or approval needs access checks. Public course pages and the member area have different addresses and rules. Account URLs, confirmations and temporary states should not compete with the public presentation in search results.

The noindex directive controls indexing, as described in Google's documentation, while authorisation protects material. Check pages and media files separately: hiding a link is insufficient if its file opens directly without permission. The distinction matters when staff publish new lessons.

Include canonical public pages intended for discovery in the sitemap. Exclude account states and personal addresses. When withdrawing a product, decide whether its description remains useful with an updated status or a genuine alternative, preserving a clear meaning for existing links.

PageSpeed Insights: 99 on desktop

Updated on 26 September 2026. We are adding two supplied PageSpeed Insights screenshots to the KarmaNumbers project presentation. The desktop report shows performance 99/100, accessibility 100/100, best practices 100/100 and SEO 92/100. FCP of 0.3 seconds and LCP of 0.7 seconds describe when the first content and the largest content element appear in this run. Total Blocking Time is 70 ms, CLS is 0 and Speed Index is 1.3 seconds.

These measurements complement the presentation of the platform’s visual identity and structure. The practical goal is to give visitors quick access to course information and their next steps on a visually stable page. The desktop screenshot’s SEO score is 92, shown separately from the other categories. Google’s PageSpeed Insights documentation explains what lab tests measure and how they differ from real-user data.

PageSpeed Insights: 88 on mobile

On mobile, the screenshot shows performance 88/100 and 100/100 each for accessibility, best practices and SEO. First content appears at 1.2 seconds and LCP is 3.8 seconds. Total Blocking Time is 40 ms, CLS remains 0 and Speed Index is 3.2 seconds. The results document the page’s strengths in this test while providing an LCP reference point for further mobile loading improvements.

Both reports are published in full, with links to the original images. Mobile and desktop tests use different conditions, and scores may vary between runs. They are not Google rankings and do not independently establish a real-user Core Web Vitals pass. KarmaNumbers is live and development continues. The implemented structure and the same reports also appear in the KarmaNumbers case study.

Verify the product through roles and tasks

Test as a visitor, learner and administrator. Ask people to find a course, open appropriate material and resolve a request. Observe hesitation, then correct labels, order or states. Use actual content, including long Russian titles and narrow screens, rather than only tidy short examples.

Measure confirmed requests and access grants separately from clicks. Nonessential tracking requires consent, and account information remains protected. The design goal is a journey each role understands: visitors choose, learners use material and the team can explain and administer access.