OrgPlus RealTime Views

Organizational Charting

Redesign views to incorporate a simplified user-friendly experience that will accommodate both admin and average user.

Services

UX Design

Interface Design

UX Consulting

Field

Org Charting

Type

Web Application

The Objective

OrgPlus RealTimes Views are a powerful feature that allows users to customize their charts visual appearance from a style and data standpoint. Whatever you imagine can be built using views. However the tool is heavily underutilized because of it’s complexity and inconsistent behavior. UX’s core job is to reimagine the feature and simplify view creation/editing functionality. By doing this we hope to help users understand and utilize the tool’s full capabilities.

My Approach

OrgPlus RealTime helps small businesses, divisions or departments build and present their organizational framework. Users can customize the visual appearance and data displayed in their org chart by utilizing the tools ‘Views’ function. OrgPlus RealTime would like to redesign the tool’s ‘Views section’ to incorporate a simplified user-friendly experience that will accommodate both the admin and the average user.

Here’s how I did it

01:  Empathize:  Understand the project, it’s goals, drivers, and scope

  • Met with two stakeholders to get an understanding of what the project was and where it needed to be. 
  • Created a creative brief defining the project
  • Defined metrics

Empathy Statement:

I can easily set-up charts based on various criteria for one or multiple sets of individuals. I am now interested and feel confident in using more advanced features that OrgPlus has to offer.

Deliverables:

Stakeholder Interviews

Creative Brief

Tools Used:

Pen & Paper

MS Word

Basecamp

02:  Discover & Define:  Understand the product/service and its users in depth.

  • OrgPlus RealTime is a sophisticated application that offers various solutions through a variety of means. To utilze the tool and unlock it’s true potential, some training and knowledge of organizational structure is needed. 
  • I interviewed and shadowed four end users discussing their current usage and knowledge of setting up views. 
  • Patterns were brought to light of how users interacted with the feature: what they used, didn’t use, and what was lacking. 
  • Scenarios created touching on section features. 

Scenarios:

User Background:

You are the Operations Director for an ad agency called “Sterling Cooper”. Along with being a director, you’re also responsible for maintaining the company’s org chart. You have set up two versions (views) of the company’s chart: one organized by department and another organized by level within the company.

Scenario 1: 

Sterling Cooper has given each employee a company cell phone. You want to add each employee’s new number to the org chart. You’ve already updated and imported your data source into OrgPlus. How would you add the new numbers to Sterling Cooper’s chart using OrgPlus?

Scenario 2: 

Sterling Cooper currently shows its employees’ personal and company phone numbers on its org chart. Many employees have complained about receiving phone calls to their personal numbers, so you want to remove this field. How would you do this using OrgPlus?

Scenario 3: 

Some of your employees have notified you they haven’t been issued a company phone yet. Instead of asking the entire company who hasn’t been issued their company phones, you want to see within the org chart who doesn’t have a company phone number listed. How would you do this within OrgPlus?

Scenario 4: 

Sterling Cooper has just expanded to include a marketing department. How would you distinguish this new department from the others in your org chart within OrgPlus?

Scenario 5: 

