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).

User Feedback and Research

We already had been collecting feedback for years through:

  • Internal feedback tools: users can log feedback and bugs through our app
  • Feedback collected from the Customer Support team
  • User Experience interviews. I led this initiative and we interviewed managers, C-level executives, and general end-users

We used Affinity Diagramming to identify common themes from the interviews

Thematic Pain Points of old Productivity Center

  • Users could see their work in only one week increments at a time, but wanted a larger scope of their work.
  • Tasks only displayed on their due dates. However, users wanted to be aware of Tasks prior to when they were due.
  • There was no way to manage priorities.
  • Having unscheduled work with no due dates in Agenda, which was inherently time-based.
  • Users wanted a consolidated way to view Conversations (message threads) they were following.
  • Users were overwhelmed by Conversation notifications in the left main navigation. Some would ignore them and let them build up.

Iterations & Initial Challenges

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.

An exploratory iteration with expand/collapse functionality

Unread Conversations

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.

Final Solutions

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.

Unread Messages

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.

Final Thoughts

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.

Home Productivity Center

We overhauled the original Productivity Center to better inform users of their work and provide a digest of relevant message threads.

Front End Development, Product Design, UX Research
Time Frame
Design: 1.5 months | Engineering: 3.5 months

My Work

View other projects