Visual UI Builder (VUB)2016–2017

Pattern-driven design and development platform

Overview

The Visual UI Builder (VUB) project was initiated Spring of 2016 due to a need for a customization/extensibility tool compatible with a new meta-data driven page generation framework. A three day design session was held to kick start the design process and bring all interested parties together.

The objectives and assumptions for the designs were based on integration points with existing extensibility tools. The end goal of the session was to generate an initial design direction for the UI to customize a specific set of common UI patterns and preliminary design for the overall UI tool paradigm, structure and user experience. The event's first day started with an introduction to the four existing internal tooling solutions by their respective PM's. The primary core appsUX design team Architects, Usability Engineers and Interaction Designers were divided into four teams for the last two days to ideate designs for the targeted set of common UI patterns/components. I directed my team during brainstorming and design sessions, presentationed to UX and TechArch stakeholders to gather their feedback, and facilitated additional rounds of design ideations before our end of day presentation. The final direction for the VUB tooling UI were based off the designs generated by my team, I was the sole designer to work on the subsequent project iterations.

“Scott proposed a developer tooling UX design for customizing and extending pattern-based UI’s that is fresh, innovative, clean, and simplifying. This compared to status quo customization and extensibility tools which continue to recreate existing designs with a modern "lipstick" skin, but with little to no functionality to make the experience easier and more powerful for functional/IT admins and developers who have reported wanting such advances in our user research.”

Manager Quote from 2016-17 Annual Appraisal Review

Final Designs

1. Edit Create Opportunity Page Form Screens
2. Edit Analytic Infolet with Hidden Properties/Non-modal
3. Edit Analytic Infolets with Persisted Properties/Modal

Design Directions / Process

Here are the final wireframes my team produced during the three design jam sessions.

Use Case 1 - Table using List Search

Challenge - The business analysts are using a product screen with list search and are trying to sort through different suppliers. They need to modify columns and change what they're showing in the end result table.

Solution -

  • • First screen, assumption that this is inside a new window within VUB tool.
  • • Different clickable zones shown in pink outlined containers.
  • • Clickable areas show on hover, sections become clickable.

  • • When no mouse over, the clickable zones are not rendered.
  • • Yellow outline and menus show after user selects table.
  • • Avoid use of the shuttle component.
  • • Ability to highlight and change the default table 'column' set.
  • • Column management is 90% of the customization uses cases in this page.

Use Case 2 - Switch to List View

Challenge - The business analyst just customized the Card View and now wants to synch the List View with card attributes. They need to customize the List View layout template; the flow started with clicking the main component object container.

Solution -

    • Example of facets that are generic enough to be used across different patterns.
  •      e.g. thumbnails, icons, titles, authors, author dates.
  • • Only show contextual menus launched when clicking on part of a page showing actions, attributes, etc., only when available.
  • • Switching list layout templates from: LearningSimple to LearningSearch.
  • • Explored approach for users to map attributes to facets in a template (do it once, use for both card and list view).

Use Case 3 - Card List View

Challenge - The business analyst wants to modify the card layouts to emulate what he did in a different course to keep track of comments.

Solution - Templates shown in the contextual dialog are associated at the page level because all the template types have to be the same. At the bottom of the dialog, conveyor belt shows the facet diagram of each card type.

  • • Use the drop down to go through different data types and attributes.
  • • Data is specific to the object type.
  • • Build an inventory of UX-approved, seeded templates.
  • • Start creating inventory of all card list view templates required to be patternized.
  • • Toggling between list and card, the tool should remind users to add functionality to the different view.

Support ability to drag and drop attributes from the dialog. Design didn't explore accessible alternatives.

  • • Tool should have built in formatting e.g. adding '|' between comment attributes.
  • • Final design to display plain English for the user rather than attribute tags.
  • • A real use case but possibly confusing; result set contains multiple types of card layouts.
  • • Team discussed an option to pin a contextual dialog to a fixed left/right panel.
  • • Real time updates are a nice touch, important for user to visualize impact of changes.

Next Round: Testing at Oracle Open World (OOW)

We were given a month to take the preliminary concept for the VUB tooling UI and create three new task flows to prototype for Usability sessions at OOW. Testing coordinator started to recruit attendees to the conference once we nailed down the targeted user persona. The flow scripts, gathering realistic data, and working with the testing team to work out a formal plan were also started concurrently. The break after the Design Jam sessions had given me time to think and reflect on the designs and start sketching alternative interactions. The PM's and Technical Architecture teams' also had time to review the approach and share their concerns and needs. There was clarity and a plan, we were able to identify requirements for the tool; to support building, customizing, and extending Oracle Cloud Applications with a pattern-driven design and development platform.

  • • Design contextual, WYSIWYG, interactive UI/experience to ensure consistent, pattern-driven end result in applications.
  • • Messaging to provide both error and design guidance feedback (smart tooling suggestions).
  • • Design for range of patterns and use cases.
    • - Cross product, Cross platform, Cross technology.
    • - Need to apply VUB UI paradigm to many more patterns.
  • • Iterative, user-centered design and research with VUB end-users.
    • - Research to date involved Admin users.
    • - Additional end-users include Developers, Partners, Designers, Product Managers; NOT FA end-users.
    •      e.g., HR Professional, Sales Rep, etc.

Task flows

1. Tab Management
2. Edit the Create Opportunity Page Form and Table
3. Edit BI Card Page

OOW Testing Results

The testing sessions provided great feedback for the VUB flows.

High Level Conclusion

  • • Overall, VUB tested very well and would have a perceived high impact for Business Analysts.
  • • Hover interaction of edit icons and labels received positive feedback and icons/labels were not seen as cluttering UI.
  • • Configuration dialogs worked well and were viewed as very useful.
  • • Entering VUB and enabling customization mode for application pages was problematic.
  • • Implicit save model can be improved.
  •      - Using a button to apply or save changes within dialogs will make users feel certain work is being saved.
  • • Provide salient feedback messages when editing, saving and committing work.
  •      - Subtle visual cues would make users more confident in carrying out their work.

Key Takeaways

  • • The overall impression participants had of the application was positive.
  • • Participants rated ease of use and usefulness highest (5.9 and 5.7 respectively).
  • • Deviation around attractiveness.

Additional information about the Customer Feedback Session Results available on request.

Final Round of Designs

Building upon the designs for OOW, a new set of Manage Analytic Infolet task flows were targeted to use the new VUB tooling paradigm. The outside toolbar wrapper supporting the save model was enhanced to provide recent history and undo/redo functionalities. In addition, the original Edit the Create Opportunity Page Form designs were updated, incorporating the feedback provided by the Research team.

Infolet Masonry Layout Component Interaction Design Ideation

My Involvement

Requirements Gathering
Research
Flow Diagrams
Concept Development
UX Design
POC with PM
Wireframing, Interaction Design, and Visual Design
Collaborated with Usability Engineering Team

Project Timeframe and Tools

May 2016-June 2017. All the wireframing and design work was done using Adobe Illustrator.

Scott Oja © 2019