Interactive-Infographic

Who

The Office of the Chief Information Officer (OCIO) is a central agency of the Province of B.C. that leads strategy, policy and standards for information technology, IT security and the management of the IM/IT investment portfolio for the Province.

Why

The OCIO is looking for the development of an online infographic for users to interact with. The purpose is to clearly convey multi-dimensional information in a user-friendly, interactive, digital format.

The OCIO Strategic FrameWork diagram is a guide.

What

This wireframe illustrates how the main screen of the interactive infographic might look, and offers some visual context.

This second diagram illustrates how a user might interact with the infographic.

Design:

Ensure that the “content boxes (see wireframe)” can be resized vertically or horizontally, reordered, new content boxes can be added or existing ones removed, graphics, videos and text can be replaced, and additional “content elements” can added to a “content box” or existing ones removed.

The working prototype may include user navigation/interactive features, including expanding/collapsing content “accordion”, opening dialog windows for more information, tabs, sliders, etc.

For the prototype, dummy graphics, text and videos can be used; however, the developer will be expected to provide guidance on how government staff can best ready the production graphics, videos and text (e.g. format, etc.) that will eventually populate the live site.

Out of scope:

• Selection or development of content (e.g. graphics, images, videos, etc.).

• SEO, authentication, etc is not required.

• Hosting of the site.

The End Result

We will iteratively work on this project. Here's a few thoughts on the desired features for the end-state:

• Provide the final product in a format that can be run on any computer (localhost) through any modern web-browser.

• Flexibility so that the infographic structure (i.e. content boxes & content elements) can be easily modified.

• Flexibility so that the content (e.g. graphics, text, links) can be easily replaced or modified.

• Device agnostic and responsive.

• Use of commonly known, open web frameworks.

References

• Wireframe.
• An existing OCIO Framework diagram for inspiration.
• User Interaction example.
• Other similar examples with similar functionality: http://www.healthcarevaluehub.org/improving-value/interactive_strategies/

How to run

Locally

• Install Docker
• Clone the repo

git clone https://github.com/bcgov/interactive-infographic.git

• change to your new clone's working directory:

cd interactive-infographic

• Build the docker image

docker build -t interactive-infographic .

• Run the image

docker run -p 2015:2015 interactive-infographic

• Open your browser to 'http://localhost:2015'

• Rejoice!

Project Status

We are actively seeking development work. Additional issues may be created once the prototype is developed for things we would like augment or change.

Getting Help or Reporting an Issue

To report bugs/issues/feature requests, please file an issue.

How to Contribute

If you would like to contribute to the package, please see our CONTRIBUTING guidelines. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

License

All code in the /code directory is licensed under the Apache License 2.0. See LICENSE.Apache-2.0 in the appropriate directories.

Copyright 2016 Province of British Columbia

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.