...

PHASE 1: VALIDATION 

GOALS

What problem are we trying to solve? 

...

• Users said it looked like an external product 

What’s the goal of this improvement?

The goal of this improvement is to clean up the UI so it matches the standard ProcessMaker Designer UI. 

RESEARCH

Review analytics to validate assumptions. Conduct research to understand why we should develop the feature.

These UI changes are also important according to the 10 Heuristics of Usability Framework. 

• Consistency and Standards
  • Description: Oh, I know that! Is the content of the system consistent? Always make sure that your system has continuity across your platform.
  • Insight: Plugin should act like it's part of the PM platform. Users expect it to have the same look and functionality as PM platform.
  • Examples:
    • Not consistent with PM
    • Plugin looks generic, designer vs. EasyDoc
    • No blue bar, no right click or auto-save (expect to have it), different formatting toolbar

• Aesthetic and minimalist design
  • Description: Does the system have too much information? Dialogues should not contain irrelevant information. Always make sure your system is aethetically pleasing and efficiently composed.
  • Insight: UI needs to be simplified.
  • Examples: Settings button, scroll bars, designer/ designer, new section options, messy text, overlapping text, align on bar and dropdown

What’s the priority for this feature— why is it more important than others?

The priority for this improvement is critical. 

What does this feature do? (this is applicable only to new features)

N/A

Who is this feature for? How many users will benefit?

Survey and usability testing participants agreed that Process Documenter would benefit anyone using ProcessMaker.

How does it improve the product? How does it relate to our overall product strategy?

It improves the UI and increases the user's ability to understand the tool.  

What technical, business or user assumptions are we making?

• Technical: We're assuming that we know the best way to improve the functionality. 
• Business: We're assuming that this matters from a business persceptive.
• User: We're assuming that other users will feel the same way.

*** IMPORTANT: Feature must be validated before moving forward ***

PHASE 2: REQUIREMENTS

USER PERSONAS

All ProcessMaker users - see above survey responses 

...

#	TITLE	USER STORY	PRIORITY
1	Have Process Documenter UI interface consistent	As a Business User, I want the Process Documenter interface to be consistent with the ProcessMaker Core interface, so that I feel it is part of the enterprise features/plugins.
2	Improve new section creation	As a Business User, I want to see only the necessary fields when I'm creating a new section so that I can easily create it.
3	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-872	As a Business User, I want the interface to be clean so that I can easily find what I'm looking for.	Major
4	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-873	As a Business User, I want everything on the interface to have a purpose so that it is straightforward.	Major
5	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-874	As a Business User, I want everything on the interface to have a purpose so that I know what functionality is available.	Major
6	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-875	As a Business User, I want titles to be clear and district from the content so that I can quickly understand what is going on.	Major
7	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-876	As a Business User, I want grammar to be correct so that the interface looks professional.	Major
8	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-877	As a Business User, I want wording to be correct so that I understand what I'm reading.	Minor
9	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-878	As a Business User, I want to quickly find the button to make changes so that I can be efficient with my time.	Critical
10	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-879	As a Business User, I only want to see tools are easy to understand so that I feel confident in what I'm doing.	Major
11	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-880	As a Business User, I want buttons to be in order so that I can easily navigate back to the Designer or forward to the Preview.	Minor
12	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-881	As a Business User, I want the labels to make sense so that my options are clear.	Minor
13	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-882	As a Business User, I want all heading words to be capitalized so that everything is consistent.	Major
14	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-883	As a Business User, I want things to be called what they normally are so that I recognize it.	Critical
15	Jira Legacy server System JIRA serverId a61eec73-2ffd-3943-ab40-4d6f93d4c28e key PROD-884	As a Business User, I want the button to be the same name as the plugin so that it's consistent.	Critical

PHASE 3: DESIGN + REVIEW

UI SPECIFICATIONS + MOCKUPS

...

