The Grid

Role

Branding
Content Development
UI/UX Design
HTML/CSS Development
Exhibition Design

For

Personal Project (Senior Project)

Demo

The Effects of Responsive Design

The Grid is a responsive website to educate and allow clients (small-medium business owners) aged 35-44, in partnership with designers aged 22-30, to learn about the process of arranging content on a grid, to learn why it is important in terms of responsive web design, and to learn the real world economic/business impacts and benefits.

Most websites currently use a grid to organize content, though not in a way that is effective or that focuses on usability across a wide array of devices. Users expect that websites are optimized and adjust appropriately for the device they are using. Clients commonly are concerned about the added cost/time for a responsive design, not understanding what responsive design is and the benefits. With The Grid, users will be educated about the grid, about its impact on responsive design, about why responsive design is significant, and about the financial benefits. 

Research

I conducted research and surveys of small business owners and normal users about their behavior and expectations on different websites. The responses demonstrated a clear user expectation that websites should scale appropriately across different devices and screen sizes.

Visual Strategy

The visual strategy seen throughout all facets of The Grid are consistent and engaging. The tagline “The web is everywhere,” reflects how the web exists everywhere– on computers, tablets, and smartphones. The logo that was developed for The Grid is clean and bold. It incorporates arrows to symbolize the spread of online content on different devices.

Core Product

The Grid is a responsive website that combines demonstration and education. It contains multiple sections that work together and guides the user through an introduction of responsive design.
The homepage presents the core tagline and relates it to business owners
There are three informational sections of The Grid: Grid, Responsive Design, and The Results.
These three sections are grouped into a “tour,” which the user would navigate through, learning about responsive design.

The structure of The Grid is intended to tell a story by building on information from previous sections.
The last component of The Grid, is Gridsite, an interactive site builder, which allows the user to create a responsive website.
To make this easier, Gridsite offers a set of pre-built templates.

Ancillaries & Supporting Collateral

A series of ancillaries were developed to promote the service. As The Grid is an online product, much of its advertising is online. Advertisements are placed on relevant websites such as Inc. Magazine and The New York Times. Social networking pages on Facebook and Twitter are also an effective way of promoting The Grid. Postcards will also be mailed to local small businesses. Additional ancillaries include a client handbook, magazine ads, and a local event guide which highlights local sessions sponsored by The Grid.

Supporting collateral pieces include a branded notebook, stickers, and business cards. Accompanying the notebook is a branded combination pen and capacitive stylus, which speaks to how The Grid exists on mobile devices. 

Exhibition Space

The exhibition space for The Grid is designed to tell a story and walk the viewer through The Grid. It communicates the main sections of The Grid and how it all comes together. The space repeats the core messages and carries over the arrows seen throughout the rest of the brand.

The Grid was exhibited at State University of New York, Farmingdale State College.