Building — A Project Management App

Helping Freelancers to manage their projects effortlessly and efficiently

The problem statement:

User Persona

Lois Lane is a freelance designer who works on multiple projects with many clients. She is a busy person who is trying to manage all the tasks they need to accomplish. She takes on 2–3 projects at a time and each project typically lasts 2–3 weeks. She breaks down every project into tasks which take 1- 16 hours.

What does she want to accomplish: (Jobs to be done)

• Keep track of all her past and current projects
• Create new projects
• Create tasks for a specific project with time estimates
• Mark task as completed and record actual hours spent
• View progress on current projects
• Track hours spent per project for billing clients
• Mark a project as complete if all tasks are completed
• Cancel a project if the client has abandoned project

It was quite difficult to deliver this assignment under 3hours as I wanted to build an MVP that provides an end to end experience for the freelancers. Because of the time constraint issues in working days, I worked on this project on the weekend and tried to design as many screens as possible, few of them are still in sketching mode though.

Design Process for this app:

Time-Constraint is a factor here. I wanted to build this MVP quickly, tried to cover the important steps for translating business ideas into the user flow.

• Research/Brain Storming
• Defining goals
• Outline Ideas/Solutions to the problems
• User flows
• Initial Sketches (low-level wireframe)
• High-level mockups
• Prototype

Research:

Brainstorming:

The top-level user flow here will always be the same, even if distinct kinds of freelancers exist considering their specialization i.e

Creating a project — Dividing a project into tasks — Keeping track of the tasks/ project — Generating reports like billing, timesheets, etc.

Hence instead of creating different persona types, I emphasized the “jobs to be done” approach. Here are the few core facts/questions that I found during the brainstorming process.

1. Who are our main stakeholders?

• Individual Freelancers for short term projects
• Does it have any scope for being an enterprise product? — Currently out of the scope.

2. What kind of freelancers is going to use this one?

• Different persona types: General Category like Design and Creative, Engineering, etc? Should we consider providing them pre-made templates for kick-starting the project? Will it be helpful?

3. How they get the brief?

• How they get the project info from clients? For e.g Can we get the information from up labs, freelancers, Fiverr website for quickly getting the project info?
• A single client can assign multiple projects.

4. How much time does a freelancer have to invest in this app considering their busy schedule?

5. Planning — How quickly a freelancer can add/delete a project and create/edit/delete the task list here? What’re acceptable improvements to that?

• How fast they are at creating a task? Should we show them possible task list suggestions based on the types of freelancers they are? or is it unnecessary and add clutter to the interface?
• How do they set priority and deadline to individual projects and tasks considering the agile nature of the product?
• How frequently they interact with the clients?

6. Collaborate — Will it be a place for the users to collaborate with the clients for small notification things e.g notifying clients for a particular task completion/ongoing tasks through message or email?

7. Organize — Is it a place for them to organize the project files? Should we integrate google drive, dropbox, etc for management of documents if they have any? It can be a project requirement doc, agreement files, etc.

8. Delivery — Can they generate workflow/timesheets/bills etc out of it and then send it to the client?

9. What is their emotional status when they create/ update task status? How do they feel when they see the deadline for any task is approaching?

10. Scope?

• The major difference to account for with countries, location, and language? e.g Korean people don’t understand English, they use their native language for communication. Aim for inclusive design and accessibility.
• Should we consider showing the total amount earned through the undertaken projects? It can be any thinge,\.g project undertaken in a particular month, number of clients the user worked for, etc

Take away:

• End-user workflow generally moves through these 4 steps: Planning, Collaboration, Organise and Delivery.
• End-user frequently interacts with the client in freelance projects. Hence having a dedicated client section in the interface is an important thing.
• The app should focus more on handling the projects and clients efficiently, hence the experience should be seamless with the highest accuracy.

Goals:

• Effective utilization of time for efficient project delivery as user deals with multiple tasks — User should be able to assign the priority and deadline to the individual tasks for each project.
• Encourage users for capturing/updating the data as it involves typing to some extent. The experience has to be delight considering how terrible it feels when we type in mobile.
• View the progress of the project and their respective tasks. Should have the ability to communicate it to the client
• Sending reports ( can be pre defined ) e.g Billing detail, timesheets to the client.

Ideas:

Stage 01 — Planning:

1. The motivation for creating the project: How to motivate the users to capture the data without typing a lot?

