Savaara

A custom-built platform that merges storytelling, investment, and e-commerce — designed for authors, investors, and readers to connect around the lifecycle of a book.

Completion

2024

Role

Creative Web Developer (UI/UX Design + Development)

Company

PIXIT Design

Tools

Figma, Webflow, Shopify, Shopiflow

Website

https://www.savaara.com

Overview

{

}

The client wanted to build a unique platform that goes beyond traditional book sales. It needed to serve not just readers, but also investors and authors — enabling users to subscribe to updates, invest in upcoming books, pre-order, and finally purchase them. I was responsible for both the UI/UX design of the platform and the web development, integrating Webflow with Shopify using Shopfiylow.

01

{

My Role
General Structure
General Structure

}

As a Creative Web Developer, I worked at the intersection of design and development:
1- Designed and developed the complete user flow for each of the four book phases (Subscribe, Invest, Pre-order, Purchase).
2- Created the responsive website and dynamic product pages for each phase.
3- Built and automated flows for user engagement (e.g., email alerts for pre-orders and product launches).
4- Designed dedicated sections for the three key user groups: Authors, Investors, and Readers.
Although the branding was done by our graphic designer, I had full freedom in designing the website structure, UI components, and user experience flows.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

Key Features & Challenges

{

}

A look into the platform’s unique structure, user flows, and the technical and design challenges tackled throughout the project.

1. Four-Stage Book Lifecycle

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

Each book moves through four distinct phases:

  1. Subscription Phase – Users sign up to be notified.

  2. Investment Phase – Early supporters can fund the book.

  3. Pre-Order Phase – Users reserve a copy before the public release.

  4. Purchase Phase – The book is available for general purchase.

I designed both the frontend UI and the backend flows for managing each phase.


After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

2. Three User Groups

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

The platform targets:

  • Authors who submit and manage their books.

  • Investors who support projects early.

  • Readers who buy books directly.

I designed dedicated pages and user flows for each audience.


After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

3. Webflow + Shopify Integration

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

To create a seamless e-commerce experience:

  • I used Shopfiylow to combine Webflow’s custom front-end flexibility with Shopify’s backend power.

  • Designed product pages that update based on the book’s current phase.

  • Built custom logic for handling book availability and dynamic content loading.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

Prototype Showcase

{

}

Explore the interactive prototypes that demonstrate the platform’s key flows and design decisions across different user journeys. on the left there are some of the protoypes of the website pages and on the right, I have demonstrated the inital version that was designed for the product page before adding the phases.

Outcome & Impact

{

}


  • Successfully launched a responsive, scalable platform with a unique business model.

  • Enabled the client to build a multi-audience ecosystem around books.

  • Created a fluid user experience across different book phases and audience types.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

What I Learned

{

}


  • How to build and manage multi-phase user journeys from scratch.

  • Deepened my knowledge of e-commerce UX and platform integration.

  • Improved my ability to balance design freedom with technical constraints in Webflow + Shopify environments.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

After exploring tons of productivity concepts like PARA from Marie Poulin and Tiago Forte, and reviewing creative workflows from Ali Abdaal, Keep Productive and Thomas Frank, the starting point for me was to flesh out a system of thinking for Notion that connects from the big to the small.

Mockups

{

}

Other projects

See more

Design

Nexon

Web Design and Branding

© 2023

Ali Aliakbar

© 2023

Ali Aliakbar