Experience Design

Student Project, 5 Weeks (2021)

  • My Role

  • Visual Design

  • Interface Design

  • Interaction Design

  • Prototyping

  • Motion Graphics

  • Research

  • Quality Control

  • The Team

  • Corrina Tang

  • Eliza Lim

  • Ola Sukour

  • Outcomes

  • Website Redesign

  • Interface Prototype

  • Final Grade: A

  • Tools

  • Figma

  • Protopie

  • After Effects

  • Zoom

  • Discord

  • Slack

  • Notion

  • Google Drive

  • Keynote

  • Miro

MIT Press project in a MacBook mockup

Context

The Project

For a senior user experience design course, my teammates and I analyzed the current experience when engaging with The MIT Press as a brand. We proposed a collaborative reading experience via a website redesign and a new eReader interface to encourage deeper exploration and the unpacking of complex ideas.

I primarily designed and prototyped the eReader interface, however I was also responsible for the project’s visual design, graphic design (weekly slide decks), motion graphics, quality control, and research.

The MIT Press

An established institution and one of the largest university presses in the world, The MIT Press is a leader in publishing books and journals at the intersection of science, technology, art, social science, and design.

The Press values provocative and transformative work, publishing leading professionals to advance knowledge in challenging and ground-breaking ideas, and to recognize new interdisciplinary fields. They are also committed to accessibility and equity, distributing knowledge and research as broadly as possible—they are increasingly adopting an Open Access1 A model of scholarly communication that aims to greatly improve the accessibility of scholarly research and books. Open access publications are digital, online, free of charge, and free of most copyright and licensing restrictions (Canadian Association of Research Libraries).  model and their publishers translate academic and research content for non-specialist readers.

Research

The MIT Press has built an extensive network of platforms involving various microsites and interfaces. To understand how readers and stakeholders engage with this content, we conducted surveys and interviews with over 70 participants2 Participants were aged 18-64 years old and involved professors, industry professionals, PhD students, university librarians, and bookstore managers. .

Some Key Insights

Value in eBooks3 A book composed in or converted to digital format for display on a computer screen or handheld device (Merriam-Webster).

eBooks are efficient and convenient. The Press releases new titles for Open Access but many readers are unaware.

Reviews and Referrals

Readers rely on reviews and word of mouth when deciding to purchase a book.

Discussions Online (Entrypoints)

Industry professionals use Slack, LinkedIn, and Twitter as channels for sharing and discussing books.

Lack of Engagement

Very few readers discover or interact with the Press’ online channels and platforms.

We also identified 3 main user groups

01

Casual Readers

Those who know nothing about MIT Press and do not read books often, but read short form articles.

02

Avid Readers

Those who often read nonfiction books and enjoy learning more about interdisciplinary topics within their field.

03

Academic Readers

Those who look to books as a way to further their understanding of their academic field or to teach others (typically educators).

Frame

The Opportunity

We saw a space to create community and dialogue amongst interdisciplinary thinkers and leaders, specifically through accessible dialogue because the Press is focused on publishing progressive topics and creating resources for a wide variety of non-specialist readers.

In terms of The MIT Press

How might we support The MIT Press’ goals of creating dialogue around progressive and interdisciplinary topics?

In terms of readers

How might we create an accessible and engaging book discovery experience for academic and non-academic readers?

We further defined the scope to focus on trade4 A book intended for general readership. eBooks and the customer segment of avid readers—specifically industry professionals working in STEAM5 An acronym representing the fields of science, technology, engineering, the arts, and mathematics.  related fields, who regularly read nonfiction books related to their industries.

Persona: An Avid Reader

Content produced by Corrina Tang, Designed by myself

Problem Space

Upon analyzing the current experience when discovering and engaging with eBooks on The MIT Press Direct6 A platform to access over 3000 MIT Press eBooks and subject-specific collections, with approximately 150 added each year. Readers can print and download PDFs by chapter.  website, we concluded that the experience is scattered and cut short. The Press does not leverage their pre-existing content to create a guided experience for their audiences.

Book Details

Details (especially Open Access) and sharing options are difficult to discover, creating cognitive overhead7 How many logical connections or jumps your brain has to make in order to understand or contextualize the thing you’re looking at (David Damaree) .

Open Access

To gain access to book contents, guests must redirect to the MIT Press Direct site.

There is a lack of accessibility when actually reading Open Access books, readers must download each chapter individually and read them as PDF files.

Screen Recording

Accessing Book contents on the MIT Press and MIT Press Direct Websites

The Proposal

A Collaborative Reading Experience

Leveraging existing eBook-related resources, we proposed a redesign and extension of The MIT Press Direct platform to create a community space for readers to engage in dialogue around The MIT Press publications.

This proposal intervenes at three different stages in the reader’s journey.

Explore - Book Overview Page

The focus of the redesign was to reduce cognitive overhead and feature Open Access.

Creating Awareness: Accessibility + Community

A CTA9 A piece of content intended to induce a viewer, reader, or listener to perform a specific act, typically taking the form of an instruction or directive (Oxford Languages).  banner creates awareness of community features and prompts readers to Open Access. The animated GIF10 10 Graphic Interchange Format: A type of computer file that contains a still or moving image—A GIF may contain more than one frame, so it can be animated (Cambridge Dictionary).  illustrates the value these features deliver.

