The Rand App

Case Study

A mobile app imagined as a partnership with the estate of modernist designer Paul Rand. The goal of the app is to bring his work to a new generation.

Executive Summary

Rand is a mobile app prototype meant to introduce new audiences to Paul Rand, a famous modernist graphic designer. In addition to a brief introduction to his life and design philosophies, the prototype includes 4 case studies emblematic of his oeuvre.

This project was created as a teaching tool to help students in an introductory design class to better articulate a connection between their prototyping skills and explaining their design decisions. The goal was to to design something from the “ground up" that fit within Paul Rand's larger stylistic trends as well as his design philosophy of The Beautiful & The Useful.

Role
Interaction design, info architecture, content design

Duration
November 2019 - March 2020 (on and off)

Tools
Figma, Illustrator, Photoshop

Links
Prototype (links to Rand's Figma files)

Introduction

This is my “take” on a project given to students in a History & Design Fundamentals class at Kennesaw State University. The goal of the class was to introduce interaction-designers-in-training to fundamental visual and user interface terminology though Graphic Design: The New Basics (Lupton, 2015) and Don't Make Me Think (Krug, 2013), to learn the basics of a prototyping tool (Figma), and to apply knowledge learned in class to some type of prototype-based project.

The project prompt asked students to create a website or mobile app (tall, narrow form factor) that would act as an introduction to Paul Rand to those unfamiliar with his work. The hypothetical client in this case was the estate of Paul Rand. The goal of the project was not only to create a working prototype, but to explain the decision-making process. Thus, students also had to complete critique sessions and write design justification papers.

For context, students read Paul Rand’s Thoughts on Design (1947), listened to lectures on modernism, read chapters on pictorial modernism, the International Typographic Style, and the New York School from Philip B. Meggs & Alston W. Purvis’ Meggs’ History of Graphic Design (2012), and were encouraged to do extra research on Paul Rand.

Concept

Based on the project prompt, the Rand estate wanted a product that would bring new audiences to the work of Paul Rand. My approach to the project was to create a mobile app that acted as a funnel to the paulrand.design website. On that site, we find a comprehensive archive of Rand’s life, work, and writings. For the purposes of this project, I designated this website as the “official” website for Paul Rand, which it is not.

In a bid to attract new audiences to Rand's work, a “mobile-first approach” made sense because, according to Pew Research, “Americans of all ages are increasingly likely to say they mostly go online using their smartphone" (2019, 1). Additionally, the younger a person is, the more likely it is that the smartphone will be their primary access point for the internet.

Considering these facts, this mobile app prototype aims to create an appealing, introductory experience for people unfamiliar with Rand's work and acts as a funnel to a more complex experience on the web. In doing so, the app prototype favors quick engagement and curiosity, while still creating some sense of depth through the implementation of case studies of specific Rand works that cover all of Rand’s major design areas — advertisements, book and magazine covers, and logo design.

Design Approach

The design of the app was based on Paul Rand's belief that beauty and usefulness were mutually generative. The app aimed for beauty based on an homage to some of his stylistic techniques, many of them articulated in Rand's book Thoughts on Design (1947). The app aimed for utility based on the simplicity inherent in Steve Krug’s approach to web and mobile usability. In the next two sections, I will explain these approaches.

The Beautiful

Paul Rand was enamored with the modern art and design movements that emanated from Europe in the late 19th and early 20th centuries. And he was seen as one of the first graphic designers to popularize a modern style in an American context. Even so, his style never fit neatly into theories of European modern design. At its most constrictive, a modern design philosophy eschewed “personal expression and eccentric solutions were rejected, while a more universal and scientific approach to design problem solving was embraced” (Meggs & Purvis, 2012, 372).

Rand's design philosophy balanced a tension between the geometry of European graphic modernism and human playfulness, or, as Philip B. Meggs put it, the use of “sensual visual contrasts" (2012, 391). Overall, as Ned Drew and Paul Sternberge identify, Rand’s style might often be described as “informal playfulness" (2005, 63).

The design for the Rand app embodies this tension between a stricter European modernism and Rand's creatively playful interpretation. For instance, I worked within many guidelines of modernist graphic design, which included the use of grids, geometric abstraction, sans-serif typefaces, et cetera. In many ways, the “clarity and order” of modern design shouldn’t be difficult to approximate since most contemporary app design is grid-based and works with geometric shapes to create the condition for more easily responsive designs.

You can see how I incorporated Rand's often whimsical, hand drawn style in the introductory onboarding process for the app (see Onboarding GIF). I did this through an homage to common Rand techniques—the whimsical placement of organic geometric shapes and undulating arrows as part of collages. These collages offer the “in-process” feel that trouble the otherwise orderly nature of the app. Rand often favored the way collages created active moments of synthesis and meaning-making for an audience (2014, 48).

I chose to stick with a modernist design tendency to use sans-serif fonts for their machine-like appearance. I used fonts from two sans-serif font families in this app—Futura and Inter. Futura Bold was used for titles and nav bars because, as Paul Rand says, Futura is “unique” and not recommended for large portions of text (Rampone, 1989, 1).

Bright, vibrant colors were used to pique attention and  “pop” against the black and white organization of the rest of the app. These colors were not chosen at random; rather, they were drawn from the color palettes of the 4 case studies. The colors are coconut cream (#E2DBBE), crimson red (#D91312), jaffa orange (#EF9C41) and IBM blue (#5A87C5).

Further discussion of font and color usage will appear in the next section. Through the application of modern principles and an aesthetic that pays homage to Paul Rand, I believe I have created something beautiful within the context of his work. 

The Useful

While Rand believed that design should be beautiful, he also thought that beauty needed to be in the “service of communication" (2014, 9). The prompt for this project asked students to not only explain their design decisions in light of Paul Rand’s thoughts on design, but also by the “rules of thumb” for good web and mobile design that Steve Krug laid out in Don’t Make Me Think, Revisited (2014). Krug's work is a great introduction to many concepts that live under the umbrella of information architecture and interaction design. His simple rules are perfect for teaching introductory students before moving to more complicated concepts.

The Rand app was designed to be usable in, as Krug would say, self-evident rather than self-explanatory ways. I designed the prototype for an iPhone X viewport (375pt x 812pt), followed basic UI design principles, and worked with suggestions from the then current iOS Human Interface Guidelines.

I will discuss the desire to make Rand easily usable through (1) general conventions I followed and (2) the general organization strategies for accommodating findability and shaping user flow.

The general UI conventions I followed include:

The app was organized around the following concepts:

Through the application of Krug’s “rules of thumb” for mobile usability, I believe I have created something that is useful without compromising the beauty of Rand’s work.

Conclusion

We see a tension between beauty and usefulness that plays itself out over the course of Paul Rand’s career. His goal was to be beautiful in such a way that it served a purpose in communicating ideas. Yet, Rand also believed that we should not overemphasize function at the expense of style (2014, 76). This is the tightrope we always walk as designers if we are to not only make beauty and usefulness mutually generative, but to satisfy our own aesthetic standards in the process. In this app, I believe I have created a successful homage to Paul Rand that does not eliminate his aesthetic playfulness for the sake of usability. 

Lessons Learned

Works Cited

Drew, Ned & Paul Sternberge. 2005. By Its Cover: Modern American Book Cover Design. Princeton: Princeton Architectural Press.

Inter Typeface Family. Accessed May 1, 2019. (link)

Krug, Steve. 2014. Don't Make Me Think Revised 3rd Edition. Indianapolis: New Riders.

Meggs, Philip B. & Alston W. Purvis. 2012. Meggs’ History of Graphic Design 5th edition. Hoboken: Wiley.

Pew Research Center. “Mobile Technology and Home Broadband." Accessed May 1, 2019. (link)

Rampone, Mario. 1989. “Paul Rand Interview.” Fall 1989, New Series, Volume 1, No. 1.

Rand, Paul. 2014. Thoughts on Design: New Edition. New York: Chronicle Books.