Adding
Vital Information
As the lead designer, I led the project and did all the design work. For the research I worked with a researcher in planning, execution and socializing learnings.
I got regular design feedback from my fellow designers, including Design Ops and Design leadership. Development also had a lot of input. I worked with the Documentation team to add important information about variables to the online help.
I was the lead designer on a low/no-code platform that enabled business users to automate business processes. Variables, a fundamental Computer Science concept, were part of what made the platform powerful. The interface had to teach users this, and similar Computer Science 101 topics, while they used it.
Business Context
Descriptions from Citizen Developers Highlight Reel
Baseline Testing on Existing Product
A free version of the existing product is available for anyone with an internet connection, so we tested on that first. The research was remote and unfacilitated with stimuli presented through UserTesting.com
We recruited for two different personas:
* Professional Developers, typically with a Computer Science or adjacent background
* Citizen Developers, without Comp Sci background who were coding because of a want or need
Before and after of the Variable palette IA
Before and after of the Variable palette
Information Architecture
In the old palette, it looks as if all headings are equally important. But 99% of the time, users are looking for variables they themselves have defined, i.e. User-defined/Your variables. In our testing, users got lost among all the predefined variable headings and variables.
To make this clearer, I added another heading level. After discussions with the Developers and Documentation I decided to call it Predefined variables.
Outcome
After these changes, users were able to find the variables they needed and could complete their tasks.
Your variables
The user who said that they didn't know what User-defined means was typical, so I was going to change it to My variables. Discussing it with our Documentation team, they said that we use you and your about the user, so I changed it to Your variables.
Variable Palette
User does not understand variable type icons
After: Types are explained and associated with their icons
Before: Selecting a type of variable to create
Variable Types
The variables on our platform were typed. This means that when you create a variable, you have to decide what kind of data you will be storing in it. You cannot change the type after the fact and the platform did not accept data that didn't match the type it was expecting.
Icons were used to identify variable types, but no effort had been made to tie the icons to the variably type names. The different types also weren't explained anywhere.
Outcome
After these changes, users demonstrated a better understanding of variable types and were able to solve simple problems.
Many lay people do not know that the cost to own a fund varies widely. The cost can and will eat into any profits you make, so it's one of the most important considerations when investing. To help our customers understand that, I designed four variations on a Cost-to-Own feature with the help of our financial SME.
Cost to own
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
)