• Allow them to capture data from multiple remote work platforms i.e up labs, StackOverflow, fever, etc by integrating them.
• The project info can be captured by scanning the content using a camera app in case the platform is unavailable e.g Suggesting a project title by scanning an email content through a camera app (machine learning). Not sure about it though. A simple typing maybe even faster than this process.
• Provide cues if any data has been captured before and it needs to be reentered

2. The motivation for creating tasks under the project: How to motivate the users to captures the data without typing a lot?

• Capture the type of freelancers they are. Captures the type of work they do through different suggested tags during on-boarding. Based on this data, We can always populate the suggested task lists to some extent for any kind of project. For e.g for a visual designer, the general workflow is creating color palate, illustrations, creating brand assets, etc. Capturing these data would be helpful in showing the suggested task list.
• Provide cues if any data has been captured before and it needs to be reentered
• How to arrange or create tasks? — Through checklists, Kanban Board? Give control to the user.
• Allow a range of deadline date instead of a single deadline date to avoid the instant anxiety/ a sense of dissatisfaction. This provides an opportunity for converting n unpleasant emotions into a pleasant one.

3. The motivation for updating the task status :

• Push notification when a task approaches the deadline. Add direct action button in notification once they interact with it e.g We can directly reply from Whatsapp push notification. (Scope for the mobile app)
• Progress Bar as “a typical task takes 8 to 16 hrs”
• Can be integrated to Google Home for notification thing
• Can we show them any instant gratification thing here if they complete the task?

Stage 02 — Collaborating:

How easily they can collaborate with the client through the app?

• Inclusion of different platforms e.g connects with the clients via email, telegram, WhatsApp by referring the information.

Stage 03 — Organise:

Organize project-related files at one place

• Integration of different platforms like Dropbox, Google Drive, etc with a link to the project file.

Stage 04 — Delivery:

Organize project-related files in one place.

• Send Billing reports, timesheet details to the client via email

Other scopes of the product :

Organize project-related files in one place.

• Dashboard: Inclusion of analytics to understand the project status, earnings, number of clients worked so far, their demographics, etc

A few scribbles from the notepad:

Assumptions:

• This is an MVP
• The user interface assumes that the stakeholder is a full-stack designer and manages all the freelance projects through this app. Hence the most used terminologies will be from the design field.

User flows:

I decided not to implement millions of features and settled on the most impactful one. Because I don’t want my users to feel overwhelmed by tons of options.

The 3 major operation user does here:

• Management of projects — Since the user frequently interacts with the projects more than anything else, this is our default interface anytime the user opens the app. Also here we can divide this space into 2 major parts. One dedicated interface is for the client and the other one is the user’s personal to-do list. (Terminology — Home)
• Accepting and rejecting projects from others (Terminology — inbox)
• Management of Billing, Revenue reports, etc (Terminology — Account)

Project Management App — Userflow

Wireframes (Low label):

Before getting into the wireframing phase, a scribble of the interface helps me to understand how the hierarchy of IA affects the experience. Further, it provides room to experiment with the content and layout structure to deliver the best experience while supporting the user flow.

A few scribbles of the interface from the notepad app:

High-level Mockups and Prototype:

Here is how the wireframe looks when converted into a high-level mockup in the sketch environment.

• Tool — Sketch
• No UI Kit has been used in this project. (except a part of inbox page)

Home/Projects:

Project card and the associated actions:

Projects: Status of ongoing projects and browsing project history

Home/Projects/ Individual project page:

Home/Projects/ Individual project page — Sorting the information to quickly find out the desired item.

Task card view and the associated actions in dropdown:

Home/Projects/ Individual project page — Status column dropdown (Giving control to users)

Home/Projects/ Individual project page — Different switching mode

Interaction with the client (From Client column card)

Home/Projects/ Individual project page — Calendar view

Associated actions in calendar view:

Create a New project:

Newly created project card:

Newly created project individual view:

Project and Task Card detail view:

01

Inbox:

Account:

Tasks like (from the problem statement)“Track hours spent per project for billing clients” can be shown upfront in project cards or we can give more freedom to the users by giving them options showing the things they want to see in a project card. The later is more preferable as the context matters the most than anything else and also well supported by design heuristic facts. Similarly “Mark a project as completed if all tasks are completed” can be handled in a better way than “archiving it”.

Prototype:

I would be able to send you on request.

Wrapping it up:

• The next steps would be to validate these and figure out whether this thing — or something like it — is worth making. Considering the time constraint, I missed this step.
• I could have elaborated the interface mockup by breaking it into smaller components, more for better mapping of user flow with the wireframe/mockup.

Thanks!