Approachable Content: Centralizing Existing Content

The book overview content is now organized and presented in a more digestible and approachable manner. Keywords allow for scannability.

Motion Graphics, Graphic Design, Interaction Design, and Prototyping executed by myself.

Content Strategy, Visual Design, and Copywriting executed by Eliza Lim

Community + Dialogue - Member Dashboard

The focus of the dashboard was to foster conversation and community, and to provide a centralized location for all reading-related activities.

Personalized Recommendations

Readers are presented with the most up-to-date titles, as well as curated events and resources relevant to the books they are currently reading. This supports guests beyond just the reading experience and prompts further exploration and discovery.

Engaging in Dialogue: A Shared Experience

Readers can now create and join groups directly through The MIT Press Direct, similar to collaborative functions on Google Drive or Slack. Teams can read Open Access titles together and start discussions through their shared annotations and comments.

Graphic Design executed by myself.

Visual design, content strategy, and interaction design executed by Ola Sukour. Copywriting and content strategy executed by Corrina Tang and Eliza Lim

Reading + Reflections - eReader Experience (New Feature)

The focus of the in-broswer eReader was to provide an accessible and streamlined interface to read, reflect, and stay engaged with communities.

Although I was involved in all aspects of the project, I was primarily responsible for curating and executing this eReader experience. I designed and prototyped the interface, supported by research that I conducted both individually and with my team. I also wrote 90% of the UI and UX copy.

Documentation: Easy Access

The collapsible menu stores all annotations and comments made by readers and their teammates.

Space to Reflect: Guiding Questions

Throughout the experience, readers are presented with guiding questions curated by the publisher(s) and the author(s). These questions are intended to help unpack the complexity of the content being read and encourage personal reflection, as well as challenge the reader’s ways of thinking.

Sharing Options: Social Media

Readers can choose to share quotes from the book directly from the eReader to social media platforms. A custom MIT-branded image is generated and appears consistent across all social media platforms.

We found that many readers—specifically industry professionals—are discovering, sharing, and discussing books on platforms such as Twitter and LinkedIn. However, it is currently only possible to share book overview pages from The MIT Press site.

Twitter

LinkedIn

Value Proposition

The MIT Press

The site refresh and new eReader interface encourages deeper exploration paths and extended engagement with The MIT Press Direct. They also create community and dialogue around The Press’ publications and content.

Readers

The proposed interventions also reduce cognitive overhead for those visiting the site as book details are approachable and conveniently digestible, with Open Access being featured. Readers are also supported when unpacking complex and new ideas.

The books did not always have the answers, but they always fostered a good conversation. Sometimes we applied the things we learned directly, sometimes we adjusted to our culture and other times what we read simply reinforced what we were already doing.

Dmitry Koltunov (Co-founder and the CTO of ALICe—a software development company, 2020)

Looking at how industry professionals currently engage with books can support that our intervention aligns with their goals of learning about new topics, discussing with colleagues, and applying what they learn into the workplace.

Project Summary

Research

The Press publishes progressive topics for non-specialist readers.

There is a lack of awareness surrounding Open Access.

eBooks are efficient and convenient.

Industry professionals engage in discussions around books on platforms such as Slack and LinkedIn.

Frame

How might we support The MIT Press’ goals of creating dialogue around progressive and interdisciplinary topics?

How might we create an accessible and engaging book discovery experience for academic and non-academic readers?

Customer segment: avid readers—specifically industry professionals working in STEAM related fields who regularly read nonfiction books related to their industries.

Proposal

A collaborative reading experience: A redesign and extension of The MIT Press Direct platform to create a community space for readers to engage in dialogue around The MIT Press publications.

The Proposal

Explore - Book Overview Page (Redesign): reduces cognitive overhead and features Open Access

Community + Dialogue - Member Dashboard (New Feature): fosters conversation and community, and provides a centralized location for all reading-related activities

Reading + Reflections - eReader Experience (New Feature): provides an accessible and streamlined interface to read, reflect, and stay engaged with communities

Reflection

Personal Goals

Going into this project, I intended to refine my visual design and prototyping skills. I took responsibility for these roles within the team and now feel more confident with my abilities.

Research, content strategy, and copywriting have always been some of my weaker skills. Throughout the project I worked with my teammates who are stronger in these areas to learn from them and actively improve on my own skills.

Team Dynamic

A major goal within our team was to focus on a healthy work-life balance and to create an honest environment. We also intended for this project to be a space for learning and growing.

At the end of each week, we did reflections and check-ins as a team. This prompted open conversations and held each of us accountable for our personal goals.

Challenges

The MIT Press is quite a large client with an extensive network of platforms. This made it difficult for us to define an opportunity and problem space, however through our research we were able to identify a user group of interest (industry professionals) which informed our frame.

Another major challenge was working completely remotely. To combat this, we utilized tools such as Notion, Zoom, Discord, and Google Drive for time and file management.

Moving Forward

If we had more time to execute the project, we would conduct more user testing to optimize the UI and understand if/how our intervention improves upon the current experience. We would also like to polish the UI and UX copywriting.