Designing a user-friendly autosave functionality — Part 2

Rameez Kakodker
4 min readMay 24, 2023

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…

--

--

Rameez Kakodker

100+ Articles on Product, Design & Tech | Top Writer in Design | Simplifying complexities at Majid Al Futtaim | mendicantbias.com