Embedded Files
Introduction
Introduction
I used Eisenhower Matrix Principle for years. And I tried to find an Android app with a convenient UI that uses the same principle. Unfortunately, I didn't find it, so I decided to design my own.
Goal
Design the best Android app for the tasks.
My Role
Founder, UX/UI Designer.
Tools
Figma, Google Material Design Guidelines, Notion, Zoom, Google Forms, Trello.
Users
managers that work with digital products;
freelancers if they have more than one project;
office clerks;
anyone who has a lot of tasks.
Outcomes
Affinity map with people's quotes, wireframes, and high-fidelity prototype.
The Eisenhower Matrix is the method for prioritizing the tasks in four categories:
Urgent and Important;
Important [and not Urgent];
Urgent [and not Important];
Not Important and not Urgent.
In the past, I created the prototype for using it on a plastic board to write and erase the tasks. I didn't finish this project, but I used this design as the print template for myself, my friends, and my coworkers. Everyone loves the template and keeps asking me about the digital version.
This is how the «Rivulet» startup began.
My very first template of the Eisenhower Matrix.
Empathize
Empathize
I conducted interviews with five people from different fields such as PLC programming, UX/UI Design, Management, and Marketing for the qualitative research. Due to the covid restrictions, we had separate calls in Zoom, and I also recorded these calls for future analysis.
For quantitative research, I asked people to fill out the questionnaire after the call.
Then I sorted all the cards in Trello, which helped me understand the main things I needed to focus on.
Part of the affinity map in Trello.
The research found the essential aspects that the people expected to see:
The product should be clear, easy, and fast to note;
People want to prioritize tasks;
Also, they need notifications and highlighting for some of the tasks;
It should always be in the front of the eyes;
They want to see what they've done;
People have a problem with focusing on the task;
People love rewards.
Define
Define
After acknowledging all of the outcomes that I got, I found the statement of the design problem:
Ideate. Wireframes
Ideate. Wireframes
The research changed my focus, and I understood that people would continue with the paper if the app could not compete against the paper. So I started to draw the wireframes.
I found that the pleasurable rewards, ability to see the history of completed tasks and synchronization function will be enough to compete. However, I also have to remember not to lose the ease of using paper and pencil.
Ideate. Naming and Logo
Ideate. Naming and Logo
As soon as I found vital elements, I tried to find the perfect name of the app. The main philosophy of all variants is «work in a flow, task by the task, how the water flows».
I asked people what they thought about these two names, and the opinion was 50/50.
I stopped on the «Rivulet» because I found that I can build the rewarding system around the beautiful landscape of the small river [«rivulet» — a small brook or stream; a streamlet], and the landscape will change with every completed task.
The next stage is to find a logo for the app that will reflect the name and goal of the app. I did some explorations and finally decided to show the «R» like a river:
Prototype and Test. Round 1
Prototype and Test. Round 1
It was time to collect all of these together, and I built the first version of the high-fidelity prototype.
After the testing with four people's, I found the issues I need to fix:
Issue:
«Too many hints in the beginning.»
Solution:
Later I showed all the hints initially and then asked testers to do the tasks.
But now, I restructured the screens so you'll see one hint, and then you will be able to try it.
Issue:
«People don't know where to click after reading the hint.»
Issue:
«The tooltip with available commands is very small.»
Solution:
Made it bigger and with an inverted background so it can be easier to notice.
Issue:
«People don't understand the Pomodoro timer icon.»
Solution:
Changed the icon.
Issue:
«It's hard to see the tasks because of the font type.»
Solution:
Changed the font to «Patrick Hand».
Prototype and Test. Round 2
Prototype and Test. Round 2
I adjusted the prototype by implementing:
The changes described above;
Google Material Design principles regarding motion;
AA WCAG compliance requirements regarding contrast ratio.
I ran the second round of testing, and this time I got much positive feedback and even potential backers for the future crowdfunding campaign.
Here is the main features of the app:
Understand what the app does at a glance at the welcome screen.
Add the tasks and prioritize them.
Hide the «Hub» area if you don't need it.
Highlight the tasks via tooltip.
... Or use an alternative way.
Run Pomodoro timer directly from the task.
Set reminder.
Feel rewarded when the task is completed. And watch how the rivulet landscape changes due to your productivity.
Try the prototype by yourself, and let me know what you think about it.
Next Steps:
Next Steps:
Run the third round of tests for getting feedback about the latest changes;
Find the investor for the future app [contact me if you are one of them] or
Launch a crowdfunding campaign.
Key Learning Points:
Key Learning Points:
Never underestimate research because it helps you to see what people expect;
Always use Figma components because you never know when you are going to make changes to a prototype;
Give your next feature idea just one night. Sometimes it's like a vampire — it loses its strength with the first rays of the sun.
Look at my other projects:
Look at my other projects:
Google Sites
Report abuse