Background

The American Chemical Society, and organization that supports chemists and chemistry education, founded this child organization as an online resource and tool for elementary, middle and high school chemistry teachers. Working with minimal content and tight timeline, I worked on this site from concept to launch to progressive enhancement.

There were two phases to this project: 1) A landing page introducing the organization and announcing the September launch of the full site, with a application for member signups, and 2) the full site. Each phase was to be done in succession, with one month for each.

Understand

Myself and other members of the UX team met with and interviewed stakeholders to learn more about their users and the organization’s goals. We collaborated on user flows, site maps, wireframes, labeling, working on several revisions of the landing page, application and full site.

Design and Development

I worked concurrently on the UI and visual design of the landing page, and developing the target HTML and CSS for the application (as well as header, footer and scripts) to the .NET team. My design was based around the concept of communication. The organization offers chemistry teachers and offers them a place to interact, connect and share with peers within K-12 chemistry education. It needed to provide a sense of community, especially for the chemistry teachers who may be the only one in their school, area or town.

The main image on the home page banner, a molecular structure, represents both chemistry and communication (in an early round I learned that the chemical molecule couldn’t be abstract, and that they had learned their users weren't big on artistic license). I also wanted the visuals to be clean and friendly; look like a site related to education while looking current, professional, credible and active.

After a few rounds of design revisions, I began development using HTML, CSS and jQuery, and soon we launched the landing page. This site would only be live for one month until the launch of the full site.

Home: Phone – Portrait

I began the design phase by doing an informal competitive analysis. Using this along with functionality requirements, information and deliverables from my team and the newly created branding, I began working on the visual design.

The full site would be hosted in the Adobe CQ5 CMS, and would be using the existing ACS and Bootstrap frameworks. It had to be fully authorable by the client, so it had to be flexible for their various content needs while effectively controlling how the styles would be used in order to maintain accessibility compliance as well as to stay on-brand.

I did the visual and UI design for six different templates, mobile design, and developed the target HTML and CSS for the templates.

The full development was passed to the front-end and back-end teams, and I began working on bug fixes as development proceeded. Then... another launch! After that, the many teams involved could breathe again and I then created styleguides and documentation for the client and continued working on small bug fixes and enhancements.

Responsive Views

Full Site Home Page

Full Site Periodicals Home Page

Landing Page Desktop

Landing Page Phone and Tablet