Background

Why was a Productivity Center even needed?

Users' work lives in different areas of the Winmore app. Work consists of Tasks, To-Do's, Activities, and Approvals.

Without a centralized place to do their work: 1) Users wouldn't be aware of what work was assigned to them without checking their emails 2) Users would have to navigate to multiple Workflows and Records to complete their work 3) It would be harder to discover upcoming work.

For those reasons, we created a Productivity Center called 'Agenda'. However, it had been years since Agenda was updated and we wanted to revamp it.

Why Revamp the Productivity Center?

  • Update outdated patterns to current ones
  • UX research unearthed a lot of feedback about the Productivity Center (more about this later)
  • Leadership loved the idea and included it in their product strategy & vision
  • It would be a good selling point for Sales
  • Keep Buyers (key Customer stakeholders) excited with new features
  • We were in the process of creating the To-Do's feature, and Agenda was never made with To-Do's in mind.
  • Required moderate engineering effort, but would have high impact
The Impact and Effort Matrix

Constraints and Collaboration

Regarding resources and budget, we only had 2 designers and 3 engineers working on Home for a combined 5 months. We kicked the project off with our usual JAD (Joint Application Design), a meeting consisting of engineering, design, and a PM to set expectations and timelines.

Phase 1: Discovery

User Feedback and Research

We had a database of user feedback we 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

Research Insights & 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 and Users wanted to be aware of Tasks prior to when they were due. At the time Agenda was created, Tasks didn't have start dates, but that functionality was added later on.
  • Viewing completed work was buggy.
  • 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.

    Below is the old productivity center

Phase 2: Define

Defining Success

  • Ideally, we wanted to measure if work items were being completed more frequently in Agenda vs elsewhere in the App. However, Agenda had been built years ago, and Engineers had not added the necessary Events to track where Work Items were being completed.
  • We did want to see if other metrics increased, such as Daily Active Usage; however, those would indicate correlation rather than causation.
  • We decided to rely on Qualitative User Research data to see if they reflect improved experiences
  • The project would be successful if the following goals were met

Defining Goals

Based on User Research and Leadership's vision, we made the following goals for the new Productivity Center:

  • Users can see their work in more than one-week increments
  • Manage unscheduled work better
  • The clutter of Unread Messages can be cleared in one click
  • Present a consolidated way to view Unread Conversations
  • View completed work in the Productivity Center in a bug-free experience
  • Account for Task Start Dates

Phase 3: Develop

Below are a few of the many features we iterated upon.

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 to help users organize and prioritize their work. We created several prototypes that explored the following ideas:

  • Giving users the functionality to mark items as important
  • Re-ordering items. This was tricky because users would need to reorder any new work that came in.
  • A Kanban board that would allow users to move items into different columns to organize work

We presented basic mockups for internal testing — users' feedback was that they felt they were given more work upon work to do. They didn't want to have to micromanage their work and instead wanted Winmore to intelligently organize their work for them.

With that in mind, we created a new iteration with different architecture. We designed a section separate from Agenda called 'In Progress'. It would contain work that either had already started, was due soon, or unscheduled. This way, unscheduled work wouldn't have to live in the inherently time-based 'Agenda', and the user could focus on their most pressing work in 'In Progress'.

Below is the old vs new architecture


In Progress highlights the items a user should be focused on today. Agenda presents all the users items in a chronologically sorted list so they can easily see present and future work, while History lets users browse completed items.

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. We hypothesized modals would be a better experience and presented prototypes of both Modals and Expand/Collapse methods to internal Users and key external users. They by far preferred the Modals. Although modals would a new pattern, they aligned with our vision of replacing slideouts, one of our most complained about UI patterns.

Prototype of Expand/Collapse

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. We knew having a 'Mark all as read' button was imperative.

Below is an iteration of home

Phase 4: Deliver solutions

After iterating countless times, we created the following designs for implementation.

As aforementioned, 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.


Modals
We decided that selecting an item would open up a modal as this was preferred by internal users. Tasks also 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 also wanted to use modals to replace our old pattern of Slideouts which users had a lot of complaints about.


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, we were unable to do so due to Engineering constraints.

Beta Testing

We had a period of about 2 weeks of internal QA testing which I spearheaded, and 2 weeks of external beta testing. I led 2 other people in testing for bugs and created a detailed spreadsheet for testing. Internal testing allowed Engineering bugs to be found and fixed, and we shipped some minor usability improvements.

Outcome and Final Thoughts

Overall, the project was a success as we accomplished all of our goals for this project with the delivered designs. We also received positive feedback from both Buyers and general users.

Here are some key themes from feedback:

  • Users reported being happy that they finally didn't need to view work in 1 week increments, but could just infinite scroll
  • Many users mentioned that they really liked being able to 'Mark all as Read' in the Conversations Digest.
  • Some users wanted to be able to adjust the 2 week window of In Progress, and that's certainly something we'd like to do if given the resources.
  • Some users reported wanting to respond to conversations from within Home. However, we consciously chose not to do so because 1) Our goal is to drive users into the Record's Conversation where there is more context that the user may want to know before responding. 2) It's technically very difficult. Home isn't constantly refreshing and displaying a live feed of records, and it's possible that a user would respond to a message that is now out-of-date.
  • DAUs increased by 17% after a month of release, though that only indicates correlation rather than causation.

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.

Role
Front End Development, Product Design, UX Research
Time Frame
Design: 3 months | Engineering: 3.5 months
Company
Winmore

My Work

View other projects