Welcome to the Day 5 of AFFiNE 0.11.0 Launch Week! On this final day, we are thrilled to present the meticulously crafted onboarding design that embodies our special dedication. From the establishment of design goals through the entire process of planning and finalization, highlighting innovative aspects, and discussing topic choices, to the ultimate results in the form of a video – we aim to share with you every facet of our design philosophy!

Start with Design Philosophy: Unveiling the Essence of Our Approach

The Crucial Role of Onboarding in Your Engagement Journey

In the dynamic realm you're part of, we understand the paramount importance of a seamless onboarding experience. With the evolution of technology and rising expectations, initial interactions wield profound influence, shaping perceptions and long-term engagement. This meticulously crafted onboarding process serves as a gateway, not only unveiling features but laying the foundation for an active and engaging journey. It doesn't just reveal functionalities; it ignites a path towards proactive involvement.

Design Objectives

"We become what we behold. We shape our tools and then our tools shape us."

We got so tired of the traditional SaaS who always wanted to extract as much information as they can as if humans could be all easily classified into a few occupations. We want our tool to be humanized and we want you to have a direct feeling about it when you open it for the first time. So instead of asking you endless questions about who you are, we choose to give you five articles we love the most from a variety of areas, hoping to become closer to you by letting you choose what knowledge you'd love to start with AFFiNE. Hope you can enjoy them as much as we did.

Philosophy Reinvented - The Essence of "Aha Moment"

In AFFiNE, we strive to make you experience that the integration of whiteboard and documents goes beyond a simple overlay of functions. It signifies the emergence of a new collaboration and inspiration paradigm, offering key advantages.

Firstly, seamless integration allows you to handle documents and whiteboard within a single interface, enhancing efficiency.

Secondly, the fusion of a freeform whiteboard with structured documents sparks creative thinking, fostering your creativity.

Thirdly, it promotes enhanced team collaboration through collective editing.

Lastly, visualizing complex information on the whiteboard improves understanding and communication skills.

Local-First Approach: Transforming Data Processing for Enhanced Security and Efficiency

AFFiNE underscores the value of a local-first approach, prioritizing offline capabilities, seamless cross-device experiences, and data security, privacy, and long-term preservation. This strategy addresses traditional SaaS challenges, offering a more secure, private, sustainable, and user-controlled data processing solution. AFFiNE's product differentiation not only provides a unique market position but also ensures users experience minimal disruptions, fostering increased work efficiency and greater control over their data throughout usage.

Postponed Questionnaire: We Want to Know More About You

We value your thoughts and habits, so when you start using AFFiNE, this questionnaire will guide you in sharing information about your work habits, technology preferences, and desired features. Designed for simplicity, this survey ensures a quick completion while gathering valuable insights into your needs. Your input not only tailors personalized recommendations but also guides AFFiNE in meeting your expectations with precision in future updates.

A Visual Symphony - Crafting an Intuitive Design

Navigating the Planning Stage and Draft Showcase

In the initial design, your AFFiNE journey unfolds as follows: You start by accessing the startup page and then proceed to explore the introduction to AFFiNE. Following this, you enter the questionnaire section, sharing information about your work habits, technology preferences, and desired features. After completing the questionnaire, you encounter a showcase of AFFiNE's features, including captivating animated presentations. The Bento version page is then presented, offering you additional options. Finally, you enter the app, commencing your AFFiNE experience.

The Finalized Process

After discussions and brainstorming sessions with more team members and the Product Owner, we have redefined the onboarding design process:

The journey begins with an entrance phase featuring a captivating animation. Next, you can choose articles of interest and proceed to convert them into whiteboard documents. On the confirmation page, you can review and confirm your selections. Finally, you will be invited to enter the app, initiating your AFFiNE experience.

A Visually Stunning Entrance: Innovating Animation and Transitions

In our pursuit of innovation, we aimed to create a full-screen entrance effect, leading us to conduct extensive technical research and even develop a standalone project to fine-tune animation details. This project will be open-sourced in the future.

In the design process, difficulties and challenges are inevitable. We overcame many issues:

1. We successfully developed a fully transparent window based on the Electron framework, overcoming complexities in multi-display switches to mimic real windows.

2. For simulating paper bending, we chose "pure CSS for 3D transformation" over WebGL, striking a balance between visual quality and development efficiency.

3. Our focus on smooth and reversible transitions led us to effectively manage multiple animation stages, from paper flying into transitioning to the startup page.

4. In transitioning between pages and edgeless mode, we selected a simulated approach over using the actual blocksuite renderer. This involved extra work on canvas scaling and dragging, but resulted in smoother animations.

In summary, our commitment to innovation guided us through various challenges, from creating transparent windows to achieving seamless animations, culminating in a distinctive and visually appealing user experience.

UIUX Improvement and Creative point

Recognizing scenarios where there might be numerous window elements, we have refined the shadows for a more polished appearance.

We have independently managed the timing of prompt messages to prevent your confusion. Additionally, we prioritize visual aesthetics, making functional buttons and toast messages contextually relevant.

Unique styling has been introduced for the web version, ensuring an optimized and distinctive visual experience.

Handpicked Insights - Selecting Five Articles

