Online Resource

Mount Royal University Information Technology Services
Client
Mount Royal University Information Technology Services
Role
UX Designer and Front End Developer
Skills
  • Information Architecture
  • Front End Development
  • UX Design
Link
Online Resource

About

The Online Resource is a digital version of our previously developed resource guide for Mount Royal University Infomation Technology Service. It provides users, both staff and students, with the best practices to ensure cybersecurity when conducting learning online. The document and the online resource contains procedures, concepts and facts in an easy-to-follow structure created using information architecture principles and best practices for responsive websites. Created in collaboration with Steven Tran.

Problem Statement

How do we clearly communicate procedures, concepts and facts from our print resource guide in a digital format?

Outcome Goal

The goal of the project was to use information architecture principles to create a website from our resource guide that provided the user with an effective means of obtaining information about cybersecurity at Mount Royal University.

Process

Project Proposal

Before creating any asset we created a project proposal that outlined out the strategy, scope and structure. This guided us through the creation of the site and ensured that we meet our project goals.

Online resource project proposal

Site Map

To allow for ease of navigation a navigational sitemap was created then followed during file creation. We determined that because of the target audience and their use case that the site would responsive in nature and react to the device size.

Online resource site map

Wireframe

A wireframe was developed using information architecture principles, such as integrated graphics, consistency and hierarchy of chunking and labelling. This wireframe guided the website's development and placement of any key navigation components.

Online resource wireframe for navigation

Development

Using Adobe Dreamweaver we coded and tested the site. To allow the site to adapt, a combination of HTML, CSS and Javascript was implemented. We constructed each information block using only the essential information, as not to overwhelm the user. These elements were placed on the site according to their hierarchy. Below is sample code from the project.

<body>
    <div id="wrapper">
        <header>
            <!--Search Bar-->
            <div class="searchbarcontainer">
                <form>
                    <input name="search" type="text" placeholder="">
                </form>
            </div>
            <h1 id="top">
                <img src="images/MRU_Logo 2.png" alt="" width="230" height="42" class="style-logo" />
            </h1>
            <nav>
                <h2 id="menulink">
                    <a href="#navlinks">Menu</a>
                </h2>
                <ul class="displayed" id="navlinks">
                    <li>
                        <a href="index.html" class="thispage">Home</a>
                    </li>
                    <li>
                        <a href="passwordprotection.html">Password Protection</a>
                    </li>
                    <li>
                        <a href="emailpractices.html">Email Practices</a>
                    </li>
                    <li>
                        <a href="virusprotection.html">Virus Protection</a>
                    </li>
                    <li>
                        <a href="safepractices.html">Safe Practices</a>
                    </li>
                </ul>
            </nav>
        </header>
        <img src="images/homepagebanner.jpg" width="100%" height="auto" alt="" />
        <aside>
            <!-----Local Navigation--------->
            <div class="page-nav">
                <ul>
                    <li>
                        <b>EXTERNAL LINKS</b>
                    </li>
                    <li>
                        <a href="http://blogs.mtroyal.ca/itsecurityawareness/">
                            <h5>Read our Newsletter</h5>
                        </a>
                    </li>
                    <li>
                        <a href="https://courseware.mymru.ca">
                            <h5>Take Training Online</h5>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mymru.ca/web/home-community/employee-training">
                            <h5>Take a Workshop</h5>
                        </a>
                    </li>
                    <li>
                        <a href="#top">
                            <h5 style="padding-top: 20px; font-weight: 900;">Back to Top</h5>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>

Deliverables

Website

We presented the website to our peers by conducting a live demo and answering any questions. Below is the home page as well as a sample page with the processes and procedures.

Outcomes

Learnings

There is more than one way.

The way we created our responsive website using device-specific breakpoints was effective in ensuring that the website worked on all devices but did not provide a smooth transition between them. We could have used a different method to create a smooth transition between devices using CSS grids or flexboxes.