Challenge #1: Establishing Rules and Frameworks
The Goals
An important aspect of the experience within any system is the expectation that everything is presented with a sense of unity and cohesion between interactions. This can be exhibited by the language used to communicate within the platform, as well as the various visual elements displayed throughout.
Without a defined design framework, the integrity of the system can be called into question, both implicitly or explicitly. Individuals that use it can feel that lack of continuity, especially the more they become familiar with the details of the system. And while it doesn’t make things unusable by any means, those inconsistencies come off as inelegant and amateur.
TiM’s design rules were largely undefined when I was brought on board—colors galore, buttons of different sizes, multiple terms referring to the same thing. A foundational change was needed.
The Problem
Given the lack of structured foundation, it was immediately necessary to establish a framework that could be implemented into the platform without vastly changing the experience. Fortunately, there were already individuals on the team seeking a solution—they just needed a designer to help realize it into existence.
Ultimately, our strategy was to make incremental improvements to both the visual and textual consistency. Due to our team being small, our bandwidth was limited, so these improvements were impossible to quickly fix. Even so, we set the following goals:
- Compose explicit design and language guidelines to adhere to going forward (and retroactively when possible)
- Design content and write copy that reinforce the guidelines
- Identify and correct inconsistencies
- Design a visually consistent full site facelift concept
The Solutions
Design & Branding Guidelines
We decided to make TiM’s branding guidelines two-fold—the first being a simple outline of design and branding that exist both for marketing and application usage. I researched the company’s history and included aspects like the mission and philosophies and how they contributed to elements such as the logo, fonts, and colors. With this as a baseline, we would be able to use the information as a reference guide whenever new features would require these considerations.
Select Pages from Design & Branding Guidelines
Language & Copy Guidelines
The second part of our guidelines would incorporate all the details of the TiM application, marketing site, emails, knowledge base, and how support would interact with clients. They include language (both regarding terms used and the overall personality we should present in all our copy) as well as aspects in the various elements in the application (e.g. pop ups, buttons, links).
With the intention that these guidelines would be a living document, we would update it accordingly when there are new considerations and changes to anything previous.
Select Pages from Language, Copy, & Design Guidelines
Full Application Facelift
Previous iterations of the UI made no active distinction between usage of buttons versus links. It is generally accepted that a link should take users somewhere, while buttons execute an action.With defined guidelines in place, the logical next step was to provide a proof of concept of an application redesign that incorporated a holistic design—completely consistent across the board.
The general foundation of TiM was kept intact, but several sections reconsidered flows while also improving visual hierarchy. Anything that was inconsistent was corrected. Additionally, I referred heavily to Google’s Material Design as a general framework for any elements that we still needed structure for. This would continue to improve consistency, familiarity, and integrity to TiM’s overall design.
Note: This proof of concept was designed while TiM’s branding was going through reconsiderations. I was tasked to create these designs using an alternate color palette. (Showing select screens)
Desktop Company Dashboard
Mobile Company Dashboard
Desktop My Projects
Mobile My Projects
Mobile My Projects - Expanded
Desktop My Profile
Challenge #2: Evolution from Paper to Digital
The Problem
The Goals
Making several complex workflows intuitive for different roles simultaneously is a certainly a unique challenge. On the plus side, having any streamlined and centralized digital solution for many of these tasks at all is an automatic convenience for most of our clients. However, it is important to try to provide solutions to every single person using the system, regardless of their tech literacy. And not just the ability to complete their tasks, but to do it simpler and more conveniently than they can on paper.
The Solutions
(Select Projects, So Far)
To give our clients a better experience completing their tasks compared to the paper-based counterparts, I am regularly designing new features and redesigning current features with additional experience considerations, based on feedback and research. While most feature additions and changes are made to include only minor improvements, there have been several larger design projects that required more thorough planning and iterating to provide solid solutions for everyone.
Progress Bar
It might seem like simple psychology, but people like transparency of information. From the onset, Start paperwork in TiM was presented as being as “easy as 1-2-3,” and the progress bar reflected this. The reality, however, was that there were far more than three steps to complete start paperwork in TiM. Naturally, a pretty significant discrepancy needed to be fixed.
Old Progress Bar
It’s easy to have the expectation that an individual would go through three pages to complete their start paperwork. However, the reality was that there were multiple pages in both the “employment details” and “startwork” steps, which completely contradicts the 3-step process. In fact, completing start paperwork can take between six and eight steps, depending on the government forms the individual needs to fill out.
Based on feedback, it became a relatively high priority to fix the progress bar to reflect the true process. While showing more steps could naturally be seen as daunting, allowing the individual to actually know where they are in the start paperwork process would be much more valuable to display.
After deciding on the business rules, we came to conclusion that the progress bar should be dynamic to cater to the specific individual, for maximum clarity. For instance, if a person already has their profile saved in TiM, the first step would reflect this by showing “review your profile” as its first step. If they are new to the system, the language would say “complete your profile.” Any tax forms they have saved n the system would also show as needing to be reviewed as opposed to needing to be completed. This difference instills confidence in the application that appropriate information is being saved for their convenience.
New Progress Bar
In addition to these dynamic changes, it was important to allow individuals the freedom navigate back to previous steps, especially if errors were made (the former version of the start paperwork progress bar did not allow this). Steps that were completed during the process would have active links, while steps further in the process would be inactive.
Another feature that was important to implement was an adaptive mobile version (meaning, it would have to be a different view from the desktop version). I offered a few variations in designs, but we eventually settled on a dropdown menu as means to navigate to previous steps. It would give users the full transparency we were seeking, without limiting the information due to space.
Adaptive Mobile Progress Bar
Adaptive Mobile Progress Bar - Drop Down Menu
Digest Notifications
Providing a bespoke experience is something I strive for when considering new features in TiM. The more the application can feel tuned to each person using it, the more it can be seen as a step forward for the overall onboarding process in terms of being an improved solution to paper-based methods.
Task management is always a difficult part of workflows, and having notifications to indicate an individual’s outstanding tasks is a helpful tool to include in an application that requires tasks to be completed. Company and project admins are using TiM on a daily basis to monitor and approve start paperwork, so it can be challenging to keep track of what needs attention. It has been a frequent request to have some kind of notification system.
Digest Settings - Daily
Digest Settings - Weekly
As a result of our product planning, we decided that digest notifications were the most sensible method that we could feasibly implement. It allows quite a lot of flexibility to each individual. They would receive an email on a daily, weekly, or monthly basis, depending on their desired schedule frequency.
The resulting email returns all outstanding actions needed by the individual as an approver of start paperwork. Depending on personal settings, they can either see only immediate actions they need to complete in the pipeline or all actions that will need their attention, eventually (so they can plan ahead). Additionally, if they themselves have outstanding start paperwork that needs to be completed, that will be listed in the digest as well.
Of course, while a convenient addition, digest notifications are only a stepping stone in providing an ideal bespoke experience. There are future plans to include instant notifications available in the application itself, which would essentially be built upon the digest notifications as a foundation.
Email Digest
Matching Packets with Crew Members
The more that TiM can do automatically for our clients, the better of an experience it is. Many of the individual tasks within TiM require a lot of tedious repetition. Signatures, payment entries, personal info—all of these actions people would rather do once, and have the system take care of the rest. When assigning start paperwork packets, TiM matches crew members to different selections made in their employment details—union, loan-out status, job type, etc. However, the display of this information, and the ability to customize changes to the matching left something to be desired.
Old Assign Start Paperwork Section
To improve upon this, we decided that several aspects needed to be changed, including the workflow, information hierarchy, and choice options.
This information is available at different steps in start paperwork assignment and approval process, so there would need to be slight variations in how that information is presented (e.g. how it looks at review stages, if packets need to be built, etc.)
New Assign Start Paperwork Section
Review Start Paperwork - Alternate Packet Options
(Gatekeeper Step)
Assign Start Paperwork Without Packet
Master Approval Pipeline
The approval pipeline is easily one of the most frequented sections of TiM. Project and company admins send a lot of time verifying and approving the crew members on each project—going through contracts, tax forms, deal memos, etc. With so much time spent in this section, it is of the utmost importance to make the experience as intuitive as possible.
Oftentimes with larger companies, multiple projects happen simultaneously. Navigating from project to project can quickly become tedious and frustrating. We decided oversight from the company level would be a useful tool for managers and admins responsible for approving start paperwork over multiple projects.
Given the positive feedback of the approval pipeline, we decided to keep the formatting the same (for now), but give enhanced search and filter features to span across all accessible projects for an individual.
Master Approval Pipeline
Mobile Approval Pipeline
Most sections of TiM are optimized for desktop displays. The original plan assumed most company admins would be completing tasks on a desktop computer. While this is true in many cases, it is good practice to give clients the flexibility to complete their tasks on all displays. Given how heavily used the approval pipeline is in TiM, making it possible to complete tasks on mobile displays is a must.
Because the layout of the approval pipeline is essentially a table, a completely different kind of layout (adaptive) would be necessary for mobile—reconfiguring the information so that it is simple to read an access on such a smaller display. After many iterations, displaying each record in a card form became the most sensible method.
Searching, sorting, filtering, and selecting all would be easily accessible at the top, and the important information (attachments and dates) and actions of each crew member would be available on the cards. Depending on the specific role of the approver, their action would be the first buttons on the card, while other approver status can be seen by scrolling horizontally. When a crew member is fully approved, the approval action buttons would be replaced by a single “view” button.
Sorting and filtering would be completely revamped to utilize mobile functionality as well.
Note: this proof of concept was designed while TiM’s branding was going through reconsiderations. I was tasked to create these designs using an alternate color palette. (Showing select screens)
Mobile MAP
(Gatekeeper Step)
Mobile MAP
(Fully Approved)
Mobile MAP
(Filter View)
Mobile MAP
(Select All)
Mobile MAP
(Dates Popup)
What's Next?
Forms-Based Start Paperwork
Assigning start paperwork in packet-form has proved to cause complications from time-to-time. When a crew member needs the change a specific form in their packet, it becomes incredibly inconvenient for the project admin to send an entirely new packet for a single form.
As I’m writing this case study, a significant project is underway to shift from the packet standard, to a forms-based system. We are currently working through business rules and iterating on potential concepts to to give this flexibility to our clients.
Role-Specific Views
The previous veWhen I have spoken with clients, there has been a common desire that has been brought up—specific views catered to an individual’s role. While we currently have viewing permissions in TiM so that pertinent information is only available to those who need it, experiences could definitely be tightened up.
Workflows need to be reconsidered for each unique role that accesses TiM. Giving the individuals the ability to customize their own experiences would be a game-changer. Ultimately, incorporating a user dashboard is where I think the most value could be gained. Individuals can pick and choose what information they would like to see and display it on their own page in the order they would like.
