The Concept
Our Streets, Our Stories is an ongoing oral history project run by the Brooklyn Public Library. The program aims to collect the personal stories of community residents throughout Brooklyn neighborhoods through recorded interviews.
As an Our Streets, Our Stories volunteer responsible for conducting interviews, I initially set out to design a web-based solution for making the audio recording process easier for volunteers such as myself. As I started the design process, I considered the following three objectives:
- Create an easier way to record and upload audio content and associated digital media, such as family photographs, from volunteers’ own mobile devices.
- Improve site visitors’ access to the program’s rich trove of digital content by designing a new website with enhanced searching, browsing and discoverability.
- Create a platform other libraries and organizations can use for oral history projects in their own communities.
Understanding Users
Three personas: A volunteer persona, a site visitor persona, and a librarian/administrator persona.
My first task was to understand the site’s likely users. I determined three probable categories of users: 1) volunteers responsible for recording interviews; 2) site visitors interested in accessing the program’s digital content; and 3) librarians and administrators.
I conducted user research in the form of an interview and a questionnaire and drew from my own experience as a volunteer to create personas.
Key insights at this stage:
- My likely visitors have entirely different goals in visiting the site.
- Users’ age range varies widely, from 20-something to retirement age and beyond.
- Given the above, and to make the project feasible, I decided at this point to focus design efforts on the volunteer experience only.
Refining the Concept
Next deliverables: Diagramming the volunteer experience with an experience map and a flow diagram.
Next, I created a series of deliverables to map out the volunteer experience in using the site. My experience map diagrammed the volunteer journey at a high level; a flow diagram defined a specific set of tasks and accompanying decision points I thought users would follow; and a storyboard told the volunteer’s story in the form of hand-drawn comic panels. At this stage, I also started sketching concepts for the site’s screens across desktop and mobile in the form of paper prototypes.
Key insights at this stage:
- In my initial sketches, I leaned towards creating a structured, stepped experience to guide volunteers through the interview process. The screens resembled a checkout wizard, with explicitly numbered and sequenced steps.
- My early user testers felt the number of steps or screens in my paper prototype didn’t reflect the actual complexity of the tasks at hand. I realized I needed to simplify, both in terms of the task complexity and the terminology I was experimenting with.
Further Refining the Concept
My final high fidelity digital prototypes: mobile version on the left, desktop version on the right.
In this stage, I created a first set of digital wireframes; went back to the drawing board to sketch additional paper prototypes; and further refined and finalized my wireframes to create a high-fidelity digital prototype. I also created a visual design scheme for the site by designing a site logo, creating page layouts, and choosing fonts and colors for text and navigation elements.
Key insights at this stage:
- As I moved from paper sketches to digital, I decided my initial “checkout wizard” approach was too overly structured. After some iterating, I eventually switched to a “content studio” metaphor to give volunteers freedom to go out of sequence while conducting interviews (while still providing structure to the experience as well as a recommended sequence).
- I realized I had to design both a public facing “front” to the site as well as a password-protected “back” side. I came up with a name for the password-protected area: Recording Studio. And I created a logo and distinct design scheme for it as well.
- I considered how layouts and navigation should differ across the site’s desktop and mobile versions. For example, the desktop version has a top navigation bar with buttons, while in the mobile version, the navigation is condensed into a hamburger menu. I used lightbox effects in the desktop version to focus attention on the smaller dialog windows but this wasn’t necessary in the mobile.
Final high fidelity prototypes:
Desktop version:
https://www.justinmind.com/usernote/tests/20175004/20178596/20178598/index.html
Mobile version:
https://www.justinmind.com/usernote/tests/20175004/20178596/20179150/index.html