Page	Current UI	Updated UI	Specifications
Designer		Image RemovedImage Added	Replace EasyDoc button with Process Documenter text Text should be on 2 lines
Process Documenter		Blank state:  State with Element: State with another Element:	Top of page Add blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker Delete settings icon bc it didn't work Delete extra scroll bars Delete percentage bar bc users were confused  Links Change Review > Preview Reorder Designer and Preview so they are in the correct order  Add Process Documenter in bold in the middle so the user knows where they are  Change white buttons to white text w/ light blue lines between the links - w/ blue background (link format and lines should look and function like Designer UI below) When user scrolls over another button it becomes bold to signify that its clickable  Sections area Add a blue bar with 'Document for ____' title in white - to help users understand the context and what they need to fill in Add ? icon to the blue bar on the right for information about the section area When the user scrolls over the ? icon, a 'Help' tooltip will appear  Change 'Summary' tab title to 'Description' to help the user understand that this tab will be in the beginning of the main document  Process Inspector Also, add a blue bar to Process Inspector so the title is noticable as a heading and it is consistent with the Designer UI blue bars should align horizontally  Process Inspector and Document for ___   title text should match - same indent, font and font size  Bold Key and Value titles to differentiate them from results
Preview		Download dropdown menu Image RemovedImage Added	Add blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker Change 'Return to EasyDoc' button text to 'Process Documenter'  Add Preview in bold so users who where they are  Change white buttons to white text w/ light blue lines between the links w/ blue background to be consistent with the Designer and Process Documenter UI When the user arrives to the Preview page, the Preview link is bold. When the user scrolls over another link it becomes bold to signify that it is clickable.
Settings			Add blue bar to the top of page to be consistent with the Designer UI so users know this plugin is part of ProcessMaker Change text to match new Process Documenter text Summary > Description Scope > Applies to Applies to > (no text) When user clicks on Add New Section – the same Add New Section pop-up opens (see below)
Add New Section Pop-up			Change current pop-up style to Designer pop-up UI to be consistent with standard PM pop-up Details   Add blue bar to top of pop-up with darker blue x to close window  Change pop-up title to 'Add New Section' (always capitalize the first letter of the word) Change 'Scope' to 'Applies to' Change white Cancel and Save buttons to a red Cancel button and green Save button Delete Required (Count in %) since we are deactivating the progress bar for now Pop-up UI style should match this pop-up  Dropdown choice options Change text and dropdown option order to the following  This Element Only Some Elements   All Process Elements When user clicks on 'Some Elements' show list of elements Only show list of elements when user chooses 'Some Elements' Do not show list when user clicks on 'All Process Elements' or 'This Element Only' Delete Applies to since we replaced Scope with it There are several user states — see below mockups. Note: Mockups don't show blue bar. Need to add.

...

New Section Pop-up User States
Blank state - when a user opens the pop-up and before they choose an option. Change 'Scope' to 'Applies to.' Delete 'Choose an option' and make 'This Element Only' the default state.
After a user types in a name, the user scrolls over 'This Element Only' to open the dropdown. When the dropdown opens, a white checkmark and blue bar appear over 'This Element Only.'
The blue bar moves with the mouse when a user scrolls down over the other options. The checkmark next to 'This Element Only' darkens since it is the default state. When a user clicks on 'All Process Elements' with the blue bar, the dropdown closes.
'All Process Elements' stays as the chosen option - before it was 'This Element Only.' If the user reopens the dropdown, 'All Process Elements' will have a blue bar with a white checkmark.
When a user scrolls the blue bar over 'Some Elements' and clicks on it, a checkmark will appear - like the other options above. A list below will also appear for the user to check off which Elements they would like to include.

RISKS + QUESTIONS

We need to be aware of any significant, known risks that the project faces. I.e. Are there business requirements unrelated to how the software functions? Do the developers need to take any special parameters into consideration? Is the feature going to be formally announced and if so, when should we engage marketing?

WHAT WE'RE NOT DOING + FUTURE IDEAS

We also want to detail what this feature does NOT do. This helps us make sure we're considering every aspect. Here we can also capture ideas for the future and how the feature might evolve.

We are not making larger, more structural changes at this point- unless they are simple to do. Examples include: auto-save, right click, changing formatting bar to Designer formatting bar.

...

• Hide/ Unhide - provide explanation/ add tooltip
• Add document versioning
• Add element properties to the document
• Ability to upload images
• Display customized attributes displayed in the map
• Indicate if a process has an attachment

METRICS

How do we measure success? What metrics do we need to instrument and track? We need to put proper tracking in place upfront to measure the outcome of our feature. Unless we know exactly what our users are doing, we won't know how to improve. 

List 3 main questions. These will also be our key metrics — to help us understand how our feature or improvement is doing.