We needed a place in the Winmore app where each user could track and complete their personal work without having to dig through multiple areas. We iterated upon the original Productivity Center originally called Agenda.
Before: the old Productivity Center
Regarding resources and budget, we only had 2 designers and 3 engineers working on Home for a combined 5 months. We wanted to make users happy while still exciting the buyers (key stakeholders in our customers’ organizations with purchasing power).
We used Affinity Diagramming to identify common themes from the interviews
Organization of users' work
Users' work consists of Tasks, To-Do's, Approvals, and Activities. We started off with a team whiteboarding session to brainstorm ideas for organizing users' work. We explored giving users the functionality to mark items as important, or perhaps a Kanban board that would allow users to move items into different columns. However, we didn't want users to have to micromanage their work. We explored categorizing users' work in different pages and iterated upon different ways they could be grouped.
Display of Items
We also explored the idea of displaying items (Tasks, Activities, To-do's, Approvals) via a collapse & expand interaction. However, some items could be very long which would make the element harder to collapse. Each task also had an expandable element within it, and we wanted to avoid nesting expandable elements.
Conversations are message threads or channels, each pertaining to a specific topic. Users can be @ mentioned in a Conversation, which will notify the user in the main left navigation. Users can also follow Conversations, and will be notified of any activity in those via the left navigation. However, users who got back from vacation or who are involved in a lot of Conversations were overwhelmed by too many notifications. Also, once a user was following a Conversation, it was hard to figure out how to unfollow it as this feature was hidden in a slideout.
We decided to make a digest of Unread Conversations in Home. Below is an initial exploration.
After iterating countless times, we created the following designs for implementation.
We organized users' work into In Progress and Agenda. In Progress (as shown above) displays items that don't have due dates, as well as items already started or due in 2 weeks. Instead of making users have to manually micromanage their work, we wanted to keep things simple and group together the highest priority items. In the future, we'd like the make the two-week window customizable but weren't able to due to resource constraints.
With Agenda, we were able to fix the issue of users being able to see their work in only one week increments. With the new infinite scroll list, users can now easily scroll to view all scheduled work. Furthermore, Tasks with start dates now display under the start date instead of the due date. This fixed a major pain point by making it easier to know when a Task starts, rather than learning about it when it's due.
We decided that selecting an item would open up a modal for multiple reasons. This is because Tasks contain expandable elements, and we wanted to avoid nested expand/collapse elements. Furthermore, each task could now have its own unique URL which makes internal and Enterprising sharing (sharing outside of the company) much easier.
We created a digest of unread Conversations. One of the great aspects of this new feature is the ability to mark all or singular Conversations as 'Read'. This allows for a quick clearing of notifications. Another feature we implemented is the ability to mute (unfollow) a Conversation straight from the digest. Hovering over the bell icon displays a tooltip saying 'Mute'.
To conserve real estate, we decided that hovering over a Conversation would allow the user to Reply. However, due to Engineering constraints, the implementation of the Reply functionality was punted for later.
Throughout this whole process, we consistently collaborated with engineers and PMs. With every design made, I took into account Winmore's vision and roadmap of the product, such as Enterprise sharing and modals. Modals were a completely new component introduced with Home and are replacing slideouts in our app. They're also being used for other new features such as To-Dos. Buyers expressed happiness that they could view their work in more than just one-week increments.
I also did front-end development for this project, including styling and fixing cross-browser bugs.