ROLE:

I led the UX and visual design, which included collaborating with our Design, Engineering, Product, and Construction Teams in order to ship.

Setup:

After the initial rollout of the Rhumbix Time Card for the web app, we added editing functionality for administrators. We prioritized the release of the editing feature by first being able to add or edit a worker or cost code on a daily time card. Later, we would include the ability to add or edit absences and notes to the time card making the time card fully editable.

Process: Part I

Understand:

When I started working on this project I mapped out the Who, What, Where, Why, and Process to help identify key users and core functions. I took an initial stab at filling in each category and then talked through my thinking with the product team to solidify the feature requirements.

Iterate:

With the feature's key users and requirements in mind I was able to start sketching lo-fi wireframes that helped to visualize what editing would look like within our current web app. I drew inspiration both from current patterns in our app and also how other apps allowed users to edit content.

During this phase I worked closely with our product team and engineers to understand what was within the limits of implementation given our timeline. I started to hone in on using modals as the vehicle to allow users to edit content because they would be easy to implement, reuse, and still provide context to the content the user was editing.

Refine:

After exercising many variations in a low fidelity state, and deciding to structure the functionality around modals I was able to focus on visual and interaction refinements. Users would be able to edit content on the daily time card by selecting an 'Edit' button which would make the content active. From there users could hover and click to edit workers, hours, or cost codes on the daily time card.

Features Part I

Edit/Add/Mark Absent/Remove Craft Workers

Users can quickly edit or add workers on the daily time card view within the edit mode. They are also able to remove a worker or mark them as absent which also records the reason for their absence.

Edit and Approval Record

When we introduced editing we knew we would also need a log of changes to help maintain the integrity of the data. Another feature users asked for was a way to approve or sign off on time cards which we included as the 'Approve' button .

Edit Hours

Users can quickly edit workers' hours in the daily time card view within the edit mode.

Change Cost Codes

Just like changing hours, administrators can quickly update cost codes that may have been assigned time incorrectly or add another cost code to a time sheet.

Add Cost Code/Craft Worker/Note

Along with editing time card information administrators needed to be able to add cost codes, craft workers, and notes to existing time cards. We decided to allow users to add content to time cards within the editing feature through the 'Add' button and menu. 

Process: Part II

Understand:

With an established editing framework in place for editing cost codes and workers, we also needed the ability for administrators and foremen to edit and add notes to daily crew time cards. I went back to the whiteboard to establish the flow with the team and to start sketching variations on how we would add notes using the modal structure.

Refine:

Once we had sketched and established the flow, we were able move quickly into a refined stage by applying the patterns and visual styles from earlier to the modals for adding and editing notes. 

Features Part II

Add Note

Since adding, editing, and removing notes were an extension of the patterns and modals we developed earlier, we were able to add 'Notes' to the existing menu structure. To add a note, the user is asked to select from several preset note categories which then trigger a corresponding form form them to enter information. Providing formatted modals served two purposes in that it helps users to structure data and also replicates the experience for adding a note in the mobile app.

Edit/Remove Note

When users edit an existing note we were able to use the same form modal that is triggered when a user adds a new note. By reusing modals we created a consistent user experience and again saved development which helped us ship faster.

Summary & Lessons Learned

I enjoyed working on this project because I was able to help negotiate the trade-offs between user requests, usability, and engineering effort. In the end I liked that we built a system of patterns and UI elements that we were able to use to speed up design and development time of later additions to the feature.

Ideally we would have liked to accommodate for users to edit content inline, but for the sake of speed, ended up with a flexible and reusable framework of modals that users trigger by clicking on 'active' content. For future iterations of this feature, it would be great to improve the edit/approval log and document control system for timecards to help administrators maintain the accuracy of their records.