Spirit

Role

User Research

User Stories

UI Designing

Wireframing

Prototyping

Context

Spirit is a task managing app that will help individuals manage time, manage tasks, and stay connected with their team members. It can be used by professionals, students, a group of employees, or an individual that wants to get better at managing tasks. Nowadays, it is getting common for people to procrastinate things and not taking their responsibilities seriously. As a UX/UI designer, my first step was to discover a problem by taking Double Diamond approach.

Double Diamond Approach

Discover Stage : Problem

According to Erich C. Dierdorff's research from HBR.org(Harvard Business Reviews), skills useful to manage tasks are Awareness, Arrangements, and Adaptation. From a study of 1200 people, awareness and arrangements are the skills people struggled with the most. He made few points like prioritizing activities, avoiding the urgency effect, using an app with a calendar, scheduling time efficiently, seeking feedback from others, and trying less complicated goals to solve arrangement skills.

Research Study

Define Stages : Problem

Based on the research, few people lacked time management skills and not enough time to collaborate with their colleagues outside of work. Another group of people did not know how to use the time management app properly, and some did not use any app.

Goal

While keeping the problem in mind, the goal was to create an app that lets users collaborate with their colleagues outside of work, manage their tasks and time quickly, and guide them to understand app features more comfortably. With all this keeping in mind, I started creating user stories.

User Stories

Creating a story board helped me to put myself into the user's perspective and identify pin points, Problems, and their experiences from start to finish.

User Personas

Based on this research and User stories, I created these personas that helped me to design user oriented app.

Initial Notes

Develop Stages : Site Map

With the help of my notes and an inspirations from other competitors, I created this Site Map. This Map was to make sure that I am adding all the important components and to ensure that I am reaching my persona's goal.

Lo-Fi Wireframe

Initial Wireframe

Challenges

I put my challenges on the bottom because I wanted to show my failed wireframe first. After all, that was my biggest challenge.

My challenge was to make a calendar that will show tasks only when a user clicks on a specific date. Another challenge was to summarize upcoming and ongoing jobs on the dashboard while keeping it simple. After researching newly designed apps, and it's functionalities, I realized that this wireframe was not meeting the goal. So, I had to create this app without any wireframe to save time and make my process less stressful.

Color & Typography

I wanted to choose fonts that are professional and clear to read. I decide to choose between "Josefin Sans" and "Futura." I choose Josefin Sans because it is clean, simple, and its font weights are well balanced.

#FFE7D2

#2E3941

#F1F1F1

#000000

Heading - Jose Sans THIN, 30

Body 2 - Jose Sans REGULAR, 10

Button - Jose Sans REGULAR, 20

Body - Jose Sans REGULAR, 16

Heading 2 - Jose Sans BOLD, 16

Heading - Jose Sans THIN, 30

Heading 2 - Jose Sans BOLD, 16

Body - Jose Sans REGULAR, 16

Body 2 - Jose Sans REGULAR, 10

Button - Jose Sans REGULAR, 20

Final Outcome

User Homepage

As the research conducted by Erich C Dierdorff mentioned, "prioritize the activities." With that being in mind, I created this user homepage. When a user logs in, they will see "In Progress" tasks and upcoming "meetings" on that specific day.

User Homepage

As the research conducted by Erich C Dierdorff mentioned, "prioritize the activities." With that being in mind, I created this user homepage. When a user logs in, they will see "In Progress" tasks and upcoming "meetings" on that specific day.

Calendar

As I mentioned before, One of the problems was not having a calendar on an app and if it did have, then not having to function correctly. I solved this problem by designing a calendar that highlights the day a user is having tasks and showing the assignments in detail when a person clicks on that day.

Calendar

As I mentioned before, One of the problems was not having a calendar on an app and if it did have, then not having to function correctly. I solved this problem by designing a calendar that highlights the day a user is having tasks and showing the assignments in detail when a person clicks on that day.

Task

A feature that lets users stay connected with their colleagues was missing in many apps. I solved this by creating a component inside a "create task" page. With this feature, a user can create new tasks and add team members as they like.

Task

A feature that lets users stay connected with their colleagues was missing in many apps. I solved this by creating a component inside a "create task" page. With this feature, a user can create new tasks and add team members as they like.

Thoughts

To conclude, If I had more time, I would share my designs with real users to get real-time feedback and conduct a study to find out more about the problem. As far as my experience, It was frustrating and joyful at the same time. Frustrating because my original wireframe was not reaching my goal and enjoying because I had a chance to explore my creativity.
   
My design approach was the double diamond methodology:
 
Discovering a problem by researching other apps functionalities and user frustrations.
Defining a problem based on the research.
Developing multiple designs to test if the goal is being achieved.
Lastly, this project was just a concept, so delivering a solution with a fully functional app was not appropriate.

Checkout Other Projects

Coffee Break

Business App

Darbe

A Philanthropy Platform

LinkedIn

Homepage Redesigned

Designed By Jeet