A cross-platform task management mobile app that makes the user easily and efficiently track and manage task workflow progress.
Taskit, a Bay Area-based startup, builds a web-based task management application that helps people optimally manage tasks of various shapes and sizes. However, their users found it was difficult to quickly see at a glance the task progress as well as manage the workflow whilst on the go. After deciding to build a cross-platform mobile app, the founder came to me and asked to help them address the problem and design the UX & UI of this app.
I adopted the Double Diamond approach to get a solid understanding of the problem to solve and then progressed through to the implementation, following the Agile process to iterate with quick feedback from my client.
As a freelance UX designer, I worked on designing and iterating wireframes, creating pixel-perfect mockups of the mobile app. With user research and competitor analysis, I helped the client capture user needs and turn those needs into solutions that can solve users’ pain points. I also collaborated with the developer in launching the app. This is a 5-week project.
“Qian is a passionate designer with an insightful and solid understanding of UX design. Communications with her were easy and fun! She is able to convert our needs into high quality designs. Her great professional skills and solid design knowledge will prove to be a great asset to any team!”
Sherry Zhou. Founder at Taskit.
In the kick-off meeting with the client, they walked me through three key features of their existing web-based application. Also, according to the market analysis and research done by their product manager, they want the mobile app to mainly focus on managing the tasks users already created on their web-based applications.
Replying on the user data collected by my client, I helped them discover user needs, pain points, and desires through the synthesis.
Based on the user data synthesis, I created the following two types of user scenario which allowed me to think about solutions by incorporating the environmental context when the user interfaces with the mobile app:
Ming, who is planning to travel in U.S. during his summer break, needs to apply for a US visa. As there are many documents as well as time-sensitive steps for the visa application, he is looking for some task management tool which allows him to easily track and manage the document preparation and the application process anywhere, anytime.
X Abroad, a study abroad agency, helps their clients apply for overseas programs in many countries. To improve the efficiency of their service, the agency is looking for some task management tool that makes program advisors efficiently supervise their applicants (e.g., preparing the transcript, personal statement, etc.) while keeping those relevant others such as applicant’s parents in the loop.
Given the context of Taskit mobile app, I conducted a competitor analysis that focuses on assessing three popular project/task management mobile apps (shown as below) to gain an overview of how they are designed for the user to track and manage the project progress.
Three key insights were uncovered from the competitor analysis:
On the basis of my client's needs as well as insights uncovered from the user research and the competitor analysis, I created a problem statement: As a part that will be seamlessly integrated with the existing web-based application in the context of mobile usage,
how might we design the Taskit mobile app that helps the user easily keep track of their tasks and manage the workflow in just a few taps while keeping relevant others in the loop?
Being guided by the problem statement and the research, I came up with the idea that consists of the following three information and data visualization techniques:
In the first round wireframing, after the login/sign-up flow, a bottom navigation bar with three primary destinations was created to guide the user throughout the app:
After showing the first version of wireframing to my client, they provided the feedback as follows:
Keep the client feedback on the 1st version of wireframes in mind, an iteration was taken with the following major changes:
In the design review meeting, the client was satisfied with these major changes that I made in the 2nd version of iteration. Specifically, they really liked the new home flow which was more straightforward and intuitive than the previous version. Nonetheless, the client still pointed out three problems as follows:
In addition to follow the iOS Human Interface Guideline as well as Material Design for Android, the minimalist approach was utilized to create the whole high-fidelity UI. Specifically, all screens have generous amount of white space which marks out the core functional elements of the app. A monochromatic color scheme based on the light sky blue theme color of the web-based product is used. Meanwhile, to maintain the consistency between the web-based product and the mobile app, the same set of colors that indicate task steps with the different status is used. Also, a set of simple and recognizable filled icons are used to represent the functionality as well as content.