Browser.jpg

Project Management Web Tool

Brief: The client is an enterprise project management company. The client's current product is both too expensive and too complex for the needs of younger companies. They hope to design a simple web-based app that lets companies set up free accounts, add team members, create projects and manage basic timelines/deliverables/statuses per project.

Research & Discovery

Research & Discovery

The Problem: The client’s existing tool is too expensive and complex for the target group - young companies and start ups. Along with the current competitors in the market, the client wants to create a new app that is simple and easier for users to make the switch from other tools to this new app.

The Goal: 
1. Help the client appeal and build new relationships with younger companies that they have hope will eventually become users of their legacy product.

2. Create a new tool that is free and easy to use

My Approach
I started off by conducting market and consumer research by looking for other businesses within the same market and finding out some trends that such project management tools have. I narrowed the competitors down to Trello, Basecamp and Monday. After finding out the trends among the three different tools, and consolidating the user reviews from each application, I moved on to familiarizing myself with the potential end users so as to accurately create initial user personas and use cases. As this is a personal project case study and I had no means of reaching out to the client’s user base, I did some research from the competitors’ blogs to find out their users and crafted out my user personas based on the data I found online.

Research
From the initial research, I found out that users find that a project management tool has to be simple to use, and easy to set up. It has to be easy to create workflows, checklists and notes, has to have great collaboration features and that everything takes place in real time. Most importantly, the tool has to be accessible across devices. Besides the reviews from users, the client also has some required features to be included in the tool such as, having the ability to group smaller sub-projects under a larger “parent project”; able to assign owners to parent projects, sub-projects and tasks within each sub-project; ability to assign due dates, “marked complete”, and add comments to each project type; and able to add attachments.

User Personas

User Personas

After the research on user and competitors, I began to draw out the user personas based on the intended end users and what they will be using this product for. With the research, I found out that the users need to leverage on tech to understand what their teams are working on, and be clear about why certain things are a priority. The users need a tool that can clearly dictate what needs to be prioritised to help them manage their teams and stay on top of the amount of work and what’s important, and what can be put on hold. The information I gathered from the user personas helped me better understand how to design the tool such that it is something users would love to use.

User Flow

User Flow

After creating the user personas and mood board, I created a user flow to map out the different screens. The user flow helps me get a clearer idea on what I need to design to show how each of them flows into the other and how a user will interact with it.

Wireframes

Wireframes

I started off by creating low-fidelity mockups of the app with the design needs of the client in mind and ensuring the screens allow for every action the client wants to allow within the app. 

Read on to view the final design iterations that were created for the web app.

Login Screen

Login Screen

Main Dashboard Screen

Main Dashboard Screen

The main dashboard page provides a comprehensive overview of all the tasks and projects, announcements/emails happening in the week.

Main Dashboard Screen - Pop Up

Main Dashboard Screen - Pop Up

This screen shows what happens when users click on a specific task to get more information about the job.

Projects Overview Screen

Projects Overview Screen

Specific Project Screen

Specific Project Screen

This screen shows how the page would look if a user clicks in to a main project task, and in this screen, users can toggle between the various sub-projects that are involved in this job, the documents from client and the timeline.

Create a New Project Page

Create a New Project Page

The client required this page to allow users to select due dates, team members and attach documents.

Conclusion

Conclusion

As this is a personal project, and the first time I'm creating a web app, there were some challenges I faced as I hoped it will be as close to a real life case study as possible. Through this project, I learned the proper process of working on a web application. From conducting user and competitor research to user personas, to user flows, wireframes, design and finally prototyping. My biggest challenge in this project was when I was finding out how to create a proper user persona and user flow, since this was a personal project case study. Eventually, after reading various articles online, I managed to create initial user personas based on the intended end users and what they will use this product for.

You can view the InVision prototype here :)

Thanks for reading!