top of page

Todo Shuffle

Client

Suramya (Inhouse)

Year

2023

Scope

UI/UX Design

Tool

Figma

Idea of the app

Isn't it hard sticking to follow a routine or a mere To-do list on a daily basis for long? For most people it is. And the most common reasons are Boredom, Repetitions over time, and the fact that it confuses them to choose a task to start with, from a huge list of tasks they have created. The idea of this application is simple, This app tries to eliminate the decision paralysis that people get upon watching a huge list of tasks by selecting tasks for the users randomly one after another. This application also focuses on making the experience a little more exciting and enjoyable by gamifying the experience of completing daily tasks.

My Role

Information Architecture

User Flow

Wireframes

Moodboards

Style Guide

Final UI Screens

Design Process

1. Information Architecture

There were Four parallel pages / tasks that could be accessed through the home page / Ongoing task page.

IA.png

2. User Flow

The main User flow included two flows which were 1. Completing a task and 2. Adding of a new task. These are represented below for better understanding.

Completing a task flow.png

Completing the Task

Add new task flow.png

Add new Task

The detailed User flow that is represented below includes all the features and tasks that the users can perform while interacting with the application.

Detailed User Flow

3. Wireframes

Home.jpg

Home / Task to do

Started.jpg

Task started

Task successfully finished.jpg

Task summary

Progress.jpg

Progress

Today - variation 2.jpg

Today's tasks

Add new task.jpg

Add new task

Menu.jpg

Menu

Home - empty screen.jpg

Home ( Empty state )

4. Moodboards

To start with a UI direction, We needed to get everyone on the same level by understanding the style of the UI through Moodboards. We made two different styled moodboards, i.e., One simplistic and one brutalist. And decided to move forward with the Simplistic UI with calmer tone.

Extreme.png

Brutalist

Mild.png

Simplistic

5. Style Guide

Color Palette.png

Color Palette

Typography.png

Typography

6. Final UI Screens

Login.jpg

Login

Login-1.jpg

OTP

Home.jpg

Home / Task to do

Home-1.jpg

Task started

Task successfully finished.jpg

Task summary

Today - 20.jpg

Today's tasks

Progress.jpg

Progress

Menu.jpg

Menu

bottom of page