Product: ACM journal websites

A consistent & responsive layout for a series of scholarly journals

Engagement: Requirements gathering through interviews and prototyping, new information architecture (IA) based on personas and business needs, reviews with senior staff and editors, visual design.

“A major enhancement to the ACM DL [Digital Library] debuted this year with the rollout of new journal homepages, which now present a uniform, seamless style of ACM branding."
– From the ACM Annual Report for FY15

Product: A consistent and responsive design for all of ACM's journal websites

Details: ACM is "the world’s largest educational and scientific computing society". ACM publishes dozens of scholarly journals. Volunteers in the special interest groups (SIGs) are responsible for each publication's website, so each website was different.

I always liked that all Major League Baseball websites use the same layout, so I was excited to help ACM create a consistent (and responsive) layout for their journals. Consistency makes it easy to use all of the journal sites and relieves each SIG of the need to create and maintain a design. Responsiveness lets people read on large screens at work, and on smaller screens while commuting.

Here's what some of the sites looked like before the redesign:

Before the redesign, each journal created its own website, and they were all different

I worked with Holly Valero of HollyWorks on the project; I focused on interaction design and coordinating with the client, while Holly worked on graphic design and coding. We designed a single layout that is used for each journal.

The sites vary in accent color, which comes from the familiar print journal cover. While the layout is consistent, it's not exactly the same: each SIG can modify the information architecture and content to suit its needs.

New website layout on iPad

One journal on an iPad, showing common display and navigation items…

New website layout on iPhone

…and another journal on an iPhone

We worked closely with ACM's senior staff to develop requirements, create and review prototypes, and delivery a complete design. Activities included:

  • Refining the business requirements through analysis, and discussions with department directors
  • Creating a new information architecture based on personas representing the users
  • Incorporating information from customer research in earlier ACM projects
  • Developing prototypes to help refine the requirements
  • Reviewing prototypes with senior staff and journal editors
  • Developing a visual design model
  • Creating a full implementation (with HTML, CSS and JavaScript coding) for delivery and final implementation

New website layout on iPhone

An early mockup, showing some of the content we considered and a possible layout.
This annotated image was part of a review with ACM.

Other projects for ACM: A corporate retreat with senior staff to redefine business models, design workshops, design and usability studies on the Digital Library, and other projects.

Let us help you build better products

Contact Hal Shubin at 617 489 6595, hal@user.com, or fill in this form.