Informatix, Inc. ADPQ Vendor Pool Prototype B
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 2 commits behind informatixinc:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Accessibility Testing
Mockups
Screenshots_and_pictures
SeleniumScreenshots
Usability Testing
Whiteboads
Wireframes
db_schema
docker
webapi/cal_notify_api
webapp
.gitignore
Cal Notify User Manual.pdf
Continuous Performance Monitoring.docx
Flow.PNG
Human Centered Design Approach final.pdf
Informatix Team.pdf
Installation and Deployment Instructions.pdf
Junit Script Extract. pdf.pdf
Personas.pdf
Playbook.pdf
README.md
Sign In page Surveys.pdf
Style Guide.pdf
Usability Testing Process.pdf
User Stories .pdf

README.md

#Informatix, Inc. ADPQ Vendor Pool Prototype B

###Prototype: https://calnotify.informatixinc.biz/

The user guide is located here.

To login as an Authorized Administrative User please enter:

Email Address: calnotifyadmin@informatixinc.com
Password: Calnotify1!

##Technical Approach

Informatix Inc. is a minority-owned, Sacramento-based technology company that has provided information technology solutions and services to government and private industry for 30 years. Our response team for the Pre-Qualified Vendor Pool for Digital Services – Agile Development RFI utilized an agile human centered approach to create our ADPQ prototype. We focused on the needs of the end users which drove our feature development and our application program interfaces (API) integration. We started with a discovery that included surveys, research, and interviews and focus groups with users which was conducted continuously throughout the iterations. This continuous feedback promoted end user adoption and satisfaction

Our team used the following user centric processes to complete this prototype:

  • Conducted surveys of the home page immediately following the start of the project.
  • Conducted research to understand the trends within the industry and other State solutions.
  • Created personas to identify, personalize and focus on end users’ needs.
  • Developed user stories and created backlog.
  • Developed front end UI web/mobile application. Conducted usability testing and improvements were incorporated into the design and user stories. The results of the first usability test results are here.
  • Developed functioning UI web/mobile application. Conducted additional usability testing and improvements were incorporated into the user stories and final design.
  • Developed fully functioning prototype including backend API and conducted another cycle of usability testing. Results were evaluated and either (1) prioritized and incorporated into the user stories and the final design of the prototype, or (2) identified as future improvements to the prototype.

We started each iteration with a sprint planning meeting. These meetings were time-boxed conversations, where our Product Manager and the team identified which stories to be worked on for that sprint. Our Product Manager prioritized and added the stories to the sprint backlog. We conducted daily, in person, scrum meetings to discuss the progress that was made since the last scrum meeting (“yesterday”), goals to accomplish before the next scrum meeting (“tomorrow”), and any impediments that were preventing team members from performing their work. We conducted whiteboard sessions, initial wireframes and mockups immediately after the project start date, so we could immediately start surveying end users and have an initial mock up in hand. We conducted whiteboard sessions, additional design sessions, made continuous updates to wireframes and mockups throughout the effort. We performed testing and made adjustments based on issues and feedback from our test cycles and usability tests. Each of our sprint cycles was performed to ensure that the prototype functioned and met user requirements.

###CalNotify Architecture| Cal Notify is built using a three tier architecture consisting of a client side, single-page web application, a RESTful web API providing backend application services and a database tier for storing application data and state. The system architecture is illustrated here.

Flow Diagram

###Code Flow Our code flow illustrating application layers and technologies used can be found here

##Adherence to the US Digital Services Playbook We followed all of the applicable Playbook plays. Our agile human centered approach incorporates the application development aspects of the U.S. Digital Services Playbook. Details can be found here.

##Informatix' ADPQ Team

a. Assign one (1) team leader

Caroline Brown-Pierce was selected to lead our team as Product Manager and Product Owner. She was accountable and responsibility for the quality of Informatix’ prototype.

b. Assembled a multidisciplinary and collaborative team

