A minimalist time management app to increase productivity. Users can create, edit as well as delete tasks with nested to-dos. The app lets a user sort task based on priority or time of creation or title or completion percentage. The minimalist UI is easy to use and looks professional at the same time.
to-do app
Schedulr
There are a lot of productivity apps on the internet but, what I felt, was lacking in them was their over complicated interface. This productivity app was built with mobile first responsive design in mind adhering to the minimalist design paradigms.
Planning phase
The user flow, font families and colors used in the app was finalized in this phase. At the end of the planning phase, I had the draft wire-frame model, total number of pages and user flow diagram ready. It took me approximately 8hrs for me to culminate this phase.
Prototyping phase
Firstly, the desktop sized prototypes were created using dummy data. The UI-UX was designed using Figma. Upon completion of the desktop screens, the mobile and tablet screens were designed. Figma in-built interaction tools were used to simulate the design's user flow. For icons, the Figma react-icons package was used as well as the in-built fontawesome icons.
Typography
Nunito is a well balanced sans serif font as per Google. This font makes the minimalist design look even cleaner. For this project, I've used two font-weights viz:
- Bold (700) for the headings and titles.
- Regular (400) for everything else.
Color Palette
For this project 6 colors were picked.
#101010
#FFFFFF
#FF1818
#2DBCA2
#55F6A9
#FFC107
User Flow
01
Landing page
When a user visits this app for the first time or has no tasks saved, the landing page view is displayed. If the user has tasks saved, this page will not be shown. A button to create a new task can be seen on this page clicking which redirects the user to a CMS form.
02
Manage tasks ui
Users can create new tasks/edit existing tasks on this page. Every task comprises a title, description, task priority and a list of to-dos associated with the task. The client-side validations to be implemented to sanitize the user data. Error is handled and displayed using a global message modal. On success, the Task is created and redirected to the detail page.
All pages
Here's a list of all the screens and pages for Schedulr
Conclusion
This project is a work of imagination and bears resemblance with no product. If you want to use this design in your project, please ask me for permission. If you wish to see this design as a project, let me know the same.
Contact Me
If you have any doubts about my work please reach out to me. You can use any of my designs, projects or blogs to your use provided you give proper attribution to my site. To learn more about attribution, contact me. I'll respond as soon as possible.
sounakmukherjee@ymail.com