Asset Tracker

Time: December 12, 2023

Role: UX/UI Designer

Software: Figma & Figjam

Our Task

We were assigned to continue the asset tracker project from the previous 2 cohorts to more teams outside of the innovation lab. This involved understanding previous research and conducting our own,

Planning

We laid out a clear timeline of how and when we wanted to get pieces of this project done by. It’s important to note that documentation was a continuous process over the course of this project, as it typically is with R&D innovation lab work.

Critique & Expansion

Before diving into this case study, it is worth noting that previous cohorts did work on this before us. We synthesized their user research, to identify any missing features, as well as hosted a design critique of what we would change from their designs. Other than that, the rest of the work was done completely by us, ideating and iterating on over 400+ screens and 5 passes of variations for screens before settling on final designs. Needless to say, we did a ton of leg-work for this product, and the final designs looked quite different from the initial screens

Cohort 19 & 20’s Asset Screen

Our Asset's Screen

Phase 1:

RESEARCH

PHASE 1: RESEARCH

User Interview

Because this was a scope expansion, we conducted our own user interviews on a key stakeholder. I outlined a few of our most impactful questions below that have.

PHASE 1: RESEARCH

Affinity Mapping

We condensed the findings of the previous cohorts work as well as our own into a few pain points and key features. We also looked for any technical scoping considerations we should make before moving on.

No official way to deal with device cycling and upgrading

Device turnover is a very manual process

Streamline and standardize the process so every manager doing asset tracking does it the same

Critical reminders for seeing the status of Apple Care and when to renew it.

Keeping track of which teams are using which devices

Notification when devices reach lifespan

Easy processes to assign and unassign assets from employees and teams

The Asset Tracker:available for every device manager across the WSIB.

Notifications for when any device is going to expire

Specific device metadeta showing locations

Phase 2:

DESIGN

PHASE 2: design

Design Critique

We first decided to see what we were working with. As a team we went over the previous cohorts designs and challenging decisions they made, and seeing what works and what can be changed.

PHASE 2: design

The Essentials

We needed to then establish a few foundational colours and fonts to begin atomizing our design system and rules we used with each color and font.

Primary Blue

#246DF8

PHASE 2: design

Iterate. Feedback. Repeat.

The bread and butter of design. We iterated on 500+ screens, as well as scheduled regular meetings with our team lead to discuss design decisions before we were able to settle on a set of screens we thought worked well together.

PHASE 2: design

Mobile Iterations

Just to show you how much our designs changed over time, look at the progression of how we chose to design the asset scan screen and the final interactions we decided to go with after much thought. The reason the button placement changed up so much over time was due to the initial feedback we received, on separating the action buttons from navigation buttons.

PHASE 2: design

Desktop Ideation

After gaining an understanding of what we thought the mobile app was going to look like, we went ahead with coming up with concepts for how the desktop would look and feel.

Mission Control

This dashboard is all about efficiency and clarity. It's designed to feel like a command centre, giving users a bird's-eye view of their assets with quick access to detailed information. The interface is sleek and modern, with bold colours, clear typography, and intuitive icons that guide users through their tasks effortlessly.

Kindergarten Teacher

A playful and approachable design that feels friendly and welcoming. It's perfect for users who prefer a straightforward, no-pressure experience, with clear labels and easy-to-understand navigation, much like a teacher guiding you step-by-step.

Artistic Fortune Teller

A sleek and intuitive dashboard that seems to read your mind. Designed to anticipate your needs, this concept surfaces the most relevant information based on your habits and the context of your visit. It always seems to display just the right information, at just the right time.

PHASE 2: design

Desktop Iterations

You can probably guess what we did next...

Phase 3:

TESTING

PHASE 3: Testing

The Test

User testing was hosted on maze and completed asynchronously and anonymously. Due to time constrains, we only created a Maze test for mobile flows. The test consisted of the same structure repeated over 7 flows. You can find the link to the full user test here.

Prototype

Users go through a Figma prototype.

Opinion Scale

How would you rate the ease of use of your experience?

Open Ended Feedback

Are there any comments or feedback you would like us to know about your experience?

The Story

Participants were told they were a manager at the innovation lab and they had to perform the following tasks:

A cohort has just ended, archive an employee
You purchase a new asset, add it to the app
Scan three items in a batch
You have scanned the wrong item, remove it from the batch
You want to find an employee
You need to update the information on a device

PHASE 3: Testing

Results and Considerations

These are any red flags that came up through the open ended feedback, rating, or any of the statistics we looked through for each of the flows. There are we considered than what I display below, but for this case study, I picked two interesting trends we noticed.

Batch Scan Results Analysis

These initial numbers were things we had to look at and understand why people were eventually able to figure out the flow, but seemed to struggle a lot to get there. It made more sense when we looked at more of the open ended feedback as well as trends we saw in the heat maps.

This screen had a 70% misclick rate. Participants were clearly confused about where they had to click after completing their batch scan, to the point of them clicking on icons that didn’t even make sense. This is something we needed to address

Click to Edit Issue

Participants had an extremely common pattern of misclicking by not selecting the edit button when available, and instead were clicking on the field they wished to edit.

In this case, we decided that this was a first time user issue, and after a few uses of the application, users would understand how to edit lists. We can’t design everything for first time users, otherwise the app would be too explicit and it would be difficult to navigate and understand

Phase 3: User Testing

The Changes

We looked over our results and considerations, and made sure that we made changes to our designs that would improve scores

Add to Batch Animation

This was the biggest change we made, we made sure that it was more obvious what was happening when you scanned an item to a batch, and this new animation acts more like e-commerce UI trends we’d seen in comparators

Hidden Interactions

We had to play with some of our hidden interactions working under the assumption that with the task that involved removing assets from a batch scan, could have better tap to edit interactions if there was some sort of swipe to delete feature that is common on other applications.

Clearer Copy

We had to change some of the copy of the buttons to make it easier for the users to understand where to click next in certain flows.

Phase 4:

FINALIZATION

We also went over interactions and designs within desktop that may not have been self-explanatory for developers and future cohorts to look back on designs.

PHASE 4: Finalization

Handoff

And with that, we had finished designing the asset tracker! We worked on documenting and providing context for many different screens. Due to time constraints we did not get to actually complete a dev handoff session, so we provided context and a slideshow for the next design team to help us out with that process.

In the end we had a long list of future considerations that we asked the future design team to think about while the product was being rolled out, as well as more key technical scoping items to be done.

Working on the asset tracker taught me tons about working in a team, providing reasoning for your design rationale, as well as figuring out how to combine the ideas of your team and yourself to create the best product possible.

Thank you.

Check out some more of my projects below!