Project management App

UI/UX design

 

 

 

ABOUT

Time tracker and project management app.

The main task was to create initial dashboard screen that shows current project, status, notifications and works for the whole team without switching between different pages. At the same time, I wanted to design simple and clean UI that would be easy for recognizing and being intuitive to everyone.

 

CHALLENGE

The main challenge was to create a product for 4 personas: Executive, Manager, Project Manager, Designer and Developer. This product should include all their requirements. For me, it was a special challenge as I never worked on a similar project. That's why it was interesting to me and I tried to implement all requirements and created an intuitive and clean design.

 

THE PROCESS

I started from researching of similar projects and competitive analysis, made few drafts on a paper and then switched to Sketch and improve the interface. After few changes, I created wireframes which will working the best for 4 personas.

The entire UI/UX design process you can see below.

 

TEAM

Worked in a team with a designer, project managers and developers

 

MY ROLE

Strategy and product vision. Research, competitive analysis, stakeholders and users interviews, user observation, user journey, information architecture, wireframes, prototype, user testing. Illustrations, icons.

 

TOOLS

Adobe Illustrator, Photoshop, InDesign, Sketch App

 

Reserch
I started from researching of similar projects, analyzing their strengths and weaknesses, then I selected some ideas and solution which
can enhance this project. Later I started work on the drafts.

 

Drafts
After that I made few drafts on a paper to create the general idea and dashboard structure. After I switched to Sketch and started to
improve the interface and removed everything what unnecessary in functions and design.

Wireframe
In process of creation, I realized that design is heavy and needs to be more improve, simple and clean. After few changes, I created this
wireframe which will working the best for this 4 personas.

 This product was created for 4 personas: Executive, Manager, Project Manager, Designer and Developer.


The Executive wants to get a quick view on what’s currently going on in the studio and typically only steps in when there’s a major issue.
The Manager wants to know what’s going on in their specific area. Wants to make sure all dates and deliverable expectations are met and wants to be notified if issues arise.
The Project Manager wants to quickly know the overall status of the projects their currently responsible for. They also want to know who’s working on what and what the current

status is for that phase of the project.
The Designer & Developer wants to get a quick update on project deliverables, delivery dates, open issues, next steps, etc.

The main challenge was to create user-friendly and intuitive product, so at the dashboard, I wanted to show the elements like active projects, health, upcoming projects and notification.

I tried to show all the information and notifications on the same page because it was very convenient and gave a quick access to all information at the same time.

 

This section has 2 options:
1. "Current sprint score":
- Shows the current status of the projects: progress, timeline and budgets;
- Filter to select sprint and dates;
- Team filter where you can select team members or persons (managers, developers, etc.).
- Projects filter (by type of the project, budget, time, project status, etc.).


2. "Upcoming projects":
- Shows projects timeline;
- You can select a week, month or sprint and move forward or back;
- The section also shows all the filters like in the first section.

1. Section "Projects":
- Dropdown menus;
- Color boxes which show you project status (to do, active, hold, in the review, done) and change colors depending on the status;
- Name (ID) of the project and short description;
- Project priority, group of the team who work on this task and created date of the project;
- Photos of the persons who work on this project;
- Icon for fast manage ticket (edit, remove...);
- Icon of notifications about issues "!" (it will change color depending on issues status).


2. Section "Project description":
- Button "Add ticket";
- Color boxes which show you project status (to do, active, hold, in the review, done) and change colors depends on the status;
- Priority status of project;
- Button for editing project information can be used to update the project status and fill project time and other project info;
- Shows name of the project, project description, link to the full brief and link to the files which should be done;
- Info about the person who created this task and creation date;
- Block "Details" will show info about project time, spent hours, budget, delivery date;
- Block "People" will show the persons who work on this project;
- Three buttons where people can write comments for this task, report about issues and history about task changes and updates.

Final visual