Skip to main content

User Interface (UI)

📄 Document Information​

  • Version: 5.1
  • Date: 2025-04-08
  • Author: Inner Journey Team
  • Last Revised By: Inner Journey Team

🎯 Purpose​

The user interface (UI) for Inner Journey serves as a seamless extension of the platform’s core value: a practical, engaging, and personalized self-development experience. This document outlines the overarching design principles and visual identity that guide the UI across all user touchpoints, ensuring a cohesive and intuitive journey.

The goal is to create a design that feels modern, welcoming, and purposeful, enabling users to focus on their personal growth while supporting our financial objectives through increased engagement and premium conversion (target: 10% of 10,000 users, generating 594,000 SEK in 2025, see Revenue Model and ROI). The UI reflects our Frontperson’s community engagement—such as retreats and events—through warm, inviting visuals and prompts that encourage users to explore premium features and connect with the community. For a broader overview of Inner Journey’s vision, see Project Description: Inner Journey.

📐 Design Principles​

The UI of Inner Journey is built on a set of core principles that create a consistent and meaningful experience across the platform. These principles ensure that the design supports the user’s journey while fostering a sense of connection and growth:

  • 🧹 Minimalism: A clean and uncluttered layout that prioritizes functionality, allowing users to focus on their personal growth without distractions.
  • 🎯 Clarity: Intuitive navigation and clear calls-to-action (e.g., "Start Your Journey," "Join Our Community") guide users effortlessly through their experience.
  • 💖 Empathy and Warmth: The design feels approachable and supportive, mirroring the empathetic tone of our Frontperson’s community engagement, with visuals that evoke a sense of belonging.
  • 🌈 Dynamic Expression: Subtle use of gradients and color transitions reflects the journey of growth, creating a sense of progression and vitality.
  • ⚖️ Balance: A harmonious blend of structure and openness, ensuring the design feels modern yet accessible, with enough whitespace to avoid overwhelming the user.
  • 🔮 Inspiration: The UI inspires curiosity and exploration through thoughtful visual cues, encouraging users to engage with activations, community events, and premium features.

🖌️ Visual Elements​

The visual identity of Inner Journey is designed to be cohesive and evocative, creating a "red thread" that ties together all parts of the user experience.

🖌️ Visual Elements​

The visual identity of Inner Journey is designed to be cohesive and evocative, creating a "red thread" that ties together all parts of the user experience.

Colors 🎨​

The color palette is inspired by the journey of self-discovery, using gradients to evoke a sense of transition and growth:

  • Primary Gradients:
    • Warm tones for foundational pages (e.g., Backbone): A gradient from peach (#FFDAB9) to vibrant orange (#FF9F43), symbolizing warmth and invitation.
    • Cool tones for journey-focused pages (e.g., Journey, Team): A gradient from deep blue (#1A2A44) to light cyan (#A3D8E6) or soft blue (#E6F0FA), representing depth and clarity.
  • Text and Contrast:
    • Black text (#000000) on light backgrounds for readability.
    • White text (#FFFFFF) on dark backgrounds for contrast.
  • Accent Colors:
    • Vibrant orange (#FF9F43) for primary actions (e.g., "Start Your Journey" buttons), creating a sense of energy and encouragement.
    • Soft green (#00A676) for secondary actions (e.g., "Maybe Later" links), offering a calming contrast.

Typography 📰​

Typography is chosen to balance modernity and readability, ensuring a professional yet approachable feel:

  • Headings: A modern sans-serif font in bold weight (e.g., 700) for a clean and contemporary look, ensuring clarity in titles and key messages.
  • Body Text: A regular-weight sans-serif (e.g., 400) for easy readability, with a spacious feel that aligns with self-development platforms.
  • Sizes: Headings at 18pt, body text at 14pt, and secondary text (e.g., footnotes, status messages) at 10pt.

Icons & Graphics ✨​

Icons and graphics are minimal yet expressive, enhancing the UI without overwhelming the user:

  • Icons: Simple, line-based icons in a monochromatic style, with subtle color accents (e.g., orange #FF9F43) for active or focused states.
  • Graphics: Abstract shapes (e.g., circles, soft lines) used sparingly as background elements, adding a touch of dynamism while maintaining a clean aesthetic.

🧱 Structure & Layouts​

The UI is structured to guide users through their journey with clarity and purpose, ensuring each section of the platform feels cohesive and connected.

Homepage 🏠​

  • Purpose: Serve as the entry point, inviting users to begin their journey or explore the community.
  • Layout: A full-width hero section with a gradient background (e.g., warm peach-to-orange or cool blue-to-cyan), featuring a bold headline, a short description, and a prominent call-to-action (e.g., "Start Your Journey").
  • Community Prompt: A secondary call-to-action (e.g., "Join Our Community") linking to community events led by our Frontperson, styled with a soft green accent.

Onboarding 🚀​

  • Purpose: Create a welcoming and personalized introduction to the platform.
  • Layout: A step-by-step flow with one question per screen, using a gradient background (e.g., blue-to-cyan) and a progress indicator to show advancement.
  • Visual Cues: Clear, empathetic prompts (e.g., "Tell us about yourself") with a primary action button in vibrant orange to encourage completion.

Activations 🧘​

  • Purpose: Provide a focused environment for users to engage with self-development exercises.
  • Layout: Card-based design with rounded corners, a clean background (e.g., white or light blue), and a prominent start button in orange. Instructions and progress indicators are clearly visible.
  • Community Integration: Post-activation prompts (e.g., "Share your experience on The Net") encourage social engagement.

Journaling ✍️​

  • Purpose: Offer a space for reflection and personal logging.
  • Layout: A minimalist text editor with rounded edges, featuring subtle prompts (e.g., "What did you notice today?") and a save button that highlights in orange when active.

Social Network ("The Net") 💬​

  • Purpose: Foster community connection and interaction.
  • Layout: A chat-style interface with a contact list and conversation threads, using a clean layout with gradient accents on active elements.
  • Community Events: Highlighted prompts for Frontperson-led events (e.g., "Join Our Next Retreat!") with a soft green call-to-action.

Premium Upsell 💰​

  • Purpose: Encourage users to explore premium features.
  • Layout: A prominent card with a gradient border (e.g., orange), featuring a clear message (e.g., "Unlock More with Premium – Try 7 Days Free!") and a vibrant orange button. A secondary "Maybe Later" option in soft green allows users to continue with the free version.

💰 Supporting Financial Goals​

The UI design is crafted to drive user engagement and premium conversion, supporting our financial goal of 594,000 SEK from freemium in 2025 (10% of 10,000 users at 99 SEK/month, see Revenue Model and ROI). Key strategies include:

  • Intuitive Navigation: A minimalist layout with clear calls-to-action reduces friction, ensuring users complete onboarding and engage with activations.
  • Engaging Visuals: Dynamic gradients and empathetic design create a welcoming experience, encouraging users to explore premium features.
  • Premium Upsell Integration: Visually prominent upsell prompts (e.g., "Unlock More with Premium") increase conversion likelihood.
  • Community Focus: Prompts for Frontperson-led community events foster a sense of belonging, encouraging users to stay active and convert to premium.

🔗 Related Documents​

For additional context and detailed information, refer to the following documents:

  • Project Description: Inner Journey
  • Activations: Inner Journey
  • Technical Documentation for Frontend (for implementation details, including animation libraries)
  • Onboarding R2: Vision and Flow
  • User Flow (R1)
  • Database Structure
  • Revenue Model and ROI
  • Payment and Payout Management