To Do App
Simplest way to track & control all your daily tasks in one app
We all have a busy day from work to shopping to home obligations, managing all these stuff together without forgetting any task is way too hard to maintain, the best solution is TODO lists! but with the advancement of the world and technology it is not practicle to take a book or a list with you everywhere!! Here where our todo app comes! In this research we will take a deep look on our users needs and best solutions we can provide, let’s roll into it!
Date
June 2022
Platforms
Web & mobile design
Role
UI/UX Designer
Company
Lasting Dynamics
The Challenge
Why we did this work?
This to do app is a part from my training at the Lasting Dynamics academy before joining the team, this was my final task to conduct a complete UX research followed by the UI design of a to do application. The task was guided by some guidlines and requirements that should be respected
User persona
Our user persona
To better understand our user persona and requirement and identify our enduser, we created a user persona that includes a bio, psychographics and a user story to identify our main functionalities and get out with an end goal
UX Research
A detailed UX research about product
To better identify our functionalities, a detailed UX research has been made including our user problems, goals and the common points and we get with some possible solution. After brainstorming we selected the best solution to implement. We also studied the market and our competitors, the strengths and weaknesses to better improve our user experience in our application.
User workflow
Flow chart
Our mobile and web applications have different user workflows, we focused more on the mobile application since it is the main platform for our enduser, it has a simple main flow that facilitate as much as possible our main goal which creating tasks and tracking them, in addition we added a focus mode to allow users to focus while doing a task.
Graphic chart
Colors & typography
For colors, we used mainly a dark purple combined with a black, in addition to this we used a light color for background and a gray for most typo and content. For typography we used Gilroy font by creating both Web & mobile styles with more than 4 different weights used.
Wireframes
Low fidelity mockups
After finishing our UX research and User Flow, we started the wireframe phase to determine the structure of our screens, the items places and how to organize and keep consistency throw the pages, the wireframing part is just to show a low fidelity mockups to give an idea about the design before the UI phase.
User Interface Design
Let's talk about UI now
After finishing the wireframes and the approval from the team, we start implementing these screens and turning them to high fidelity mockups that will be presented for the final review, the application includ both mobile and web versions
Reusable components
What about design components
To facilitate work and make it easier for future changes and improvements, and in additional to our general design system, we created some reusable local components that we used in both mobile and web versions, below you will find an overview of some of these components.
Simplicity is not the goal. It is the by-product of a good idea and modest expectations.
Paul Rand
