Design process

Websites and web applications are designed and built according to a five-step process.

While every project is considered unique in its needs, scope and design, a common design process helps drive projects to completion while ensuring exacting standards are met. Our process is by no means revolutionary, but years of experience demonstrates it works consistently well.

Needs analysis

Discussions are held with the client's project managers to identify the goals, technical requirements, and measurements of success for the application's user interface. A usage model is mapped out, existing user feedback (when available) is reviewed, and navigation alternatives are considered.

j.dubbs design then works with the client to identify a delivery date and implementation timeline, after which an extranet site for the project is established, though which project deliverables available to the client.

Specification

The application's features and functionality are mapped to an information architecture, defining the navigation pathways throughout the user interface. Ideally, the architecture strikes a balance between breadth and depth, minimizing clicks to commonly-used features, without bombarding the user with too many options at once.

Where possible, redundant means of accessing commonly used features are built into the information archicture, accounting for differences in usage patterns among users.

Design

Once an information architecture is finalized, the application's screen layout, look and feel, and navigation are designed through a series of Photoshop screen mockups. Typically, 3-4 mockups are initially produced, focusing on unique screen types or high-value functionality.

Feedback is solicited from the project team, after which one or more rounds of iteration are made to the design. Depending on the project's scope and timetable, additional screens may be mocked up prior to prototyping.

Prototyping

With a final design in hand, a clickable model of the application's user interface is prototyped. CSS is written to define text formatting, screen layout, and navigation elements such as menus and dialogs. Key screens are authored in HTML/PHP, while custom icons are designed for inclusion in the user interface. If desired, end-user testing is conducted to validate navigation and usability.

Depending on the scope of the web application, all or some of its features and functionality may be prototyped, at the discretion of the client.

Integration

The application prototype is tested and debugged on the latest general-release version of Internet Explorer, Firefox, Chrome and Safari, along with any additional browser versions identified by the client during the needs analysis phase.

As application modules and discreet UI components are finalized, prototype code is delivered to the client's production engineers for integration. j.dubbs design will then work with the client to ensure the UI is grafted onto the application framework, identifying and correcting any issues that may arise.