BUILD is a suite of design tools in the SAP Cloud Platform that empowers SAP customers, partners, and business analysts to build enterprise apps and validate them with users, while learning the design-led development process. I enhanced the usability of the most frequently used UI5 controls in BUILD’s Prototyping Tool.

Due to a non-disclosure agreement, some parts of my work cannot be shown yet. I'm happy to talk about my experiences in person.

Problem

Forms are used to display information, input fields, and other data on pages, but they are difficult to edit and manipulate, given its complex, multiple-layer hierarchy. Quick, simple tasks from adding rows to adding individuals controls to a row were unintuitive and time-consuming to complete. The usability issues were deeply rooted in the mindset mismatch of how users expected to manipulate a Form vs. the unintuitive structure of Forms.

→ Learn more about the Form research findings.

Radio Buttons previously existed as an unusable, individual radio button control. They lacked the functionality of selecting a radio button out of a group of radio buttons. Along with the dire need to fix the functionality also came the opportunity to enhance radio buttons’ usability within a Form.

→ See how I made radio buttons usable as a group.


Role

  • Led end-to-end design efforts from user research to design implementation while collaborating with Product Managers and frontend developers
  • Achieved greater usability with key stakeholders
  • Introduced direct manipulation on Canvas
  • Improved properties panel settings and more intuitive layout formatting


Reformation of Forms

Mindset Mismatch

I first tested the current implementation of Forms to gain a deeper understanding of the usability issues. I discovered from usability testing that users’ mindset of creating a Form did not match what was in place. Their expectations of adding rows and elements to rows were based on their experiences of using software like Microsoft Excel and Powerpoint.

I got frustrated when I was trying to add an extra row, and dragging was not being consistent
Research Participant

Foundational Changes

We explored many ideas to improve manipulation and structure of Forms while working within the technical constraints of UI5 Controls and the limitations of dragging and dropping controls on the Canvas.

I first developed the following concepts that were most valuable and quickest to implement:

One Form
I simplified from two Form Controls (Simple Form and Advanced Form) to one Form Control. Users didn’t understand the differences between the two types of Forms, so we consolidated to one.
From two indistinguishable Form types to one Form type

Form Row
I introduced the concept of a Form Row (comprises of a Label and another Form Control element on the right side), so that users could easily select, rearrange, duplicate, and delete rows in a Form.
Form Row
Show Form-specific Controls
After observing users struggling to quickly find the appropriate control to add to a Form Row, I added the capability to surface controls that can be added to Forms whenever a Form or any element within a Form is clicked. This simpler method of viewing controls specific to a selected control will be applied to other controls that contain children elements.
Controls Panel only shows Form Controls when a Form or its children are selected
Contextual Right Click Menu
I incorporated an intuitive alternative to adding, duplicating, and deleting a row. It has the enhanced usability of adding a row above or below a selected row.
Contextual Right Click Menu for a Row and Form

Unexpected Challenge: Form Groups

As we were ready to finalize designs, a new requirement was introduced for us to include Form Groups into the Forms. We revisited the drawing board to see how the extra layer of hierarchy would change the structure of our designs. In the meantime, our foundational changes were being built in the production site and the developers decided to add the Form Groups to stick with the requirements of including Form Groups in a Form. Even after coming up with some new concepts of Forms including the manipulations of Form Groups, we decided to test participants’ ability to build a form with the up-to-date version of Forms in the production site to identify usability roadblocks and narrow down design concepts. For the usability test, we provided screenshots of a Purchase Order form (a common customer use case) for participants to recreate - from a simple form to a form with additional groups.

It shouldn't have taken 30 minutes to assemble this form
Research Participant

Users still struggled to create a form because the process still required too many clicks to reach the lowest level of the Form hierarchy, the most edited level. Users failed to reformat and rearrange Form Groups for more elaborate forms.

Final Solution: Abstracting Layers

Due to my non-disclosure agreement, I cannot display final designs. If you're interested in learning more, reach out and I would be happy to explain in more detail.


Radio Buttons: Better Together

The Challenge

BUILD only had individual radio buttons and checkboxes that could be dragged onto the canvas from the Control Panel. I was tasked with figuring out how to best structure Radio Buttons, and how that could also apply to Checkboxes (when it came time to design the Checkboxes control).

Original Radio Button Control

Testing the Multiple Choice Concept

Testing the Multiple Choice concept with a paper prototype

Because the Checkbox control is structurally similar to the Radio Button control, I wanted to validate whether to combine Radio Buttons and Checkboxes under one control named “Multiple Choice.” In the case that the user wanted to switch from Radio Buttons to Checkboxes and vice versa, the user should be able to maintain the same data or text they inputted. We quickly tested the concept with a paper prototype. During research, we discovered that the concept of “Multiple Choice” conveys different meanings, especially to non-native English speakers.

To me, “Multiple Choice” means selecting multiple options so I would expect Checkboxes to appear if I dragged the control to the Canvas
Business Analyst

Based on those confusions, I decided to separate Radio Buttons and Checkboxes as two separate controls. Participants thought that providing the capability to switch between the two controls while maintaining the same data and text input was valuable.

Final Deliverables

I made a new control with expanded capabilities so that multiple radio button groups could be included in Forms.

Adding a New Radio Button

Adding a Radio Button through direct manipulation on the Canvas
Right Click Contextual Menu
I provided the right click contextual menu for Radio Buttons group-level and individual-level. Users can easily duplicate, copy, or delete a radio button group. For individual radio buttons, users can add radio buttons before or after the selected button.
Right click menu on Radio Buttons group and individual radio buttons

Formatting Layouts
I chose to display radio buttons in the more readable vertical layout by default. If desired, users have the flexibility to format the radio buttons in a horizontal format.

Select horizontal or vertical layout settings in the Properties Panel


Lessons Learned

  • Changes Beyond One Control: In the process of redesigning controls, I had to be mindful of any changes made to Form or Radio Buttons and how they could affect the usability of other controls. Simplifying a control means finding opportunities to simplify other structurally similar controls.
  • Get unstuck by testing early with incremental changes. Finding the right fidelity to test can save time and eliminate technical debt in the long run. For Radio Buttons, paper prototyping the multiple choice concept proved to be the best way to quickly disprove my hypothesis and determine which path to choose for my design.
  • Document Your Progress: Organizing ideas from brainstorming sessions, design reviews, and meeting notes allowed me to revisit ideas that were conceived from earlier parts of the process but tossed away. They may prove to be viable solutions later down the road (highly recommend Dropbox Paper to keep track!)


Thank You

I’m grateful for the unique challenge of designing UI controls with such a supportive, talented team. Shoutout to Suhaib Syed (Designer), Wenjing Yang (Designer), and Hong Wang (Product Manager) for leading the stride on simplifying controls and improving the overall usability of the Prototyping Tool in BUILD!