Date: 2019
My role: Primary product designer on the FixIt product scrum team.
Background: Way2B1 is an enterprise software platform for family offices. FixIt is a task-oriented application within the Way2B1 platform. It is currently in Beta version. Pre-2019, there was a browser-based desktop FixIt and a native mobile application of FixIt. For several key UX, and business-related reasons, in 2019 the Way2B1 FixIt team redesigned FixIt as a PWA (Progressive Web App). This shift would allow users to have a very similar experience on any of their devices and required no updating on their end - and gave us a chance to address other user frustrations through a refreshed UI.
Goal: Redesign the FixIt mobile and desktop experiences as a PWA. Users should be able to report, assign, and track work-tasks from their phone and desktop.
Process: I conducted user-interviews for feedback and user-need-findings, helped define product success metrics, and of course created mockups/UI/prototypes in Figma.
Outcome: This application is in Beta version, and as such most analytics & outcomes are confidential and in-progress, but after moving to a PWA, several engagement metrics have risen. Beta users are currently able to report, assign, and track work from any device through the browser.
(above)
This is what the final product looked like by the end of my time there. Unfortunately I was not able to find an image of the desktop app before the redesign.
As part of the redesign, we changed up the color palette and elements to look and feel more like the other apps in the platform. We also wanted to emphasize the priority of each of these tasks, and highlight when the last change or update to each task was. Before, tasks were listed by status - so in order to find the task you needed to know what status it was. In the new design, we put all the tasks together in one view, and made the filtering and sorting a priority.
Below are concept works I made for the desktop view that have NOT been published (to my knowledge). They are concepts for individual detail-views of each task, so you’d click on each task and get more information about them.
This is a concept for what a user would see when they click on the task. The screen splits, allowing for a preview of the task without needing to completely leave the list. If you choose to, you can make the task detail full-screen (pictured below).
The task detail contains an overview, which highlights the immediately needed information about it, such as who is assigned to it and who created it, and when, and images are below.
The activity is shown to the right - includes comments and a history of actions on the task. This section would stay fixed to the right.
We really wanted to get most of the important details “above the fold” as much as possible, because we found the people reviewing these tasks mostly skim for the parts that they care about - some reviewers care more about who reported it, some care more about most recent activity, and some care about who is working on it.
If made full screen, the user would see more widgets, such as any checklists made on this task. They’d still see it in preview mode, but with a bit more scrolling.
Here’s the before and after of the mobile version of the PWA. One of the main changes we made was making each task more “visual” - we heard from our users that the pictures added a lot of context for them, and they wanted to see those right away, kind of like a social media feed. It helped them easily see which tasks were missing pictures, and then they could request some. Specifically, they wanted to request them through leaving a comment on the task, ideally without leaving their place in the “task feed” list.
Another change was making app navigation more more clear, by adding a bottom nav bar. We wanted to make sure people could navigate the app or create an item very quickly, one-handed (since they were often on-site), and no matter which hand was dominant (hence moving the main action to the center of the navigation bar).
We also prioritized quicker filtering, with more options.