Design process of Simple Project
My second assignment, as part of the bootcamp 'Get a New Job in UX Design' of the Interaction Design Foundation, was to design the interface of a new project management tool. Below you can find the design process I went through.
Design a new project management tool for startups and medium-sized companies.
The first step was to find out what other project management applications exist and how they organize the workflow. I studied four leading brands and reviewed their interfaces.
Read the reviews here
In order to find out which project management applications people use, and how they use them, I interviewed four people.
Find the results of the interviews here
User personas, user stories & use cases
In order to get a better picture of the future users of the new project management application, I created two user personas. To find out what they would like be able to do with the application, I wrote 36 user stories. The initial flow of the application was started with the writing of 10 use cases.
View the user personas
Read the user stories
Read the use cases
Project methods, planning tools & charts
Which project managements methods do businesses use? What are the similarities between them? Which diagrams do people use to visualize their work? Which chart layout has the biggest impact?
To answer these and other questions, I researched various project management methods and planning tools. I also experimented with different ways of displaying charts.
Click on the following links to find out more:
Project management methods | Visual planning tools | Chart experiments
Creating a conceptual model is normally not part of the UX design process but having said that, the information you can get out of this model is invaluable.
User flow diagram
By combining the use cases and the conceptual model, a user flow diagram was created. It gives a good impression of how the application could work.
During one the interviews, one of the interviewees told me that the bright colours of the business application she used, had a positive effect on her. The moodboard on the right is inspired by this comment.
Now that all the research was done, it was time to give shape to the application. The wireframes below is a translation of the most important parts of the conceptual model to an actual design.
By combining the moodboard with the wireframes, the high-fidelity designs below were created. The design is now almost finished!
The final step was to convert the static images of the high-fidelity design into an interactive design. To achieve this I used a program called Presentator. With this program it's possible to add clickable areas (links) to an image in order to go from one image to another.
Click on the image on the right side (or below on a mobile phone/tablet) to see the final interactive design!