Rule builder is part of PaaS application aiming to be a game changer in the no-code solution space.
The Challenge
Solve the complex usability problem
With an exist 'no-code' solution built in, my job was to solve the complex usability problem. The most challenge however, without changing its system architecture.
Problem captured:
1. Too 'wordy' in each rule phrase.
2. There is no way of reviewing the built code
3. Not efficient workflow and app flow
The high level goals were to:
1. Re design the high level layout including all functions to improve the workflow
2. Give user more control.
3. Visible and editable code building process.
OLD - Blank entry page
OLD - Code executed page
UI/UX Research
User Interviews
The interviews were conducted internally with the core business, CEO, CTO and product owner to find out most pain point on navigation and usability.
Wireframe
Usability flow mapping / Navigation study
From the research and interview, I figured out the usability from the layout.
Process
We came across with several ideas that populating the sub-option triggered from the parent menu on the left. It was valuable practice to understand better about the problems facing.
Study
Expandable menu on click, the sub-menu popup to the next.
Problem captured
There is a delay on popup menu cause slower process.
Study
Option menu contains the build history / allows users to edit the build.
Problem captured
Edit options are too complex to identify.
Solutions
We sketched out our ideas on the paper and a lot of study and exercise with rapid wireframe workflow. Most feedback from the user was keep the consistency with a slight advanced layout and navigations.
1. Toggled button improved the usability of the controls
2. Stand out button to conclude / execute changes.
3. Drag-drop feature to allow the intuitive menu control.
4. Auto-populated sub-option visually help user next step
5. Expand/collapse the pane to allow the code modification
6. Multi code view in the same window.
7. Edit/review the code anytime.
5. Collapsed panel view
7. Expanded panel view - Review / Edit
Next steps in the process
1. Conduct another user testing on the high-fidelity prototype, iterate/fine-tune the design.
2. Run a design sprints to find out the use of left panel to initiate the rule building.
And, what else?
A lot more UI study, UX research required
Reach me out anytime, I am ready to answer any complex questions!
0411 713 626 / imagehubs@gmail.com
Young Kim