To improve the experience for our customers by making the design system Figma components scalable, inclusive and accessible to those using AVEVA’s products on tablets and mobile devices.
Making updates to a design system with responsive components ensures a consistent and optimal user experience across various devices and screen sizes. Many customers request that their software applications work as seamlessly across tablets as they do on their on-premise computers. This project consisted of replacing a few components and adding a set of new ones to the data table.
Deciding which updates are best for each component by taking into account stakeholder requests, team opinions, and the tight deadline.
I began the design process by researching the industry standards for what responsive design should look like, how it should behave, and what the expected experience should feel like. I joined the project after the initial user research had concluded. The results indicated that AVEVA customers expected the experience to function in the same way as a desktop, tablet or mobile device. The components in place in the design system were not scalable, so we began by listing all the project
components that needed to be addressed within the first round. The project lead created a columns and grids guide, and I ran that information with our Dev team to ensure consistency with the selected breakpoints. I created wireframes with five break points; X-Small 360px, Small 768px, Medium 1024px, Large 1440px and X-Large 1920+. Once the wireframes were approved, I created the full interface experience.
I built a prototype of each component to present to the project lead, the UX team, and the UX director for feedback. It was reviewed, and the process was iterated several times to align with other AVEVA products before it was prepared for usability testing.
Search overlay Option A
While the app bar didn’t require many design updates, it did need to be re-created for different sizes from desktop to mobile. I also integrated a search experience as part of the re-design. Two versions were created: Search overlay Option A and Search visible, Option B.
The interaction for Option A involved the user activating the search by clicking on the search icon from the App Bar and that triggers the search experience.
Search visible – Option B
Interaction for this option eliminates confusion for the user about how to open the search experience, because it is visible right below the app bar. We wanted to assess whether this real estate hog would be a problem on such a tiny screen during usability testing. (Prototype was not created)
Navigation menu Option A
The navigation menu went through two big updates. The first was the full-size menu. It was filling the screen at 100%, preventing the user from closing it without moving back a step. Our goal was to help users avoid further frustrations.
Option A – Full-size navigation menu
The update to this option was to convert the full-sized menu from filling the screen at 100% to only filling it to 80% of the screen. To help the user find a way to close the menu from the menu itself, a header area was added with a close icon (X).
Option B
A condensed version was created, which included a set of icons stacked with a small icon, and a short description in each. A brand-new design to AVEVA, which was based on the material design version. It improves the information the user sees in the navigation. The current version is a single column icon, compared to this wider menu with descriptors.
Density picker – small, medium or large
The density picker refers to the ability to increase the space horizontally between the rows of the data table for more breathing room. This wasn’t an existing component, so three prototype options were created: Compact, Standard and Comfortable. The icon set was developed by the design lead, and had icons that were not officially part of the design system, but were more of a test set.
Column manager
A new component that was built to provide the data table users with an option to re-order as well as show/hide columns, especially when the data table is the size of a tablet.
Tile view
The new tile view component was built to give users an alternative view of their data by creating smaller tiles that contain the row data. It also includes more important information at the very top, which would be the only thing to appear if that tile collapsed.
Header filters – Opt. A
A new component was developed to appear above the data table columns. The design lead noticed this pattern on the ADO (Azure DevOps) application, and we wanted to include it as part of our user testing.
Filter modal – Opt. B
This was a new component developed to recreate e-commerce type filters where chips are the method for selection. This appears over a scrim, and uses up around 80% of the screen. It has features like collapsing/expanding all sections, allowing the user to touch to select chips, and even search within the modal.
Column filters Opt. C
This type of filter is the most commonly used type for a data table. A sort icon was added next to the filter as well, although it did use a lot more space on the columns. In this design, the default filter icon for the AVEVA Design system was used, instead of the secondary option of the funnel icon.
Search by keyword
The new component for Search by keyword was not fully designed, but it was used in user testing to gather feedback on how they thought it should function. It would most likely filter the data table. (Prototype was not created)
Create new entry form
Creating a new entry via a form – This component was redesigned based on industry standards. In this version the user has the option to expand the size of the side sheet by dragging it to fill more of the space.
Usability feedback sessions were completed with seven participants over several sessions. They were matched with the main personas targeted by AVEVA, including people with experience working on a factory floor. In most cases, I had a few examples to show, and I set them up as A/B Tests.
Option A: Search overlay vs. Option B: Search visible
Testing out two methods for how the user would trigger the search experience from the App Bar. Option A the participants clicked the search icon to enable the pop-up. Option B had the search field always present below the main header.
In this feedback session, I asked questions such as:
Results from the feedback session showed that Option B was preferred in the tablet view @ 768px. Some participants had issues locating the search icon; they didn’t realize the context of the search bar, and they assumed it was related to the data table. An additional issue was noted with the “Clear all” text button, where some participants tried to clear their search instead of using the “X icon” in the search field, which is the method the participant could use to clear their search.
When I asked the participants how they would close the search field, most of them clicked on the “x icon” in the search field, which is meant to clear a search. I noted that this icon positioning is confusing, and that is something that will be redesigned.
The redesign would be a combination of both options A and B. Once the user selects the “search” icon, the search area appears as shown in Option B, once they are done with their search, the area can collapse once again. When the participants were asked to clear their search, all of them clicked on the text button “Clear All” located below the editable field.
To improve the experience, we can change the X icon in the search field to a text button “Clear search”. Then we can change the text in the text button from “Clear all” to “Clear history”. Finally, we can change the “close search icon” to a regular search icon, because the unique look of this icon was not noticed by the participants.
Option A: Full size menu vs. Option B: Condensed version
Testing out two methods for how the user would interact with the navigation menu.
In this feedback session, I asked questions such as:
Results of the condensed version usability test indicated that it was harder to collapse, and most participants didn’t click the nav (hamburger menu) icon. They assumed that clicking outside the menu would collapse it, but the pattern for that design required the user to close via the same icon. The larger nav was also not received well, with the biggest complaint being that there was too much white space as the text didn’t fill the available area. Most participants commented that they preferred the menu to only be the size of the text that it was filling.
Make an update to the (expand/collapse) on the navigation menu to make it visible instead of hiding it at the bottom by removing the extra space that fills it. Update the full-sized menu by fixing the way the component hugs the longest content in addition to some padding to improve that experience.
Single new component
In this feedback session, I asked questions such as:
From the usability test, the results of the density picker on the data table showed that four out of the seven participants thought the new component was useful. A few of them believed the text size should also increase. Five out of seven participants thought the icons were clear, but many said that there weren’t too many other options on the toolbar or that they weren’t afraid to explore icons.
“There could be two or three such great view options there. But again, on the handheld device, I wouldn’t imagine that those options are providing the best user experience. It should be more slick like you just go do the finger flick and explore through the list of data.” -Anonymous participant
“I think it depends on how it’s implemented. Like the way it’s currently implemented, it just looks like it’s expanding the size of it, but it’s not actually wrapping any of the text. If increasing the table size would allow me to see more of the contents, I would use it. But the way it’s currently implemented, I don’t see myself using it.” – Anonymous participant
I would suggest a new component that makes changes to the text size, and allows a text wrap within the data table.
Single new component
In this feedback session, I asked questions such as:
A few of the participants had an issue with locating the icon that manages the columns. The icon wasn’t clear enough. Once they figured out what to click, the task was clear and easy to perform. One participant wasn’t clear about what the drag icon was, or what it did.
“I’m thinking I get the prototype and workflow and all, but I’m thinking if I were like as a being a stakeholder, if I were to define the workflow requirements or something, I wouldn’t go for that separate button to provide the visibility of the columns.” – Anonymous participant
“To me that would be more of a settings behavior. Like I would imagine customizing your screen and column would be more towards the, you know, going inside the gear settings icon along with any other settings that this page or product may have.” -Anonymous participant
The user of the data table should be able to customize the toolbar with the interactions they use more frequently. The column manager feature can easily be moved to a settings page.
Single new component
In this feedback session, I asked questions such as:
The toggle between the tile view and list view was a very easy interaction for the participants. Most clicked back and forth without being prompted. Some commented that there was too much white space being used by the collapse/expand icon in the middle of the tile. In the context of industrial software, the preferred choice was the traditional list view, although a few suggested that a combination of both might work.
Instead of having two views, a tile and list view, the expand feature should be incorporated into the table by default. This way, participants can expand to see more details. Then the collapse icon would make more sense on the header level than if it is located in the middle of the tile.
Option A – Header filters vs. Option B – Filter modal vs. Option C – Column filters
In this feedback session, I asked questions such as:
Questions specific to Option B:
Question specific to Option C:
The participants were able to locate the filter icon and interact with it easily. The frustrating thing for most of the participants was that they were expecting the prototype to filter the results on the data table at the end. However, the results were highlighted, and since that was an unexpected behavior, they commented that instead the data table filtered the results.
Option B – Filter was a completely different interaction as this selection had a modal side sheet popup with multiple fields appearing expanded with chip selectors as their option. Most of the participants commented that they would start by searching or filtering down the results, because the chips, and in general each section being expanded by default, was making the UI look busy. They much preferred a menu with checkboxes. This option had some positive feedback in terms of the clean look, and users commented that if the options had been collapsed by default they would prefer that. The filter modal used up a lot of real estate on the tablet, and didn’t receive too many votes when it came down to the filter choices in the data table.
The column filters won over all the others as the preferred option. The main difference with this option was that I used the default filter icon instead of the funnel icon, which had been used in Options A and B, so the participants weren’t able to locate the filter icon. Once they were led to the icon and clicked it, the drop-down menu appeared within the column. The majority commented that this is the most common method they’re used to in filtering a data table. The question specific to Option C was related to how to display both the filter and sort icons side by side on the column. I discussed this issue with the design team, and we came up with a solution, which was to use a “name button”that shows an array of options once it has been clicked.
All the participants wanted the “funnel” icon to be used. Swapping out the icons would make sense. I found a pattern used on the dovetail application which allows the user to select the header to trigger a menu with multiple options. This could work to combine the sort and filter options together.
Search by keyword
In this feedback session, I asked questions such as:
This component was not fully prototyped, so it was mostly shown to gather opinions from participants on how they would interact with the field. One user commented that they would expect to see the results highlighted in the data table when searching by keyword.
Others wondered what type of search would occur, whether it be a “search contains” or something else. I asked the participants how they would execute the search; some said they would press enter on their keyboard and/or expect to see a text button with the word “search”, or a next “right-facing arrow” icon.
Create a new entry (Form)
In this feedback session, I asked questions such as:
This feedback for the new responsive form was largely positive; to start the session, I asked the participants to locate the place they would go to create a new entry in the data table. The feedback was that the CTA (call-to-action) button was easy to see and understand. In the prototype there was a section with chips and another with checkboxes. I did this strategically to better gauge which of the two options was preferred for the selection process. Overall, the checkboxes were more popular than the chips. Due to familiarity, the participants were used to seeing checkboxes in other forms. Lastly, there were some comments about the expanded view, and how there appeared to be too much white space on the left side due to the titles being shown on the left-side.
The expanded view should be the default state of the form. However, the headers should be realigned to the top of the entry field instead of to the left.
After completing the feedback session, I analyzed the recordings, created a report, and started researching iteration design ideas and making notes while starting on a prototype re-design for the responsive project. Due to budget cuts, I wasn’t able to see the final steps through, but I am extremely grateful for the immensely valuable learning experience, and I look forward to future projects where I can test processes and make improvements upon them.