Subform Redesign

For ETQ, part of Hexagon

Tools Used

Figma

Lunacy

InVision

My Role

UX Design

UX Research

This project was undertaken at a former employer - ETQ, part of Hexagon. Any brand names/product names mentioned are property of said company. I am sharing this work for portfolio purposes only.

Problem Background

The product I am working on here is called ETQ Reliance, a quality management software used in a wide variety of industries. A subform is a type of data entry form within a "document" in the product. An example of what the subform may be used for is storage of customer contact information.

Problem Statement

The goal here is to update the subform incorporating feedback given by customers (users).

Team

My role in this project was UX designer. On the product side, I worked alongside a fellow UX designer/researcher and the Product/UX Manager. On the engineering side, we discussed technical specifications with our Dev Lead and his team of about 5-8 front-end developers. The project was eventually deprioritized. When the project was later revisited, I worked mostly solo, with some collaboration with another designer.

Final Prototype

Design Process

Phase 1

Phase 2

Phase 3

User Interviews

I had the opportunity to interview 2 customers - several users from each company - about their experiences using subforms, what use cases they have, and what pain points they have when it comes to subforms. A few main pain points were: no ability to take global actions on multiple fields (ex. having to delete records 1 by 1), pagination issues, loading issues, difficulty reordering records, lots of wasted white space, and difficulty with expanding/collapsing records.

Subform in the most recent version of the product

I began by adding a 3-dot dropdown menu to add several functionalities: copy/delete record, and add record below/above the current record.

Here I moved the copy function up into the purple bar and added icons into the 3-dot menu.

Here I moved the copy function to the left to implement a global copy function utilizing the checkboxes. I also moved the "oldest to newest" sort up next to the "collapse all".

Global "Copy" function is only available when 1 or more checkboxes are checked.

After considering it may not be best to hide the actions in a 3-dot menu, I experimented with having a small icon bar instead. The actions are: move up/down, delete record, and add record. I also replaced the expand/collapse indicator icon.

I moved into fully mocking up all components. I redesigned the top action bar, expanding the global actions to copy, delete and expand/collapse.

I also returned to a 3-dot menu for the local actions.

I reduced padding between fields, as the customer noted that there was a lot of wasted white space. I also left aligned all fields.

Subform shown in the context of the full screen

I shared some of the screens with one of the customers I had previously interviewed to get their feedback. Overall, they were very excited about the direction in which the project was going. Updates to the pagination still need to be made.

Expanded the 3-dot menu and added icons

We wanted to bring more contrast into the subform, so I brainstormed some different color combinations using colors from the brand's existing palette.

The project was deprioritized by Product after Phase 2. I later returned to the project, as it had been escalated again due to repeated customer concerns. I met with the customer, and continued iterating on the prior designs. I collaborated with another designer, and the form design was changed slightly.

I brought in even more contrast by making the entire background of the outer subform purple, and the background of the inner subform dark blue. Pagination was also redesigned, and a "view per page" dropdown was added to alleviate the customer concerns about having to click through many pages of records.

Our brand colors were updated slightly at this time, so we had some new colors to work with.

Prototype demo showing how to select multiple records, move them up/down, duplicate them; how to add a new record and name it

The users voiced their frustrations with the attachment field, particularly:

- need the ability to mass-delete image attachments

- improve image display, perhaps a grid format

- auto-resizing/responsive display capability for images

- decrease unused white space

Prototype demo showing the different capabilities of the attachment field: how to select files, move them right/left/up/down, and how to view them in the lightbox viewer

I started creating mocks in Lunacy and later Figma.

Mocks

< Previous

Next >