DPC_IMG
DPC Website.

A print documentation website.

Role

Research, Information Architecture, Visual Design, Web Dev.

Tools

HTML/CSS, JavaScript/jQuery

Overview

The (now defunct) Digital Publishing Center (DPC) used various documentation to aid its clients in understanding the complex options available to them. This documentation is quite good, but it was not designed with a set structure in mind. I worked to establish a structure for this documentation.

This project was done over the course of six weeks as my final project for Information Architecture Publishing.

The Problem

Were you ever frustated with the result of your printed document? Did you seek solutions but couldn't find any? The Digital Publishing Cener website aims to solve this problem on RIT's campus by providing students and professors with documentation.

Research

I conducted research on the targeted user groups which included students and professors to understand their reasoning for needing print documentation. This is what I discovered:

Why?

Students and professors find themselves seeking a solution when facing difficulties and/or unexpected results with their printed document.

What?

Students and professors seek documentation that is relevant, easy to understand, and accesible.

How?

Students and professors will typically search for solutions on the web using a desktop or laptop while working through the issue.

Competitive Analysis

I conducted research on competiting printing facilities on RIT's campus to understand their selling points and develop a strategy that would provide the DPC with an advantage.

ldpi

Confluence

A website that provides documentation for print workflow, software troubleshooting, technical support, etc.

Documentation

It has a website with documentation but it isn't exclusive to print and the print documentation is very limited.

ldpi

The Hub

The largest printing facility on RIT's campus, providing high quality digital color print, and finishing services for students and professors.

Documentation

It has a website but it doesn't provide documentation for users in need of assistance.

Personas

I created personas as realistic representations of different user groups to understand them better and empathize with them more.

dpc-info-architecture dpc-info-architecture dpc-info-architecture
Information Architecture

I made sure to arrange the documentation in categories with keywords that would be easy to understand by anyone. These categories are file setup, batch processing, and file upload.

dpc-info-architecture
Sketches

I made sketches to visualize my ideas and explore potentials concepts. Sketching proved simple as there would only be a homepage and guide pages. All guide pages despite category had the same layout.

dpc-info-architecture
dpc-info-architecture
Visual Guide

I made a visual guide to maintain consistency in the design. The colors chosen represent CMYK (Cyan, Magenta, Yellow, and Key). CMYK is the standard with printing.

visual-guide
wire-frame
wire-frame
wire-frame
wire-frame
Categories

Each category of documentation was assigned a color representing CMKY (Cyan, Magenta, Yellow, and Key).

navigation
Navigation

Users can access documentation by selecting the dropdown links in the navigation bar.

navigation
Contact

I designed a contact button that users could use instantly on every page of the website.

navigation
navigation
navigation
navigation
Responsiveness

Although users would primarily use the DPC website on laptops and desktops, I made the design responsive for mobile devices to give users more options.

mobile
Final Product

Here is the website demonstrating the user flows I worked on while developing this project. Click here to view.

Reflections

Make the guides more readable. The documentation fakes simplicity and could be more readable by getting rid of jargon and repetitive wording.

Synchronize DPC website and print portal. It would make the printing process easier if the documentation and portal were one website.

Thanks for viewing 😀
Checkout more projects below 👇🏽