Introduction
How can we present a product that's still in the process of development?
Chronicler is an AI-powered assistant that lives inside your messaging apps. It automatically transforms self-texts into todos and notes, acting as an all-in-one task manager and second brain.
Context
When I started working with Chronicler, they didn't have a website of their own yet. So creating one was top priority — not only to share with the audience at their demo day presentation, but also to begin reaching out to investors in the weeks leading up to it. Without their own website, it would be challenging for Chronicler to create a strong first impression.
At the same time, the team was still developing the first iteration of the product, both in the messaging and the web app side. Despite this ambiguity, I was tasked with making a clear product narrative that would appeal to both both potential users and investors. To do this, I focused on portraying Chronicler's ideal vision, which was made possible by working closely with the co-founders. Once the product matured, I updated the landing page to reflect its more refined direction.
Overall, I led the end-to-end development of Chronicler's landing page:
- Translated founders’ early-stage ideas into clear narrative through content design and UX writing
- Designed high-fidelity screens and custom product animations for the website with Figma
- Developed entire site with Webflow
The co-founders were satisfied with my work to the point that they asked me to take over the design for Chronicler's web app.
Walkthrough
The Chronicler landing page
With the landing page, I sought to achieve 2 goals:
- Educate potential users on Chronicler's capabilities
- Build anticipation for Chronicler's future vision (a.k.a. capabilities that haven't been developed yet)
Hero Section
The hero animation is a conversation with Chronicler that cycles through different platforms: WhatsApp, Messenger, and Instagram. This was made to showcase how Chronicler could be used in multiple platforms (a future value proposition the team already wanted to market, even if only WhatsApp was available at the time).
The buttons at the side allow the user to toggle through different platforms, a.k.a. different sections of the animation. They not only allow easy navigation (if ever a user wouldn't want to watch the video in full), but also makes the user aware of Chronicler's multi-platform value proposition right away.
While designing the flow of the entire conversation, I had to ensure that Chronicler's main capabilities were shown: adding todos, managing todos (i.e. marking complete), saving notes, and searching across messages.
Scroll-driven Animation
The scroll animation serves as the website's "How It Works" section. It breaks down the general process into 2 simple steps: just message whatever you need to remember, and Chronicler will automatically process everything for you. The animation portrayed this by 1.) showing messages one by one (simulating the self-texting experience), 2.) showing Chronicler's emoji reactions (signifying that they've been processed), 3.) converting messages to todos and notes, and 4.) showing a phone with the Chronicler web app.
Todos & Notes
User feedback following Chronicler's launch revealed a gap in awareness of the platform's capabilities, which existing onboarding did not fully overcome. To address this, I created dedicated sections for todos and notes to serve as an early onboarding experience. This gives users a preview of Chronicler's capabilities early on, ensuring they know all that they can do with Chronicler even before signing up.
Todos
With Chronicler, you can do the following with your todos: get reminders, integrate your calendar, create todos through voices notes, and view your todos by date.
Notes
With Chronicler, you can do the following with your notes: send any type of media, search (through chat and web app), auto-tag your notes, and format + share them (via web app).
Other Features
I also added a section highlighting Chronicler's additional features (beyond todos and notes), such as password-free web app links, cross-device access, and encryption.
Frequently Asked Questions
Each pair of question and answer was styled like an online conversation; the former was styled like a user's message while the latter was styled like another's reply. The answer bubble also has a "Seen today" timestamp that reflects the user's current time. At the bottom of the FAQ section is a link to Chronicler's Help Center, where one can find other questions answered.
Call to Action
The primary CTA here is joining Chronicler's public beta on WhatsApp. If the user would rather wait to use Chronicler on another platform, they can sign up for the waitlist. The Messenger and Instagram buttons link to Chronicler's accounts on those platforms, where chatting with it will trigger a waitlist signup message.
Meanwhile, the other platforms (i.e. iMessage, Telegram, Discord, Slack) didn't have this setup yet, so what I did instead was have these open up an e-mail signup form. The accompanying copy would be customized depending on what the user selected.