Designing a user-friendly autosave functionality — Part 2

A while ago, I wrote an article on ‘Designing a user-friendly autosave functionality’. It was primarily aimed at autosaving work done in applications. However, a lot of it could be used for forms (multi-step ones).

And it was mostly theory.

In this article, we’ll actually write code that can enable this auto-save for forms and see how it can be used to create interesting prompts in the user journey.

tl;dr

Demo page: https://autosave.rkakodker-dev.cloud/
GitHub link: medicantBias117/Auto-Save-Demo (github.com)

Objectives

The objectives here are simple:

1. Demonstrate auto-saving mechanisms in browser across 2 journeys.
2. Enable field validation (content & uniqueness)
3. Write to database the final values.

I won’t be actually writing to database the values but will demonstrate how this can be handled on the server side.

For our tech stack, I’ll be using Vue3 with Tailwind & Daisy UI for beautiful looking UI.

I’ll add that I’m not a developer, and hence the code produced should not be taken into production. It’s to be used as a direction/demonstration.

User Journey

Before we begin, let’s set the user journey.

Journey 1: Simple Sign Up

Simple sign-up form built using Tailwind & Daisy UI

A simple 2 step sign-up form that first takes users contact details, validates them for uniqueness and if all is well, captures additional fields. When all the fields are captured, the entire data is submitted to the server for account creation.

Journey 2: Application Use Sign Up Process

Assuming that your application has a free-use version that people can use, you can prompt sign up completion as the engagement increases.