AREA 17

Princeton
University
Press

Associations / Nominee

AREA 17

Associations

Nominee

As a digital product agency, AREA 17 emphasizes design principles such as simplicity, craft, timelessness, and user-centeredness, rather than trendiness or complexity. Likewise, we begin from development principles that include Web standards, usability, and performance. - AREA 17 Team

Q: Can you briefly describe your project and the concept behind it?

A: Princeton University Press (PUP) is a non-profit publisher deeply respected for its distinguished authors, academic rigor, and publishing excellence. We partnered with PUP on a full redesign that speaks to that reputation, creating not only a best-in-class digital bookstore, but providing context and original content that fosters community, discovery, and exploration. The Press takes pride in the craft of book publishing—everything from editing to jacket design and typesetting. We rooted the UX in the analogue experience of browsing books with an immersive discovery experience. And we created a look and feel that recalls classical book design and the culture around crafted typesetting.

Q: Talk about your initial prototypes. How did those ideas change throughout design and execution?

A: Princeton takes pride in their book cover designs and the craft that goes into printing books. So we wanted to somehow reflect those values on their new digital platform. Our initial wireframes and sketches were heavily focused on content and functional requirements and on designing the core user experience, exploring the different views with which the user needs to interact. As we iterated, however, we looked for ways to make the book discovery experience feel more delightful, immersive and akin to the analog experience of opening a book—without sacrificing usability. Additionally, we incorporated a new brand identity rooted in classical book design and typography.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

Initially, we intended to take inspiration from the corporeality of the book. Early in the process, we had a number of iterations of the book page that weren’t too different from functionally focused e-commerce pages. It wasn’t until we decided to allow the book cover to “tell the story” by making it big and placing it squarely in the center of the page that we realized we were on to something. From that, we refined the experience to allow the user to seamlessly toggle between different functionalities and content while keeping the book as a focal point. So, ultimately, the book cover became a simple and elegant foundation for bringing everything into a solid and unified user experience.

Watch

Q: What influenced your chosen technical approach, and how did it go beyond past methods?

A: Our studio has made a big push over the past few years to think, design, and build from the atomic and modular levels—a paradigmatic shift away from thinking about web products as just a collection of templates. There are dozens of benefits to approaching our work this way, but perhaps the most important are that, first, it necessitates that we stress-test our systems as we build things out, and, second, it gives the site administrators much more flexibility when it comes to constructing their pages. Pairing a modular system built out of Twig Templates in Pattern Lab with a flexible CMS means that the content creators have leeway to fit pages to their content and not the other way around.

Q: What web technologies, tools, or resources did you use to develop this?

A: AREA 17 frontend boilerplate HTML 5 Vanilla JavaScript SCSS with BEM naming convention Webpack and NPM scripts to compile FE code Mobile-first design SVG icons (via an XHR injected svg sprite) Twig templates Drupal 8 Atomic component structure (https://bradfrost.com/blog/post/atomic-web-design/) Patterns demonstrated in PatternLab (https://patternlab.io/) Design work in Figma and Principle A17 Studio used to organize design presentations FE coding in Sublime Text and VS Code Browserstack, iOS Simulators, Virtual machines and real iOS and Android devices used for cross-browser and cross-operating system testing

Q: How did you balance your creative and technical capabilities with the client’s brand?

A: As a digital product agency, AREA 17 emphasizes design principles such as simplicity, craft, timelessness, and user-centeredness, rather than trendiness or complexity. Likewise, we begin from development principles that include Web standards, usability, and performance. These core philosophies drive our design and development process and are central to delivering robust, aesthetic, and highly performant digital platforms for clients like Princeton University Press. Our approach was aligned with Princeton’s needs from the outset, allowing us to deliver a product with exceptional user experience and performance while also expressing the gravitas of the Princeton University Press brand.

Q: How did the final product defy your expectations?

A: The new digital platform has been transformative for a 100+ year old academic publisher focused on printed books, providing the organization with valuable new tools for serving its stakeholders and users. The results are best expressed by Princeton University Press Director Christie Henry: “AREA 17 has taken the proverbial blank digital page and animated it with an elegance that surpassed our expectations… The website has taken on entirely new levels of import, for communicating with our authors, readers, students, etc. I could not be more grateful for the partnership we have, which remains formative for PUP."

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: Through our work, we have the opportunity to enhance the impact of organizations we trust and admire by creating brands and products with lasting value. In doing so, we aim to create a positive impact on the post-coronavirus world, contributing new ideas, hypotheses, design, and code to the future now unfolding. We also see an immense opportunity to deliver design systems to clients who do not have the resources to create them on their own. Techniques such as atomic design and modular Web design, as well as tools such as Figma, Storybook, and a flexibly-built CMS give us precise methods and platforms for organizing and scaling reusable components in our design and development process.