RETROSPECTIVE: Bag and Board

UX Design Challenge

Elana Nachshin
5 min readDec 16, 2015

Project one for General Assembly’s UXDI program: research, design and construct an interactive rapid prototype of a digital media player.

Initial Inspiration

Comic books — Or rather, comic book fans. Although admittedly I am not a comic book reader, many of those closest to me are. I have shared close quarters with enough comic heads (and their protective-sleeve-clad stacks) to understand the basics: true devotees amass hundreds of issues and go to great lengths to protect their volumes from damage. Enthusiasts also glean intense enjoyment from both reading and collecting comics. Although I knew I needed to conduct more research to better understand my users and their respective market, this perceived combination of entertainment and archival needs served as the perfect inspiration for my innovative digital media player.

a personal comic collection.

Thus, my initial goal for project was to research and design an interactive prototype of a digital comic reader

Research

User Interviews

skype user interview
one-on-one user interview

In order to properly identify my target users, and understand their pains, pleasures and behaviors I conducted 7 initial user interviews. All 7 subjects had some knowledge of comic books and were between the ages of 20 and 32. The questions were intended to assess the users’ personal history with respect to comic books and their current comic consumption. Additionally, interviews were conducted in three methods: one-on-one, skype and group interviews.

user interview question template

Contextual Inquiry & Task Analysis

When applicable, subjects who were familiar with or who were frequent users of digital comic readers were asked to participate in both contextual inquiry and task analysis. As a means of further investigating how users interact with the current technology and gauging their level of satisfaction.

“Can you show me how you manage your subscriptions?”

user participating in contextual inquiry

My ultimate goal: to determine what the user was trying to accomplish.

Competitive analysis

After identifying the competitive technologies (and understanding the behaviors that characterize the users’ interactions with that tech), I spent time investigated the features and common pain points of the current technology. This process involved both personal investigation and locating user reviews online.

Data Synthesis

progression of data synthesis

“I’m anal about my comics. I would never bring them on the subway.”

“I buy my comics on Wednesday, the second they go live on each ap.”

“I think It would be nice if there were a way to synthesize the events of my local comic community.”

Ideation & Affinity Mapping

First I inscribed Post-It Notes with behaviors, pains, appreciations, quotes etc. and organized in order to identify patterns and key points within data. Subsequently, I used affinity mapping to arrive at a concise problem statement.

Problem Statement:

Through synthesizing my data, I learned that a common problem among the users that I interviewed is that they have to download a separate app per publisher in order to read and store their digital comic collections.

the problem: 1 comic head, 8 apps

Design Goals:

Bag and Board is an efficient, all-inclusive tablet app that allows users to “compile, customize and consume” their entire comic collection. Features include a customizable bookshelf, store, search engine, and social navigation. The design is intended to allow users to purchase, store and read all comic books and graphic novels regardless of the specific publisher within one. Additionally Bag and Board is designed for both the experienced user and the novice.

Questions I asked myself: How knowledgeable is my average user? What feature is the experienced user looking for? What features is the inexperienced user looking for? What is the user’s task? How can I expedite that is my design?

Prototyping: Iterate, test, repeat

Iteration 1- Sketching

The design for the first iteration of Bag and Board was a series of low fidelity sketches. The intention of this initial phase was to visually problem solve for the following deliverables:

  • Determine the global functions
  • Place the user-preferred features identified through competitive analysis (guided view, smart lists, barcode scanner)
  • Balance between user specific info (profile picture, tags etc.), smart lists and ad space on the home page
  • Begin determining what interfaces are needed, what each interface needs to do and how the user should move between the interfaces

Iteration 1- Paper Prototype

The sketches from the first iteration were converted into a paper prototype and testing was conducted with 4 users. This process afforded me to determine the users’ preferred global functions, placement of competitive features, and layout of the various screens. Additionally, I also recognized that users would need popup instructions when initiating their first interaction with the bookshelf.

Iteration 2- Functional Prototype

After revising and refining the specifics of Bag and Board’s paper prototype, I used the Marvel prototyping App to create a high fidelity, functional prototype. The functional prototype focused on establishing the architecture of the book shelf, installation process and global functions.

User testing was then conducted with a participant pool of 6, including 4 of the original participants.

Curious about Bag and Board?Check out my (first) functional prototype!

Next Steps

Given more than three and a half days and possibly a budget, the Bag and Board media app has the potential to truly rock the world of digital e-readers. Although the focus of this iteration were the archival and shopping functions, future ideation may seek to pursue the app’s social capacity. The ultimate hope of this designer is to establish the Spotify of comics. Allowing comic heads a single platform to purchase, organize and share their collections, while easily locating information on conventions, trends and gatherings.

--

--