The mind manager map will introduce you to a day in the life scenarios of my role as a interaction designer at infragistics.

 

JQuery Tree

Describe a specific situation:

Storing financial data, managing healthcare records, and organizing human resources information are common uses for a tree control.  This particular JQuery implementation will incorporate typical tree behaviors that include:

  • Select nodes
  • Expand or collapse hierarchies
  • Interact with checkboxes
  • Add or delete node(s).

 

Tasks that needed to be done:

Research and document existing tree structures:

  • Understand primary story(s) supported.
  • Check out similar controls and extract the patterns we need to embody.
  • Clear scope and priorities in mind for design.
  • Construct wireframes to explain structure with annotations.

My contribution:

  • Collaborate with product manager and developer to reach consensus on primary stories(s).
  • Perform competitive analysis
  • Document similar functionality across our current controls and competitors and correlate to the current project.
  • Assemble wireframes that layout the range of interface elements and convey to developers the priorities for each.

The results:

  • Define node types and fine tune them (custom images for expansion indicators)
  • Checkbox support gives the ability to add and delete numerous nodes.
  • Custom theme support + included themes

HTML Web Based Editor

Describe a specific situation:

This web based HTML editor is designed to easily integrate with content management systems. The number of toolbar options can be overwhelming to users and to accomplish a simple task like changing text to bold can consume much more time then it should. The priority for this web based HTML is to consolidate the toolbar option into related groups, and to design a mechanism to hide/unhide these options. Conducting research resulted in the following groups:

 

Group 1

Font-Arial-Verdana-Tahoma-Courier New-Georgia-font size-font Color

Bold-italic-underline-strikethrough

Undo-redo

Align-left-center-right

Headings-h1-h2-h3-h4-h5-h6

Indent-increase-decrease

Group 2

Copy- paste-paste as plain text

Link-email link

Image

Table

Unordered- ordered

Group 3

Page Break

Background Color- color picker

Find and Replace

Open file

Spell check

Special Character – symbols options

 

Tasks that needed to be done:

  • Research and document existing web based HTML editors:
  • Understand primary story(s) supported
  • Check out similar controls
  • Extract the patterns we need to exemplify
  • Clear scope and priorities in mind for design
  • Construct wireframes to explain structure with annotations.

My contribution:

  • Collaborate with product manager and developer to reach consensus on primary stories(s).
  • Perform competitive analysis
  • Document similar functionality across our current controls and competitors and correlate to the current project.
  • Assemble wireframes that layout the range of interface elements and convey to developers the priorities for each.

The results:

  • By grouping related tasks together, the cognitive load is reduced for the user.
  • Having the ability to hide and unhide toolbars assist with user efficiency and effectiveness.