JSTOR is a digital library for scholars, researchers, and students with a mission of making the world a more educated place. Their research and teaching platform provides access to more than 12 million academic journal articles, books, and primary sources contributed by over 900 publishers in 75 disciplines. The platform receives over 72 million visitors and 663 million page views from over 10,000 institutions.
But JSTOR is not merely an aggregator of curated journal backfiles. It has expanded beyond this historical business to include multiple product lines. JSTOR is also part of ITHAKA, a not-for-profit organization that also includes Ithaka S+R and Portico. ITHAKA also provides services for Artstor. So it’s easy to see how their digital assets could eventually swell to a point where they lacked a consistency of design and user experience.
“The platform is a Frankenstein mess of programs that have been bolted together and don’t make a lot of sense.”
JSTOR engaged Fresh Tilled Soil in a project to find a way to reimagine the user experience and visual design of their entire digital library. They were in need of a design system that would enable them to continue their growth using a common design language and consistent aesthetic with reusable components.
This project was about more than just designing something that was simple and easy to use. The design also had to account for the fact that millions of users worldwide were accessing JSTOR digital libraries using different types of devices with limitless configurations, form factors, and connectivity. So the design would need to be very light and quick to load. The final design would also have to meet AAA accessibility standards using system fonts and colors that were readily available and consumable by all users.
When you have multiple teams working on their own, inconsistency just happens — and your customers’ experience suffers.
JSTOR was eager to take a blank slate approach and wanted to hear our fresh ideas on how to:
- Increase user satisfaction and ease of use
- Develop an IA framework that enabled greater usability and user engagement across all digital properties
- Integrate with their users’ existing workstreams (e.g., Dropbox, Google Drive, social media, and similar)
- Increase new user subscriptions
- Develop a set of tools that would guide design beyond our engagement
The JSTOR team was large, cross-functional, and distributed across multiple locations. This is why a design system that united the team around a common visual language would be a focus of the project.
The JSTOR team wanted to “ship quickly” while being mindful of their millions of existing users and the need to explore “lean” ways to test. To accomplish this, Fresh Tilled Soil set up a very detailed project plan that included weekly “sprints” during which we would design, test, and deliver incremental changes to the platform. This detailed project plan would turn out to be a key to ensuring that the entire team remained on track and that goals and KPIs were targeted and met.
We all gathered in JSTOR’s Ann Arbor, MI, office to kick off the project, review the project plan, and align around definitions of success.
The JSTOR team provided some existing research and background materials including initial persona research, mood boards, and an earlier platform experience map. This allowed us to ramp up to speed and quickly establish our working relationship.
Content Zone Diagrams
We got right to work creating an initial wireframe of every core page in order to have a base wireframe set to work from for the remainder of the engagement. These zone diagrams were not intended to be for user testing — that would come later in the project.
Initial Wireframes and User Flows
Fresh Tilled Soil delivered a series of wireframes for different pages, a revised IA, and user flows for user testing.
Question 1: Where would you go to check your number of available downloads?
The initial wireframes and results from user testing allowed us to refine the flows and create high-fidelity wireframes for key templates and clickable prototypes for further testing
Visual Design and Style Guide
After validating user flows and page layouts, we turned our attention to refining the look, feel, and identity of the new JSTOR digital library. The visual design would need to be clean, very easy to use, and perform well under any physical or digital constraints.
Ultimately, the JSTOR digital library provides search engine functionality for curated collections and content. So the challenge was to make a search engine that was interesting when you are working primarily with words and text rather than images. The layout would need to allow the user to focus on, read, and absorb the results with near-zero cognitive load. while being able to easily find what they were looking for. The design would need to include the navigational elements and components that allow users to focus on the content and results then be able to modify and take action on those results.
Fresh Tilled Soil delivered a style guide that included a set of tools to guide the product design beyond our engagement. The guide would serve as a visual vocabulary for jstor.org, marketing sites, support sites, and even other ITHAKA brands.
Font, contrast, letter sizing, and colors were also chosen for their universal availability and to remain in compliance with AAA accessibility guidelines.
Here are five of the fully-styled representative pages.
JSTOR has rolled out additional pages and functionality since our project wrapped up. Each time they’ve used the design system to stay within the confines of their core product design. By reusing the components of the design system, they’ve been able to extend a consistent design and user experience to other pages within the JSTOR digital library.
Detailed project plans to the rescue
This project included a lot of distributed members on both teams. Key to keeping everyone moving forward together with speed and coordination was a detailed, deep, shared project plan. The shared project plan was updated daily, and we would find 5–10 team members in this working doc at all times. The project plan also helped capture and consolidate in-person and/or virtual conversations within a single shared resource.
Knowing when to use an entire framework or just tools
Design Sprints are a proven, time-boxed method for overcoming design and product roadblocks. Organizations at every stage and size have demonstrated success with this process, but it’s important to know when they are appropriate and when they may not be the best approach for a particular project.
In hindsight, the challenge this project was addressing wasn’t in need of the full Design Sprint framework. This project involved “small d” design. The problem was clear. There weren’t a lot of unknowns. Nevertheless, that’s where we started. Fortunately, the team realized this early, quickly pivoted, and began conducting strategy activities that moved the project forward with speed.
We like to think of a Design Sprint like a superhero’s utility belt. Sometimes you need all the tools in the belt, and sometimes just one or two will do. We created an infographic to help you decide whether a Design Sprint might be appropriate for your challenge and how to decide.
“FTS has worked with focus, drive and energy and your team’s dedication has helped us do some needed thinking around what we want to accomplish. Thanks for the guidance and hard work!” — Clare Zonsu, Director of UX
“I appreciate all the preparation and hard work, and every team member brought great energy, empathy, and skill.” — Perry Hewitt, VP, Marketing