The Graphic Design Archive
UI - UX - Animation
Challenge
To create a digital resource of an archive of Modernist design artifacts for students and scholars of graphic design history. An engaging, interactive design solution was needed that would engage users with a collection of rare and graphically inspiring works.
Solution
A website was created that allows users to create an account, conduct and save searches, and compile results into sharable moodboards. A fresh logo, sleek interface, and carefully placed opportunities of engagement along the search path create a user experience that encourages even the most discerning digital native to take a scroll through history.
Research
Searching is Learning
A search tool is essentially a teaching tool. The user formulates an inquiry and the teacher, or search function, provides answers and opportunities to study and learn. By applying data gathered by information scientists and educators about how people learn, it is possible to make a powerful and engaging search tool.
The User Drop-off Rate of Searches
Conducting a search is an emotional activity. A user may feel wariness, hesitation, confusion, inspiration, excitement, fear, joy and pride. The documented emotions are graphed with their correlating search phase and user drop-off rate. Using this data, we can provide search functions that best suit the needs and emotive state of the user at different points in the search process.
High Resolution Wireframes
Main Page
The initiation, or introduction, to a search site is characterized by uncertainty and a high risk of loss of engagement. The main page offers users resources to help navigate through this uncertainty, get a lay of the land, and feel inspired to begin exploring and asking questions. Carousels, infographics, side scrollers, and image galleries all serve as enticing entry-points.
The Components of Information Design flashcard tool gives users an opportunity to brush up on graphic design vocabulary, making them experts in the design terminology they will later use for searching and tagging.
Detail Pages: News and Supplementary Information
During the potentially overwhelming exploration phase, a break from the search encourages further engagement with the material. These pages break down information that conceptualize the archive contents and encourage users to become experts.
The Search Bar
During the selection and exploration phases, the user enters search criteria and narrows results. This phase poses the greatest risk of disengagement, so features like a sticky search bar, a search window whose advanced options hover above the main page, and savable searches encourage the user to persist through various search attempts.
Item Pages and Saving Tools
Finding and saving the search results are the actions that define the formulation and collection phases. The interconnectedness of items, artist bios, and similarly tagged items create opportunities for serendipitous discovery. The community driven "add a tag" function allows users to suggest appropriate taxonomies for individual items. Mood-boards allow students to collect, save, and share items into groups depending on assignments or class, for example.
Process
Ideation
Several concepts, including an interactive table and a tour companion app were considered. While all of the options provided digital access points to the physical archive, the primary group in the target audience, undergraduate design majors, indicated in surveys that an online archive accessible from the same platform in which they were writing research papers and designing would be the most useful. Thus an application suited primarily for large format as well as mobile devices was created.
Information Architecture
The userflow is divided into four tasks: logging in, exploring, searching, and saving search results.
Visual Style
There are two priorities of the visual style. The first is to create visual interest for a primarily college-aged audience that has advanced user skills in web applications. The second priority is to have a neutral brand that serves as a quiet backdrop and lets the colorful and varied imagery of the archive items take primary focus.
Typeface: Body and Headings, Labels and Button Text
Color Logo Exploration, Monochromatic Logo Exploration
Final Logo
The final logo features the letters GDA in a compact, connected form. The typeface used is historic and timeless Century Gothic. The letters can sit alone or nestled as a negative space inside a circular form. It is clear and legible in many sizes. An extended version uses Century Gothic Medium beside the logo form.
Color Scheme
The color scheme is mostly a monochromatic palette of white, gray, and black. Red serves as an accent color and was chosen for its frequent appearance in the modernist palettes of the archive items.
Live Demo