We assembled a team of experienced and creative professionals from eleven of the labor categories identified in the RFI:

  1. Product Manager: Caroline Brown-Pierce
  2. Technical Architect: Paul Ortiz
  3. Delivery Manager: Lesa Jones
  4. Visual Designer: Mario Ruiz
  5. Interaction Design/User Researcher/Usability Tester: Stephanie Jones
  6. Writer/Content Designer/ Content Strategist: Karen Wagoner
  7. Front End Web Developer: Sean Kammerich
  8. Backend Web Developers: Nirali Tank
  9. DevOps Engineer: Paul Ortiz
  10. Security Engineer: Sean Kammerich
  11. Business Analysts: Ian Toner, Luis Pelayo, Yulia Vydra

##User Centric Design

c. Understood what people needed

Human centered design focuses on improving the user experience – a goal that is impossible to achieve without understanding what people need. Our human centered design approach has three phases: Discovery, Ideation and Implementation. Each phase has specific activities focused on eliciting user needs.

  • Discovery – Our Interaction Designer, Architect, Business Analysts, Delivery Manager, and Product Manager developed concepts for discussion and iteration including the following activities:

    • Developed personas that represented California residents, the intended users of this application.
    • Designed a mockup of homepage for the application to use as a springboard for user persona interviews and surveys.
    • Conducted surveys and interviews to obtain feedback on the homepage, eliciting user expectations regarding log-in,
      account formation, notification preferences, and general expectations regarding the functionality of the application.
  • Ideation – during this phase, our team refined our conceptual understanding of user requirements, by completing the following:

    • Conducted whiteboard sessions to review user feedback and expectations.
    • Created initial user stories reflecting each persona and their requirements.
    • Established a product backlog used for Sprint planning.
    • Utilized a Sprint Backlog for subsequent sprints.
    • Developed wireframes based on whiteboard sessions and user stories.
    • Developed a template to facilitate usability testing, and conducted Usability Testing with users and held one-on-one interviews, to review wireframes and elicit feedback.
    • Developed mockups based on wireframes and results of Usability Testing.
    • Conducted additional Usability Testing for mock-ups.
    • Developed final user stories based on results of Usability Testing.
    • Create our style guide and established design philosophy based on user feedback.
  • Implementation – our team’s implementation efforts included the following

    • Began our first sprint cycle
    • Conduct Sprint Planning to commit to user stories to develop in the sprint
    • Conducted daily scrum meetings
    • Developed first iteration of Cal Notify
    • Conducted Usability Testing to elicit user feedback
    • Refined user stories and product backlog based on user feedback
    • Conducted Quality Assurance and Accessibility Testing.
    • Conduct Sprint Review meeting to demo completed software and to elicit acceptance/changes from stakeholders
    • Initiated subsequent sprint cycles including scrum meetings, usability testing, quality assurance and accessibility testing, and defect resolution
    • Released Informatix’ Cal Notify solution

d. As part of our Human Centered Design, we used the following user-centric design techniques or tools.

  1. Persona development
  2. Surveying potential users
  3. Wireframe development through user interviews
  4. Mockup development and user interviews
  5. Style Guide development
  6. Usability testing within Sprints

##Prototype Development

e. Used GitHub to document code commits

A Private GitHub repository was created as soon as project began. As the design process continued, new and changed code was committed to the repository at the end of each workday. Once coding was finalized, the repository was made Public to present the prototype for evaluation.

f. Used Sweagger to document theRESTful API

We used Swagger to document the RESTful API. https://app.swaggerhub.com/api/ptortiz/calnotify-api/1.0.1
A screenshot illustrating this can be found here.

g. Section 508 of the Americans with Disabilities Act and WCAG 2.0

To ensure compliance with Section 508 of the Americans with Disabilities Act and WCAG 2.0, Accessibility Testing was completed with the use of the Accessibility Developer Tools plugin in Chrome browser. The use of automated testing on the Cal Notify prototype provided validation of the 508 complaint standards.

