MyTaskit provides a comprehensive SaaS software platform for coordinating tasks within companies and between multiple businesses and their customers. Below are some of the enhancements and features I’ve worked on for MyTaskit.

Personas 

I utilize personas to help me understand and relate to the end user of the particular product I’m designing for. At MyTaskit we needed to understand the goals and desires of our users to better guide the brand in making decisions about the tools and features we were offering.

Persona 1.

The majority of this work is based on the behavior and needs of the supervisors who are or will be using the MyTaskit app. I developed this persona as a guidepost to help our whole company empathize with the needs of the real users and design with specific user needs in mind. Sam is built from a composite of user interviews with General Managers and supervisors working in the marine industry.

Persona 2.

I developed this persona to help us empathize with the technicians using our product and to design with their needs in mind. Kent was built from a composite of user interviews with technicians who work in the marine industry. These are also the future managers, supervisors and decision makers that will be buying our product one day, so it is key to focus on them as they move up.

Design System

The visual design language we created for MyTaskIt was the design system. This is a series of components that can be assembled to create an interface. Adhering to the standard of a design is how we created a shared understanding and communicated our ideas to the development team seamlessly.

These pieces can be combined in millions of ways and even when all the pieces are really consistent, the results of constructing them are not a cookie cutter template. So the product is greater than a bunch of reusable components, it’s a unique tool that allows for both consistency across teams and project and remains flexible enough to allow for creativity and edge cases.

 

 

Project 1.

Social Profile Feature

The purpose of the social feature, in general, is to allow the businesses that use MyTaskit to share industry info, create groups and follow communities. The activities feature, in the page below, lets other users who are connected to this business see their activity.

The Goal and Approach
The Goal: Enhance the usability to improve user adoption and daily active use.
The Approach: Sketch a few prototypes and show to users, stakeholders, and in-house teams, make iterations, then create mid-fidelity wireframes and then high-fidelity mockups of the enhanced user interface.

Before

It’s common to inherit design debt and I always respect the constraints that prior teams have had to work with. The usability of this page suffered when the pressure to get the feature finished lead to more of a  basic functional implementation of the requirements. Often when this happens in any environment usability will diminish.

 

Prototype Sketching and User Feedback

I started with a few basic sketches that I shared with end users, stakeholders and people on my team such as designers, and developers.  Team input is a huge value to me, I enjoy the results of collaboration and iteration. It also gives the team a preview of what we’re considering and the early input helps us vet the feasibility of our ideas. Getting user-centered feedback is also paramount. I shared these with users through informal user testing groups and the response was positive and insightful.

Wireframe

I created a mid-fidelity wireframe because they are easier to comprehend than a traditional blueprint style wire frame. Mid-fidelity requires a little additional effort but the extra effort is worth it since it gets things moving into production.

Final Result

We moved quickly from user testing and wireframes to high fidelity design because the time we had available was short. This design was approved by the stakeholder, development team and most importantly the users who reviewed it. It was put into development and is currently in production.

Project 2.

Task Priority Feature

The purpose of task priority feature is to allow the business that’s using MyTaskit to place the tasks they plan on assigning to their technicians in the order of priority they would like them completed in.

The Goal and Approach
The Goal: Enhance the usability improving the prioritization experience.
The Approach: Sketch a quick prototype and show to stakeholders, and in-house teams make iterations and then create mid-fidelity wireframes then high-fidelity mockups of the enhanced user interface.

Before

The usability of this feature was low. New tasks were being added however each new task would have the value of 1 applied to it in the first cell of the spreadsheet grid. (see below)

The numbers did not change order until they were dragged and moved down the list. This requirement, to move tasks to reorder them was not understood by our end users because there was no information letting them know what was required of them. This is known as a lack of signifier and leads to confused and frustrated users.

This feature was built by a previous team without the benefit of a UX process in place at the time. The original implementation was technically accurate but the ability for an average user to have any success understanding it was low.

Prototype Sketching and User Feedback

I started with these quick sketches that demonstrated the new tasks could continue to be aggregated at the top of the grid but could be presented with a bold stroke. I shared it with our stakeholder and the developers on my team and we agreed it needed to stand out even more. I added a background color and an icon that signified the row had the affordance of being draggable. The response was positive and since this was a quick gap fix for what was essentially a bug we did not go into further into user testing. I did, however, share it with some informal user groups and the response was also positive.

 

 

 

 

 

