KUMARI PACHECO
Duration: Three weeks Tools: Figma, Slides, Premiere Scope: School project
Research, Storyboarding, User Flows, Wireframing, Prototyping, Storytelling & more
First steps
The Spectrum Seal is a badge system awarding nonfiction books that balance their bibliographies across race, gender, and other identities.
It was also my first "proper" UX design project.
My class was given the option to choose from three fictional briefs, including one called "The Balanced Book Badge" (which I later renamed). Having just switched majors from Writing & Literature, I jumped at the chance to design for the publishing industry—but found myself in the company of only one other student.
The design process
Reading through the project requirements, I understood why I was so alone. Two and a half weeks to quantify the gender/race/identity gap existing within the publishing industry, to create a "balanced" system worthy of being a solution.
But it was about diversity. And books! I had to give it a shot.
My process fell into three main stages: A) solving the problem, B) building the product, and C) telling the story. Throughout the various steps involved, I came to three realizations:
1) 🌟Fanciness🌟 kills design
2) Low-fidelity != low-ability
3) Self-control is a skill
The problem
References & representation
My first move was to squeeze every droplet of information I could from the project brief. In preparation for the persona I would later create, I color-coded everything by demographics (yellow), behaviors (pink), and needs/wants/goals (blue), as seen in the gallery above.
My design challenge: connect readers with "books that represent a broader community of expertise."
Persona, 09/30/20
The user(s?)
I was expected to accommodate two users: nonfiction buyers/readers (the primary user) and the authors themselves. I based my persona on the primary user, creating Alexa Hughes: a political science major with a love for nonfiction and a need for better representation in nonfiction references.
Research, diversity in publishing
In order to come up with a product to satisfy these needs, I went on a research frenzy. It encompassed the Amazon website and several articles discussing diversity in publishing.
This allowed me to feel out the "sides" and "ceiling" of the problem and take note of existing solutions—e.g., BBC's 50:50, GA Stamp of Approval, #ownvoices.
In my research notes, I grappled with three main questions:
1) In the blue: what is diversity? What identities am I missing?
2) In the red: how can this system incentivize authors to meet the source criteria?
3) In the black: how can this system keep authors honest with their intentions?
The authors had become my main focus. I did not create a second persona—and today, this is the first thing I'd do—but I did return to the brief, re-learning these "secondary" needs and goals.
With all of these things in mind, I created the final criteria defining which books could earn a Spectrum Seal:
Each of the five races and one ethnicity in the United States (African-American, White/Caucasian, Native American and Alaska Native, Asian, Pacific Islander, and Hispanic/Latino) is entitled to at least 5% and no more than 31% of book sources
The gender ratio for sources is 48/52, male/female + gender non-conforming
Due to privacy issues, LGBTQ+ and differently-abled sources are not enforced but highly encouraged
Footnotes and endnotes will be used not only to provide proper citation, but to reveal and discuss biases, cultural footprints, and significance to a broader scope of people
The product
2nd & 3rd order consequences
I modeled my 2nd and 3rd order consequences several days after my research phase. However, I'd been thinking about them obsessively since the start of this project. By agonizing over my decisions, I invited Analysis Paralysis into my process, stalling myself momentarily.
2nd and 3rd order consequences, 10/08/20
It's here that I received my first dose of "self-control." We were expected to keep these consequences as reference points for discussion and future iteration. Upon accepting this, I moved forward with my designs, determined to show what did work and to collect more data on what didn't.
Storyboarding the Spectrum Seal
My storyboards were a great help in this department as well. Storyboard 1 focused on the use of footnotes and endnotes, which—due to the scope of our final project deliverable—was ultimately left more to the imagination. Storyboard 2 focused on one of the aforementioned consequences: authors' inclination to "fill a quota rather than diversify their content."
My first attempt at Storyboard 2 became less of a storyboard and more of a script. After receiving feedback telling me as much, I took a second shot at it, replacing my words with images.
(First ever) user flows
This step wins the prize for "most iterated." I hadn't quite grasped user flows as a concept by the time I started, so I tried being fancy, straying from user flow conventions (see the 10/03/20 user flows).
I received feedback stressing the importance of this visual etiquette. After all, these types of models aren't created to be admired; they're created to be understood. It was my first dip into the idea that "fanciness kills design."
UI sketches, setting the stage
Through my user flows, I determined where and in what capacity The Spectrum Seal would appear on the Amazon Books website. Since it was a feature—as opposed to a website in and of itself—I had to design into preexisting UI.
In my first UI sketches, I focused on four main screens:
1) The Amazon Books homepage (with Spectrum Seal books on display)
2) A page devoted to Spectrum Seal books
3) The individual book page
4) The book review/score page
In addition, I defined two new elements, the Spectrum Score (a second customer-rating system specific to the quality of a book's research) and the Source Sheet (a spreadsheet of any Spectrum Seal book's sources, accessible to all by QR code).
Wireframes, setting the stage again
When it came to creating wireframes, I found myself struggling to keep up with the class. I jumped to a higher fidelity way too soon, replicating UI in excruitiating detail.
I'd wrongfully conflated fidelity with ability. I wanted my wireframes to be as polished as possible—not to get my point across, but to show my ability as a detail-oriented designer. The resulting labor convinced me to never again put myself in such a situation.
Prototypes, setting the stage a third time
Upon finishing the wireframes, I hit a different kind of road block. I needed to create a low-fidelity prototype next, but my current wireframes didn't quite flow together—like a story riddled with plot-holes. So, just as with fiction, I returned to the drawing board and filled them in.
My set of screens increased:
1) The Amazon Books homepage (with Spectrum Seal books on display)
2) An informational article about The Spectrum Seal
3) A hyperlink explaining The Spectrum Seal requirements
4) A hyperlink explaining the Spectrum Score
5) A page devoted to Spectrum Seal books (with an added filter)
6) The individual book page
7) A glimpse of the Source Sheet QR code
I strung them together into a Google Slides presentation. Using green as a call-to-action, I user-tested my low-fidelity prototype on a fellow classmate.
Click here for a link or watch the walk-through below:
Low-fidelity prototype, 10/13/20
My classmate gave me some excellent advice—specifically regarding the presentation of the Spectrum Score—which informed my final mid-fidelity prototype.
I restrained myself from tinkering with things any further—that is until several months later. In preparation for the 2021 CCA Scholarship Exhibition, I fixed up a few of the details and recorded a walkthrough of my mid-fidelity prototype. The space I had given myself back then allowed for an obvious and painless iterative process now.
Click here for a link or watch the walk-through below:
Mid-fidelity prototype, 01/09/21
The story
Purpose & performance
Months later, in another class, I returned to my persona in order to flesh out the narrative elements of this product and its performance with users. I tracked the journey of my persona, Alexa, through three arcs:
1) A concept story arc providing a birds-eye-view of The Spectrum Seal
2) An origin story arc describing Alexa's discovery of The Spectrum Seal
3) A usage story arc defining the steps Alexa took to use The Spectrum Seal
Spectrum Seal story arcs, 4/17/21
Eventually, I adapted the origin story arc into a product purpose story with Alexa at its center.
What I learned
Despite my nerves, I chose "The Balanced Book Badge" for my first UX design project. This leap of faith reaped amazing benefits.
Today, I know that—in heavy doses and at the wrong moments—fanciness can wreak havoc on the design process. I'm able to separate my practice from my ability, keeping to a certain fidelity for as long as it suits the work. Lastly, I have a good idea of what's too much, too fast, and when it's time to take a step back and reflect.
The Spectrum Seal opened the door on my new UX studies, setting the bar for projects to come. Often times, for a career-switcher like me, finding that way "in" is half the battle.
~