PROJECT OVERVIEW
Taskworld is a workplace management tool that helps empowers businesses to streamline operations, enabling better communication and collaboration.
Problem
We received numerous user requests from canny portal to improve the calendar view in Taskworld Web App as they were facing difficulties managing quick tasks and meetings.
My Role
I got assigned to this project to improve UX and UI of calendar overview where I conducted UX research, validate improvements and updating the components on design system
Outcome
95%
Maze Report
Users easily completed tasks using the new calendar view
85%
Users found cleaner and more user-friendly for smoother navigation.
Maze Report
Tools Used
Figma
Canny
Miro
Maze
Mixpanel
Disclaimer: The data in this case study is simulated and created solely to demonstrate my design process. I strictly adhere to confidentiality agreements, ensuring no proprietary or sensitive information is disclosed.
HIGHLIGHTS
Improvements for Better Experience
MULTIPLE VIEW
We designed multiple views as there were high request from feedback
INTERACTABLE DATE EDITING
Most of our customer do use notification so we designed the optimized notification screen.
UNCOVERING ISSUES
Gathering Feedbacks from Canny
I started this project by collecting feedback from Canny with the help of our customer success team to get insights. These insights helped me to understand the current state and what are the areas for research.
18
Feedbacks
56
Total Votes
Feedback Overview
Customer facing problem of:
Unability to edit the due or start date on calendar view
24 votes
Lack of Multiple views including day, week, month
15 votes
No Task Filtering on Calendar view
12 votes
No way to create a tasks while click on empty date block
5 votes
56%
Customer suggested to have Work on weekend feature on Calendar
49%
Customers wants to have interactive calendar to adjust dates and time
Exploring Current Usage
Through those feedback, I checked on event log on Mixpanel to identify the feature stickiness.
6%
Page-View: Calender
3%
Calendar: Clicks on Task
1.5%
Calendar: Click on View More
1%
Calendar: Clicks on Today
0.5%
Calendar: Change Month to Next
0.2%
Calendar: Change Month to Previous
After doing analysis on Mixpanel, I found few Insights:
3%
of our exisiting customers coming to calendar overview page Daily (Daily Active Users)
45%
of them are dropping off after few interactions as per user flow we found on Mixpanel.
DEFINE THE PROBLEM
Designing Questions
The above findings helped me to create few design questions. Some of them are:
We know that 49% of our customer complaint about lack of editing dates of a task.
How might we design the interface with interactive date set that would increase the daily active users by 10%?
We know that 18% of customer faces the problem of not being to able to filter tasks.
How might we design the solution for filtering tasks in Calendar that would decrease the drop-off rate by 10%?
Creating Stories
Based on the design questions, I worked with product manager writing stories that emphasize goals, pain points and took this opportunity to redesign the whole calendar overview.
As a user, I want to see multiple view
As a user, I want to add task in my calendar view
As a user, I should be able to change date easily
As a user, I want to see all of my daily task at once
As a user, I want to add my meeting task on timely basis
As a user, I want to see my task whenever I click on tap
As a user, I should be able to distinguish between task having due and start date only
As a user, I should be able to hide filter panel as losing my focus and occupying more space
As a user, I should be able to filter task in calendar overview
IDEATE AND PROTOTYPE
Brainstorming Ideas
Based on user stories, I started working with design team to create low fidelity wireframe based on design questions.
For Instance,
How might we show more than 3 tasks on single block?
During Brainstorming ideas, I also tested out 2 design variations for the same design question with internal team.
Variation A
To show more tasks, user clicks on 'n more' link to open a widget with list of task.
20 Votes
Variation B
To show more tasks, user clicks on 'n more' link to expands the blocks in a row.
45 Votes
Designing Scenarios
We started working on High fidelity prototypes and syncing components to existing Design System.
We utilized Figma variables to optimize the design before handing it over to the developer.
we designed over 30 scenarios for each user story that would be using for usability testing
TEST AND ITERATE
Usability Testing
We select few scenarios for Usability Testing that we were conducting over Maze
Testing Session
We invited external participants to complete various tasks. We asked follow up questions to get feedback
12
Participants
04
Tasks
95%
Average Success Rate
Headmap of Showing all Tasks
Over a week, we got numerous feedbacks from participants which we used to iterate our design further.
I got a bit lost when I was looking for disabling the weekends. I was looking for something like calendar settings, not view settings
As im used to google calendar, this feels very easy to follow and also good to change the view setting into day/week/month :D
Integration with other calendars would be great
Very convenient and ease-of-use
Create Task modal can be improved by changing placement and editing UI of Editor, it doesn't look good
Thanks guys, this will answer some customer's request for more usable calendar. What is also requested quite often and would be awesome to include is display of the number of the week and setting to start week with Monday instead of Sunday.
CONCLUSION
Major Takeaways
Challenges & Learnings
Facilitating brainstorming sessions as a member of a scrum team can be more challenging than it may initially seem. Often, ideas are rejected due to the competing priorities of product managers, who prioritize business goals and customer value, and engineers, who focus on technical limitations. To address these situations, we sometimes incorporate brainstorming and ice-breaking activities to stimulate creativity and encourage quantity of ideas over quality during this phase.
Future Work
As we were getting feedback from usability testing, we have already determined the priority of new user stories and significant improvements for new phase of calendar. To gather real-time data on user events and usage, we utilized Mixpanel.