Final Result

The drive to fix this quickly was pressing and the changes were minimal so I bypassed wireframes at this point and built a high fidelity design. This design was approved and put into development. Currently, it’s out of production in final Q/A testing.  The feedback from testing has been that the new feature is very clear and intuitive. Users can now click hold and drag a list item down and into any order, they like without losing track of it.

 

Project 3.
Importing Quickbooks Customer Files

The purpose of the Import feature is to allow the businesses that use MyTaskit and Quickbooks to integrate allowing business to port data about their clients seamlessly to coordinate billing and accounting with tasks.

The Goal and Approach

The Goal: Enhance the broader appeal of MyTaskit and it’s usability by adding a simple import tool for all customers who use Quickbooks accounting tools.
The Approach: Observe the current process and determine the needs of these types of customers. Sketch out prototypes and show to users, stakeholders, and in-house teams, make iterations, then create mid-fidelity wireframes and then high-fidelity mockups of the enhanced user interface.

Before

MyTaskit’s system for integrating these customers had been to enter each new customers clients into the system manually. This was time-consuming, error-prone and not scaleable as MyTaskit grows and the customer client base increases.

Through observation and research, I realized that our user’s natural workflow was to use one or two spreadsheets to keep records of their clients. As a result, the feature we were going to build required some type of error handling and notification as users were likely to overwrite some data with multiple uploads as they added new clients.

Prototype Sketching and User Feedback

I began with iterative sketches that demonstrated how a user could search for files, import and receive feedback about the result.

I showed to our stakeholder and developers on my team and we agreed it needed more detailed information about any types of errors. Based on the research I suggested that it would also improve usability to let the users know where as well as what type of any upload failures took place so they could correct them and try again.

 

 

 

 

Mid-Fidelity Wireframes

I used a mid-fidelity wireframe because they are easier to comprehend quickly. As noted above mid-fidelity requires a little additional effort but the extra effort is worth it since it gets things moving faster, out of UI design and into production.

Note: The main focus is the importing tool and since the background was not part of this project I kept it in high-fidelity but grayed it out.

Final Product

This is a quick video walk-through of the prototype I built to demonstrate to our stakeholders and user. We also found this was an effective tool to communicate to our remote developers. This video provided them detail on the functionality we expected from the build.

 

Project 4.

Calendar Scheduling

The purpose of the Calendar Scheduling feature is to allow the business using MyTaskit to place the tasks they plan on assigning to their technicians on a calendar, see all their task and all their employees in one view on a daily calendar.

The Goal and Approach

The Goal: Offer a feature that user research had strongly suggested is a necessity, remain competitive in the industry and increase usability.
The Approach: Sketch a few prototypes and show to dev partners, users, stakeholders, and in-house teams. Then make our iterations and create a clickable prototype for demonstration.

Before

Previously our users would view each technician’s work individually to see their tasks but they had no way to see the big picture of who was working on what task in one screen. The usability was difficult as a result because it forced the users (supervisors) to jump back and forth between screen to see a view of what their entire day looked like.

Research (Ethnographic)

Images from field research demonstrate how one set of users track the progress of tasks being completed day by day using whiteboard grids and calendars. It’s a time-consuming method of manual scheduling that we designed this feature to supplant.

Prototype Sketching and User Feedback

I began with rapid prototype sketches to explore the possible ways a supervisor could look at a list of tasks that need to be done and see a list of their employees time on a calendar and then add those tasks under each employee.

Our users, stakeholder, and developers reviewed the sketches. From that round of feedback, we agreed to narrow the scope of the design to just cover one day view of the calendar. Our users did not find value is seeing more than one day at a time so they could get their guys working with as little gap in their day as possible. Based on the research I also suggested that it would also improve usability to let the users search for their task and filter them vs having a long continuous list to scroll through.

Whiteboard Round

Medium Fidelity Wireframe

In the early stages we had sketched the list on the right and the calendar on the left but after further user feedback and competitive analysis, we moved the task list and search to the left of the calendar area. At this time we also moved into wireframes.

 

 

 

 

 

Final Prototype

I built this prototype in Axure RP Pro vs Adobe XD as I had with the previous Import Project 3 because of the versatility of the software and the ability to make rapid changes to the entire project. I also appreciate that I can save these as HTML and CSS files for front-end developers.