Modernizing the look

e-Builder was acquired by our parent company Trimble Inc. in 2018 and Trimble has their own style guide that we were asked to slowly implement.

With that said, there was no mobile-specific library published yet but there was a small team of developers and designers that would work on the mobile design system and contribute components/patterns.

I joined this team to have visibility on what was to come and contribute where I could which would ultimately benefit my design decisions.

This was an excellent opportunity to influence the future design system as none of the components would be formally tested aside from the few of us who would implement them and gather user research along the way.

Login experience

The login was tricky because we had several users that worked in different environments also known as “Regions”. The issue was discoverability. When a user would arrive at the login page and started to input their credentials, the keyboard would immediately cover up the region selection dropdown. One major solution to this was to give a user the opportunity to select their region at first-time login and this way it would always default to the correct one.

The user could still change the region if they belong to more than one (less than 1% of our users) but we added an indicator of what their current region selection is and when they would tap to select a different one, it would take them back to the dedicated region selection page.

This would maximize that discoverability while minimizing the possible error states and giving them the extra layer of control when initially signing in.

Another major addition was a “Forgot your Password” link. This didn’t exist previously as past research indicated little need for it.

Usability studies & iteration

Once the design was complete, I conducted five user studies with clients to gather insights for iteration. Fortunately, there were minor changes made primarily to the error messages and other body text but the biggest win was validating the importance of a password reset link. Several users would simply login through a web browser most of the time or reset it there. Adding that streamlined approach in the app was deemed extremely useful.

Account/Project selection

The account selection and project selection weren’t entirely different in terms of pattern & behavior, but a major change was the user wouldn’t be redirected as much. The original account selection and redesign are identical with the exception of the open search functionality. In general, throughout the app, all searches were a stand-alone icon in order to open the search bar. User feedback, later on, validated that they didn’t always know that they could search many pages due to the lack of visibility. Ultimately, I felt comfortable sacrificing space for this feature.

The project selection lived on its own page with additional stand-alone icons for filtering and searching. This was updated to appear as a draggable modal this way the user would never have to “leave” the page they were on.

Usability studies & iteration

As mentioned above, the open search bar was validated and users took advantage of it quite a bit. A lot of feedback was gathered for future enhancements such as sorting, etc. One additional change was made and that was to swap the page header that originally read “Home” to the actual account title and this was to further confirm the user’s account selection on the prior page.

I added labels as well to the original stand-alone icons such as filter and log out and replaced a chevron with a more appropriate close (X) icon now that the project selection was shown as a modal. I also added labels to the main navigation menu which previously were stand-alone icons.

Add menu

The Add Menu was changed stylistically mainly. The major changes made were to help the user have more control and mitigate the loss of information. For example, when a user would record any audio, it was very easy to lose the recording when closing the menu. I added, “are you sure…?” messages wherever necessary. The properties page was also changed to be easier to read and added the ability to preview files when renaming them.

The folder structure was also enhanced quite a bit, and for both that and the properties pages, the ultimate goal was to improve discoverability and hierarchy.

Usability studies & iteration

As mentioned above, the changes made were mainly stylistic. The few iterations made were label changes and adding industry terms that needed to be more universal.

The main navigation and logging out process were items I was interested in gathering more information on. The last tab was originally titled “More” and the log-out button would live on that page alongside the details (location, important contacts, etc.) The details were on its own sub-page as well and the “More” was really very purposeless.

Earlier on with product and developers, we decided to consolidate the details as one page and I used these studies to land on a tab label. “Project Details” seemed appropriate and we kept the log-out button there as well. This is temporary, however, as no one immediately found it there but as we continue enhancements, there is likely to be another section in the app for items such as version types, offline, profile settings, etc. and the log-out button could potentially be moved there. Fortunately, most users advised they don’t log out manually very often and the app itself has a time-out setting as well so this was very low risk.

Documents

Documents were also mainly changed stylistically but the most exciting part about this module was the opportunity to introduce a new component to the mobile design system; toasts. The module wasn’t changed much from the original and the folder navigation was tested in the Add menu phase so this was designed and delivered pretty quickly.

Toasts were the new component introduced to display the download status of documents. This actually sparked quite a debate with developers at the time because the re-architecture was so complex that the goal was to use as many native features as possible, one of which being that the notifications could replace all messages including error messages and other status updates.

Toasts weren’t even remotely under consideration so I took it upon myself to establish a case against generic iOS notifications being the only form of messaging in the app. This wasn’t difficult by any means, as quite honestly once the scenarios were drawn up and accessibility came into the conversation, it was a no-brainer to customize these elements, and since messages were already designed in the style guide, referencing a library wasn’t too much of an effort.

Workflows

This module was the most important redesign of the app. I dedicated an entire quarter solely to understanding the user flow for the web with the intention of parity with mobile. A large part of that time was also spent mocking up the input fields to match the newer styles. These weren’t meant to be tested so it was more so busy work so ideally by the time I was able to get to actual flow designing, it would be mostly plug-and-play.

The idea was to simplify the process of drafting, starting, managing, and searching a process (workflow). The landing page was very overwhelming and most users felt lost before even starting. On the web, when needing to start a process, the initial step is the select the specific workflow (RFI’s, Change Orders, etc."). On mobile, they were all listed with the most recent two (2) processes under each one. This meant the user would have to scroll endlessly to find something specific or even go back and forth through workflows to find what they were looking for.

In parity with the web, the landing page was simplified to only show the list of workflows. The user could still search by typing but at least the list of workflows would be easier to scroll through. There were several other changes made to enhance discoverability.

A drafts folder was created, for example, stand-alone icons were paired with labels or replaced entirely with label-only buttons and other enhancements across the board.

All decisions were made based on existing research and patterns that users were accustomed to on the web. The idea was that both mobile and web platforms although very different as the end users are different, would not feel like entirely separate platforms.

Usability studies & iteration

Once the design was complete, I conducted five user studies with clients to gather insights for iteration. Though there were several enhancements to the module from a design system implementation aspect, there were only a handful of flow changes.

The main tasks that I tested were:

• Downloading/Removing Offline (enhanced)

• Finding Drafts (new)

• Adding Attachments (simplified)

• Removing Attachments (new)

• Starting Processes (enhanced and removed “quick start” capability)

To my surprise, there was very little iteration. The fact of the matter is that the current app itself wasn’t favored to accomplish work and very commonly the users would be surprised that certain features existed that weren’t new at all. This was great to hear in the sense that any changes made were low risk and could guarantee an increase in adoption.