Sterling Cooper’s new marketing department recently rebranded the company. You are so excited about the new color scheme that you decide to apply it to the org chart. How would you update your chart within OrgPlus to reflect the new colors orange (#cf7633) and beige (#d9c590)?

Scenario 5: 

Your HR administrator set up a new marketing manager role for the new marketing team. You need to give the marketing manager access to see the departmental view of the org chart. How would you do this within OrgPlus?

Deliverables:

Discovery/Research of Current Platform

  • Usage stats, what’s working, what’s lacking, what’s needed

End User Interviews

Competitive Analysis

Analysis of Research

User Testing Scenarios 

Tools Used:

Pen & Paper

MS Word

MS Excel

Internet Browser

SilverBack App

Basecamp

03: Ideate:  Understand the most important problems and opportunities. Identify potential solution ideas to begin testing with

  • Identify workflows and create scenarios. 
  • Begin to sketch solutions

Workflows:

Sketches:

Deliverables:

Task Specific Workflows

Loose Sketches

Tools Used:

White Board

Omnigraphle

Basecamp

04: Prototype & Test:  User validated, functional prototype that fulfills prioritized needs and opportunities.

  • High fidelity prototypes based off of specific workflows were built and tested in an iterative fashion until consistency was achieved.
  • Thirteen users tested
  • Goal: Allow users to create and/or edit a view and have it display as expected

High Fidelity Prototypes:

Deliverables:

Wireframes

Interactive Prototype

User Testing results

Tools Used:

Pen & Paper

MS Word

Axure RP

SilverBack App

Validately.com

Basecamp

05: Recommendations:  Delivery of completed requirements and all other necessary documentation

  • Testing results summarized
  • Key areas to focus on, as well as areas to trim down presented to stakeholders and development.

Recommendations:

Workspace:

  • Rename ‘Views’ to ‘Data Views’
  • Add ‘Edit’ link next to each data view, clicking deep links you to summary for each
  • Control Panel Legend: Add ‘Edit’ Link next to each defined Card and Border Stack

Admin:

  • Rename ‘Views’ widget to ‘Data Views’

Data Views Section

  • Add ‘Done’ button at the top left of each page/section to go back (currently done is at the bottom left)
  • Remove explanation text for ‘Data Views’ and place within a tool tip to the right of the title
  • Start with the Summary upon entry
  • Add tool tips by each widget Header
  • Reorganize buttons in Data Views selection widget
    • New View
    • View drop down
    • Create a Copy
    • Preview in Chart
    • Delete
  • Give ability to Edit/click into each section from widget

Selected View

  • Place View Name in view Widget
    • Example: View Name Data View: Summary
  • Logically Order Left Navigation

Summary

  • Start with this section upon entry
  • Add tool tip next to summary title
  • Move description to summary (if created) and place at top
  • Add ‘Styles’ widget to summary section
  • Add ‘edit’ link in each widget
    • Make each widget completely clickable to link to their respective sections
  • Cards Widget
    • Create ‘Inactive’ list

Cards Section

  • Add tool tip next to Cards title
  • Replace ‘New’ button with Manage
  • Move ‘Add new card’ (create new box type) button in line with other cards
  • Add a toggle for show/hide inactive cards
  • Add numbering to cards to show Hierarchy
  • Remove actions from top right of cards container and place in a hover state for cards which consist of
    • Edit
    • Deactivate/Activate
    • Delete

Add New Card

  • Break into 3 section:
  • A: Section title and card selection.
  • B: Card Properties Section.
  • C: Field Properties section
  • BY DEFAULT: have Card Properties Section open when adding new card.
  • Add a drop down to quickly cycle through all available cards to edit. By default shows “New Card” if add new card is clicked.
  • Card Properties: section contains name, color and properties for card (now grouped in one area)
  • Field Properties Section: section contains all other editing capability of card from a field standpoint.
  • Lay page out in 3 column grid
    • Col 1: add new card button, followed by list of cards in view
    • Col 2: Card properties
    • Col 3: Hot link to customize card (edit) and preview (color/text color preview)

Edit Card

  • Add Tool tip to explain edit card
  • Break into 3 sections:
  • A: section title and card selection drop down.
  • B: Card Properties Section.
  • C: Field Properties Section.
  • BY DEFAULT: have Field Properties section open when editing.
  • Add a drop down to quickly cycle through all available cards to edit
  • Add a ‘Currently Viewing’ drop down to quickly cycle through all available cards to edit
  • Move action buttons to the top to provide visual clarity
    • Add Data (Step through modal)
    • Copy Data To (Step through modal)
    • Remove Data From (New functionality) (Step through modal)
  • Use 3 Column layout
    • See example
  • Add Button called ‘Manage Card Properties’ that takes you to manage cards location
    • See manage cards section

Borders

  • Rename ‘Highlight Groups’ to ‘Borders’
  • Add tool tip next to Borders title
  • Creating New/Editing
    • Opens a page vs a modal
    • Page uses 3 column layout

Styles

  • Make styles the 4th option in the left nav list
  • Add Tool tip next to styles title and each section in styles
  • Add ‘Gradient’ check box in ‘Card Colors’ options area
  • Rename Box Highlight Styles to ‘Border Styles’
  • Remove ‘Box/Card properties section
    • Add ‘Gradient check box’ to Card Styles
    • Remove option ‘Header on bottom’

Settings

  • Rename ‘properties’ to ‘Settings’
  • Rearrange order of settings options
    1. Name, Description
    2. Profiles
    3. Roles
    4. Sort Fields
  • Grant ability to link to profiles section from here
  • Once in profiles from starting at views, clicking ‘Done’ Returns to ‘Data Views/Settings’
  • Grant ability to link to roles section from here
  • Once in roles from starting at views, clicking ‘Done’ returns to ‘Data Views/Settings’

    Deliverables:

    UX Recommendations

    Tools Used:

    MS Word

    MS Excel

    Basecamp

    06:  On-Going Evaluation:  Continue to evaluate product after release to validate impact with project goals.

    • Monitored feature release and checked in with end users to see how the feature update was meeting their needs and expectations. 
    • Review analytics

    Actual Application:

    Get in touch and let's get a conversation going!

     

    I would love to create with you. For any questions you have or to schedule a consultation please reach out. Don’t be shy, let's get a conversation started!

    Reach out directly to Rich Roth @

    p: 225.978.1835       e: rich@richroth.net

    Follow my adventures on:

    Pin It on Pinterest

    Share This