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.
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.
User Feedback and Research
We had a database of user feedback we had been collecting feedback for years through:
We used Affinity Diagramming to identify common themes from the interviews
Research Insights & Thematic Pain Points of old Productivity Center
Based on User Research and Leadership's vision, we made the following goals for the new Productivity Center:
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:
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
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
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
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.
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.
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.
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.
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:
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.