Throughout the AFFiNE onboarding, we've introduced a distinctive feature: during this phase, you'll encounter five thoughtfully chosen lengthy articles. In AFFiNE, articles aren't just presented in the traditional text but also visually on a whiteboard, employing graphics and simplified paragraphs. This inventive approach accelerates your understanding of article highlights. The article selection process was a collaborative effort, ensuring a varied and pertinent collection. To sum up, our visual representation method enhances the intuitive grasp of lengthy articles, making your onboarding experience more engaging and insightful.

Breath of the Wild: Redefining Game Design

AFFiNE aims to expand its support for the gaming and creative industries, exemplified by the chosen article, "Breath of the Wild: Redefining Game Design." The piece explores the innovative game design of "The Legend of Zelda: Breath of the Wild," emphasizing its intricate gameplay that fosters diverse player interactions and unexpected outcomes. The analysis delves into enhanced terrain, physics, and action systems, offering players unprecedented freedom. Ultimately, the article highlights the potency of complex gameplay in creating engaging, immersive experiences, fostering player creativity and exploration.

Local-first Software: You Own Your Data, in Spite of the Cloud

AFFiNE spotlights a crucial article in the local-first domain titled 'Local-first Software: You Own Your Data, in Spite of the Cloud.'

This piece delves into "local-first software," advocating for user data ownership and collaboration. It critiques cloud apps like Google Docs, emphasizing the risks of centralized data. The article explores Conflict-Free Replicated Data Types (CRDTs) and their role in enhancing data security, privacy, and user control. Examining Ink & Switch's prototype development and CRDT challenges, it offers valuable insights for future software design prioritizing security, privacy, and user agency.

How to: Be More Productive

AFFiNE is a productivity tool, so it visually presents content related to productivity.

Delve into the wisdom of Aaron Swartz, a visionary who dedicated his life to making knowledge accessible on the internet. This article, penned by Swartz, advocates recognizing the temporal nuances of productivity, strategically aligning tasks with varying time qualities, and embracing life priorities. It underscores the significance of maintaining creativity, efficient task organization, and minimizing disruptions to enhance time quality. Swartz's insights extend to overcoming procrastination by breaking down tasks and aligning work with personal interests and mental states. We hold deep admiration for Swartz and present this article as a tribute to his impactful legacy.

Learning with Retrieval Practice

AFFiNE aims to assist you in better learning, organizing, and managing information and knowledge, hence it offers an article related to learning techniques: "Learning with Retrieval Practice."

Meet Barbara Ann Oakley, an esteemed American engineering professor at Oakland University and McMaster University, renowned for her massively popular online courses on learning. As a distinguished figure in STEM education and learning practices, Oakley co-created the world's most popular online course, "Learning How To Learn." Additionally, she authored the standalone book, "A Mind For Numbers: How to Excel at Math and Science," complementing the ideas presented in her influential MOOC. This article, inspired by Oakley's expertise, explores effective learning strategies, emphasizing active recall, focused learning, and structured review for optimal information retention and understanding.

More is Different

AFFiNE fully recognizes the importance of scientific research and maintains an open attitude towards the development of science, so it selected a scientific paper published by P.W. Anderson in 1972 titled "More is Different"

Do numerous cells constitute a human? Do countless atoms aggregate to form physics? Does an intricate interplay of physics and mechanics at the micro-molecular level determine how we function, build, and love? The answer is no. "More is different" holds true. From the microscopic realm of quantum mechanics to the complexity of chaos theory-driven systems like companies and societies, variations can magnify, and ultimately, more is indeed different. Careful consideration of desires is paramount, and free will remains significant in navigating these intricacies.

The article discusses the essence and evolution of science, introducing a new perspective that the properties of matter vary at different scales. It highlights the significance of scientific research and urges an open attitude towards the development of science. The key points include the nature of science as the exploration and understanding of natural laws, the diversity in the behavior of matter at various scales as central to scientific research, and the need for an open mindset to continually explore new domains and perspectives in science.

Get ready to unlock new levels of productivity

As our AFFiNE 0.11.0 release week comes to an end, we are excited to share the intricacies of our carefully crafted entry design on the final day. From setting design goals through the planning and finalizing stages, emphasizing innovative elements, discussing topic selection, and finally providing a comprehensive video presentation, our goal is to provide you with a comprehensive understanding of our design concepts.

0.11.0 Stable is coming soon, and we look forward to your continued participation and hope that our commitment to excellence is reflected in every aspect of your AFFiNE experience. Thank you for joining us on this exciting journey!

Last but not least, let's take a brief moment to look back at the informative articles we shared throughout this dynamic launch week:

Day 1: https://affine.pro/blog/affine-0-11-0-launch-day1-elevation-celebration-bug-fixes-ux-delight

Day 2: https://affine.pro/blog/docs-edgeless-stylized-embody-your-creativity-better-and-easier

Day 3: https://affine.pro/blog/affine-0-11-0-launch-day-3-beyond-text-color-history-table-of-content-possibilities

Day 4: https://affine.pro/blog/affine-0-11-0-launch-day-4-navigating-canvas-complexity-templates-clarity-free-online-whiteboard

• Official Website: https://affine.pro/

• GitHub: https://github.com/toeverything/AFFiNE

• Twitter: https://twitter.com/AffineOfficial

• Community：https://community.affine.pro/home

• Discord: https://discord.gg/Arn7TqJBvG

• Telegram: https://t.me/affineworkos