h. Created or used a design style guide and/or a pattern library

Consistency in look, feel and format are essential to maximizing the functionality and usability of any application.
With that in mind, our Visual Designer created a design created a style guide that detailed the design elements all team
members would use from iteration to iteration, not only to create a user-centric application, but also to facilitate and
speed the development process.

i. Performed usability tests with people

We tested usability with real people to get real feedback. During each development sprint, our testers were invited to use the
most recent iteration of the prototype and provide their feedback. Through this testing process, we were able achieve continuous improvement by incorporating their feedback into subsequent iterations of the prototype.

j. Used an iterative approach based on feedback prototype

We conducted two sprints, each sprint informing the subsequent. Each sprint cycle began with a sprint planning meeting and ended with a sprint review and sprint retrospective meetings. Daily scrum meetings provided our team the opportunity to review our progress and discuss testing feedback. These were incorporate into the sprint and product backlog. For each sprint cycle, our product manager would lead a collaborative session of whiteboard brainstorming that ultimately drove the creation of user stories, wireframes and mockups and defined what was to be accomplished in each sprint or put into the product backlog for the next iteration.

k. Created a prototype that works on multiple devices, and presents a responsive design

Informatix’ prototype works on multiple devices including desktops, laptops, android and iOS phones and tablets. Our team developed mock-ups that reflected responsive design for multiple devices. We conducted usability testing on various devices to ensure its ease of use and design for both Windows or iOS platforms and we tested the prototype in Internet Explorer (IE), Google Chrome, Firefox and Safari. Quality Assurance and Usability testing of the desktop and mobile versions of the prototype was also conducted concurrently, using both iOS and Android devices of various screen sizes and models.

##Technology

l. Used at least five (5) modern and open-source technologies

We used following open source modern technologies:

Front End

  1. Angular 2
  2. Selenium
  3. CSS
  4. Bootstrap
  5. Chrome Plug-in

Back End

  1. Tomcat
  2. Jersey
  3. Postgres
  4. NGINX
  5. GSON
  6. Maven
  7. J-Unit

Other:

  1. Bugzilla, Pencil

m. Deployed the prototype on an Infrastructure as a Service (IaaS) or Platform as Service (PaaS) provider

We used AWS as our Platform as Service (PaaS) provider.

n. Developed automated unit tests for our code

Junit was integrated with Maven to build and run the tests, see an example here. Selenium was used to support integration testing. See here for an extracted Selenium test scripts.

o. Continuous integration system, automated testing and continuous deployment

Our team used a continuous integration pipeline to automate testing and deploy code as illustrated here.

  1. Code is deployed to GitHub and a notification is sent to AWS code builder.
  2. This triggers automated tests using the frameworks of Junit and Phantomjs
  3. Once the automated tests pass, the code is compiled into artifacts.
  4. The artifacts are then sent to CodeDeploy.
  5. CodeDeploy service packages the artifacts and deploys them to AWS Elastic Beanstock.

p. Set up and used configuration management

For both development and production we used GitHub for source change control and AWS managed services for infrastructure, security, resource inventory, configuration history and configuration change.

q. Setup or used continuous monitoring

AWS Cloud Watch Service was used to collect and track metrics and perform continuous monitoring of application and server
performance and availability.

r. Deployed their software in an open source container

We deployed application in AWS Elastic Beanstock and provided a Docker-compose script that can be used to deploy the
solution on any Docker host.

s. Provided sufficient documentation to install and run their prototype on another machine

Instructions for installing and running our prototype can be found here.

t. Prototype and underlying platforms used to create and run the prototype are openly licensed and free of charge

Informatix’ CalNotify prototype and its underlying platforms and frameworks are openly licensed and free.

Additional Information

To see how we followed the USDS Playbook to build our prototype, see details here.

The user guide for CalNotify is located here.