Information Architecture, UX Design

Design Case Study: Converting a Desktop-Based Web Application Into A Responsive One

As the lead UX Architect with Publishing Technology, I have been working on a project that involves redesigning our company's academic publishing platform pub2web from an application originally built for a typical desktop user to one that could work optimally across different devices and screen-sizes.

The Challenge: "Bespoke" potential and yet "Vanilla" as its core

pub2web is a "robust, feature-rich web-based publishing platform designed to allow academic publishers to maximize the visibility, usage and value of their content via semantic enrichment while optimizing their content licensing around flexible ecommerce and access controls". It is a potentially "bespoke" platform, meaning that it can be customized for each publisher on a separate instance, offering integrated branding and functionality that can be turned on and off according to the customer's needs and business requirements.

Unlike a "straighforward" brochure-ware website, converting a complex web app into a responsive one presents no small amount of design challenges, as feature-sets need to be modular in their design and have zero-impact on the UI/CSS if added, removed or hidden based on the given form-factor or use-case. In addition, the front-end code-base has a seven-year development history and an army of developers (some of whom have come and gone) who have been working on it with no real overriding process or approach for the UI/CSS, let alone one for creating or maintaining a responsive site. In short, the UI customization from once instance to the next has largely been localized and there is/was no real process or documented approach to making such customizations or reverting them back to the vanilla version.

Lastly, the "bespoke" nature of the platform is a huge selling point for our publishers and so in designing a "vanilla" pub2web instance we needed to consider the flexibility of the templates and create/deploy/maintain a CSS/HTML codebase that can be easily customized while maintaining its responsiveness. This means creating a variety of grids and modularized widgets that could accomodate all possible combinations of requirements. It means creating a well-documented process for customization without localized "hacks" to the CSS or HTML.

Requirements-Gathering Process

Identification of Common Grids, UI Elements and Feature-Sets
Surveyed current "vanilla" pub2web instance, original wireframes, and already-implemented sites for common elements and documented/prioritized them in a spreadsheet. Verified feature-sets with the development team.

Development Team Meetings
Conducted and participated in a series of remote meetings with local and UK-based developers to discuss the current system and any barriers to making the application responsive. A good deal of these conversations focused on the current UI codebase and the separation (or sometimes lack thereof) between the data- and UI-layers of the site. Conclusion: we have no small amount of hurdles to overcome and decisions to make. We were to proceed with the design full-on, with the caveat that compromises might have to be made for "Phase 1" as we move into development.

Output: Design and Architectural Artifacts

Low-Fidelity Sketching > Medium Fidelity Wireframes > Interactive Mobile Wireframes
Did some initial hand-sketching of major templates at varying breakpoints then moved the sketches into static versions of the templates into Axure. Added interactions to the Axure document to illustrate the smallest probable form factor, the handheld phone (see below). The idea was to begin with a "mobile-first" design and scale up through breakpoints until we were back at the desktop.

A few examples of my whiteboard sketches from a workshop that led with the development team:

Whiteboarding RWD 1
Whiteboarding RWD 2

Interactive Prototype Optimized for Handheld Device Browser

High-Fidelity Mockups of Major Grids & Feature-Sets

Employed Photoshop to work through more details in the UI and to show how branding for a sample client could be brought in:

Initial High-Fidelity Design of Major Templates and Feature-Sets

Refined/Finalized "Master Guide" to Major Templates and Feature-Sets

Proof-of Concept Responsive Templates

Hand-coded several responsive templates to experiment with major grids and breakpoints.

Proof-of-Concept Responsive HTML/CSS Templates