I worked on a project to turn paper based study texts into responsive HTML5 output. For this project a 3^rd party web developer was used to create the final output. My input was required at the UX stage where I was asked to design a storyboard for the web developer to work from.

Background

The study texts were converted from XML into DITA. Our 3^rd party developed a conversion tool to output DITA into HTML5 web pages. My storyboard was used as the concept for the final design. The HTML5 output needed to be accessible via desktop, tablet and phone.

I suggested using a simple bootstrap framework that could be used across desktop, tablet and mobile devices. The company branding would be applied, along with logo, and additional images would be purchased if required. After speaking with the 3^rd party web developer, it was decided that a DITA Oxygen webhelp template would be purchased and configure.

Design

I created a set of initial storyboard slides using PowerPoint. The designs are split up into different areas and show what the launch page and content pages could look like. I have ensured that there is consistency among the different pages and different devices which promotes familiarity to the user. I used pinterest (https://www.pinterest.com/pin/433893745320034683/) to research wireframe examples to inspire a simple design. I also used the bootstrap website https://getbootstrap.com/docs/4.1/examples/ for ideas. I created a design for desktop, tablet and mobile use, the usability of each design changes slightly to accommodate smaller screen real-estate.

The page consists of a top navigation menu, content panel and a footer. Navigation is sticky – it’s always found at the top of the page, does not move and does not change – unless you switch devices. There are several icons at the top right of the navigation menu that have been placed for easy access – these are menu items that users access on a regular basis. When the navigation icons are clicked a modal overlay is displayed. This ensures the user isn’t navigated away from their page. The user can then close this modal and resume from where they left off.

There is breadcrumb navigation along the top of the content pane, this allows the user to know where they are in the content at all times. A collapsible menu is also displayed on the left, so the user can traverse to different chapters/subjects. A pane along the right displays the topics currently displayed in the content. This pane disappears when the screen real-estate is reduced.

I have left the company logo blank and applied very little styling to ensure that the design functionality was the main focus of the concept, rather than the logo, images and colours. Getting the navigation and content placement right was at the top of my agenda for this storyboard.

Tools Used

• PowerPoint

Summary

My design was used as the storyboard for the project, providing the 3^rd party developer a rough concept to work against to develop a working prototype. There were some slight changes between the concept design and final output, this was mostly to do with content placement.