DISCOVERY PHASE
Kickstarting my efforts with an on-site contextual inquiry (field study), I visited the shop in an effort to establish a workable content inventory. The site received similar analysis in the form of a heuristic evaluation.
Then, working to investigate the problem space holistically, I conducted competitive research—surveying eight rival retailers—so as to delineate a strategic design direction and eventually, a primary persona.
Calling Golden Age Collectables a comic shop is a bit like calling Nordstrom a shoe store. In reality, it's somewhat of a different beast, with books and comics combining to make up only a fraction (~25%) of their brick & mortar inventory.
Instead, imagine if Comic-Con came to life, only to be squeezed down into a retail space the size of an airport Brookstone.
As the pie chart makes clear, GAC stocks an impressive variety of genre memorabilia. Yet patrons weren't always thrilled by its chaotic merchandising, or its claustrophobic, subterranean environs.
EXPLORING THE INVENTORY
HEURISTIC EVALUATION & USABILITY TESTING
Following a prototypical review of the existing Golden Age website, it soon became apparent exactly how much work would need to be done just to create the appearance of an operational business.
In essence, I'd be starting from scratch. The site's interface proved so outdated as to challenge Nielsen Norman’s standard criteria.
On the whole, the largest issues concerned navigation, with a barely perceptible global nav providing access to only a portion of the site's most essential pages.
Clicking "Site Map" didn't actually reveal the sitemap, but it did open up pathways to a number of useful resources, including a contact page, directions to the store, and an FAQ.
Meanwhile, the site's visual design would alternate frequently between painfully spartan HTML and a slovenly mess of antiquated gifs, social media widgets, and trademarked characters. "No infringement is intended," states the footer, alongside the obligatory
"All rights reserved."
Interface and flow were analyzed in regards to the following criteria sourced from Usability Engineering:
-
Visibility (communication of system status)
-
Mapping (efficacy of language/metaphor)
-
Freedom (fluidity of system states)
-
Consistency (homogeneity of elements)
-
Recognition (burden of cognitive load)
-
Flexibility (efficiency/fluidity of use)
-
Minimalism (relevancy of content)
-
Error Prevention (agency of user pre-error)
-
Error Recovery (agency of user post-error)
-
Help (quality of guidance/documentation)
OUTDATED APPEARANCE
Despite social media widgets, the site appeared to be more than fifteen years old, making it unclear to new visitors if the shop was even still in business.
ENIGMATIC
ARCHITECTURE
The site’s navigation and layout proved to be taxingly inefficient and unintuitive, with important links often hidden in small print, footer menus, or tertiary subpages.
CRUDE CONTENT STRATEGY
Obscure copy references, unintelligble organization, and blatant copyright infringement allowed GAC content strategy to become sloppy & unprofessional.
OUTSOURCED INTEGRATIONS
Useful resources, including the store’s new arrivals, preview, and newsletter sign-up components were contracted to ill-fitting, often amateurish third party providers.
USABILITY FINDINGS
In the interest of informed design, I completed feature audits and competitive analyses of eight relevant companies—four local, independent comic shops, a record store, two national brands, and a wildly successful pop culture purveyor based out of Boston.
Appraisal revolved around core business and usability concerns, including value proposition, branding, visual design, site features, information architecture, e-commerce, site navigation, content strategy, and ease of use.
At left, Online vs. in-store shopping preferences of consumers in the United States as of February 2017, by product category. Data courtesy of Statista.
Note that Golden Age product staples like books, games, and entertainment rank highest overall for digital purchase preference, with books at a high of 62%.
The biggest takeaways were obvious: A digital storefront wouldn't appeal to many outside of the shop's greater Seattle demographic. However, local rivals hadn't gone digital either, providing Golden Age with the opportunity to pull ahead, perhaps even going on to become the homegrown
Newbury Comics of Puget Sound.
Additionally, GAC could tap another opportunity, potentially converting tourists with its veteran, "America's Oldest" value prop. Success would be entirely contingent on a strong content strategy.
COMPETITIVE
ANALYSIS
DEALERS ARE GOING DIGITAL
Research found that patrons increasingly purchase content in digital form, while big corporations like ThinkGeek stock thousands of franchise staples online, all easily searchable and instantly shippable.
DESPERATION FUELS CHANGE
Comics haven't paid the rent for a while now, forcing indie outfits to extend into analogous product spaces, including books, clothing, games, toys, accessories, and more. With the right focus, it can actually work.
TRENDS ENSURE SURVIVAL
Successful "geek boutiques" like Boston's Newbury Comics remain profitable through a combination of tastemaker curation and experimental product offerings. Missing the zeitgeist could break their businesses.
Design direction emerged from this extensive probe, underscoring the need for an Amazon-proof customer experience, perhaps aided by tastemaker brand development, bespoke or exclusive products, expert curation, or renewed focus on imports and rarities.
PLANNING & VISION PHASE
After selecting a persona from a group of three promising candidates, I leveraged insights drawn from my design research in drafting a series of actionable goals that would define subsequent efforts.
I eagerly began concept development, but stopped as the complexity of the site's information architecture became apparent. Luckily for me, the facilitation of user-driven card sort exercises provided essential clarity.
Daniella
Representative of GAC's least culturally and technologically-savvy patrons, Daniella, 63, is both a doting grandmother and a hard-working HR manager.
Preferring to shop local, she often takes advantage of the store's excellent selection and knowledgeable staff when purchasing gifts for her teenage grandson.
Appreciative of the longstanding stop, but overwhelmed by tourist crowds and endless product inventory, Daniella could benefit from an online alternative.
Laura
Representative of GAC's potential direction given updated content and branding, Laura, 39, is a retro-chic trendsetter, talented copy- writer, and visiting East coast native.
Interested in all things unique, bespoke, and vintage, Laura found Golden Age listed on her favorite travel blog, and quickly fell in love with the shop's old-school charm.
Impressed with the store's catalogue of rarities, Laura might work to evangelize the brand back home. An online store could help maintain her patronage from afar.
John
Representative of GAC's existing home- grown customer base, John, 38, is a cost-conscious art instructor, Seattle native, and loving single father to a young girl.
Always looking for things to do with his daughter, but equally invested in narrative media, John obsesses over "cool-factor," and loves browsing when he's in town.
Priced out into the suburbs with a public school salary, John can't frequent the shop as often as he'd like. But a curated digital solution could help him bridge the gap.
INTRODUCING THE PERSONAS
Golden Age's physical location catered to an array of diverse demographics, and there was always the possibility that an online store might attract additional users outside of this existing base. Choosing a primary direction proved challenging, thus pushing me to leverage market research in an attempt to define the most judicious path forward.
NARROWING THE FIELD
Daniella came across as an ideal design target, with pain points easily assuaged by affordances made to the online storefront. While I couldn't necessarily replicate the personable customer service associated with the shop's brick & mortar staff, I could design the experience to feel personable.
Together, helpful categorizations, streamlined search options, and a highly organized product inventory could ease the process of locating a specific item. Likewise, a highly editorial content strategy, including gift guides, staff picks, and other curations, could mimic the role of in-store service. Needless to say, crowds wouldn't be an issue either.
Unfortunately, Laura also seemed to be a promising persona, especially given how her selective and materialistic tastes aligned with my own research findings. Her interests proved unexpectedly millennial given her age, while her focused love of vintage would allow Golden Age to continue to hone its value proposition as a specialty merchant.
With an expanded reserve of imports, collector's items, and other hard to find items, I knew the shop's identity could evolve from its existing reputation as a veteran purveyor. Adding in social media marketing, expressive brand messaging, and responsive mobile web could position GAC to successfully expand into the online market.
Ultimately, and in spite of these excellent tertiary personas, I chose John as my primary design target. His predilection for entertainment media was perfectly suited to the Golden Age business model, while his unique context provided pain points that were feasibly reconciled with a well-designed digital storefront.
John's location and income, tastemaker aspirations, and desire to share interests with his young daughter created a strong profile that inspired both empathy and innovation. But most importantly, as a prototypical patron with established struggles, John was a safer bet for what I considered to be a speculative foray into online retail.
Daniella and Laura were worth considering as well, but they didn't quite fit the mold. Given her genre illiteracy and specialized needs, designing for Daniella would create an experience unsuited to the diehard fans composing the shop's core demographic. Similarly, targeting Laura would realistically be too risky a pivot for a mom & pop outfit.
For all, costly development proved prohibitive. Drafting consummate social media campaigns, editorial content, and brand messaging would be too much for the small shop to take on. Even forgetting finances, neither persona fit more than a handful of use cases. Their needs just weren't common or impactful enough to cater to.
PRIMARY PERSONA:
John Samson
"I need something that we can do together."
Overview
-
38, Art Instructor at Stevens Elementary
-
cost-conscious, escapist, and critical
-
tech-savvy and design-minded
-
values quality, exclusivity, and “cool factor”
Behaviors
-
teaches art curriculum at the middle school level
-
relaxes on the couch with Xbox games and Netflix
-
plans activities that he can share in with his daughter
-
budgets a schoolteacher’s income as a single parent
Pain Points
-
time wasted driving downtown to frequent the shop
-
lack of sufficient product details and store policy info.
-
inability to locate new additions to inventory
-
stress associated with buying from unfamiliar brands
-
surprise charges, such as expensive return shipping
With both business realities and user needs now established and internalized, I felt prepared to begin ideation. But before putting pen to paper, I created a list of objectives for the site, keeping newfound insights at the forefront of my thinking:
-
Effortless Product Discovery
Personas like John and Daniella struggled to find specific items, whether they were new arrivals or holiday gifts. Designating efficient, logical product categories would go a long way, as would intuitive search tools, user-tested navigation and standardized information architecture.
-
Data-Driven Merchandising
Competitive research had emphasized the need to keep a finger on the (cultural) pulse. Promoting fan-favorite franchises and trending products through prominent, centralized, placement could both entice impulse buyers and engage casual shoppers alike.
-
Transparant Communications
John's budget doesn't allow for surprises, and he likes to know exactly what he's getting before moving to checkout. Common ambiguities could be eliminated with extensive product details, user and/or professional reviews, upfront store policy information, and a sitewide FAQ page.
-
Focused Content & Curation
John likes to see new releases, while both Laura and Daniella would want site content tailored to their personal tastes. Golden Age is too small to be a one-stop shop, but the site could emphasize its differentiators with dedicated departments for items like imports and rarities.
CONCEPT DEVELOPMENT
DESIGN GOALS
At this point, I really did believe I was ready to begin ideation with sketches and wireframess. However, the first goal on the above list, Effortless Product Discovery, proved an order of magnitude more challenging that I'd expected. Golden Age was no ordinary commerce project. Selling hundreds of items in dozens of primary, secondary, and tertiary categories, the shop was a minimalist's nightmare.
Online, these products would need to be filtered and sorted in any number of ways, including by genre, medium, price, rating, release date, department, and so much more. As they say, the devil was in the details, and nuances proved exasperating. A few examples:
-
Should cosplay gear be grouped with clothing, with collector's items, or on its own?
-
Did cheaply made accessories like lanyards and sunglasses count as clothing?
-
Was superhero a genre in itself, or should titles be grouped within their respective genres?
-
If a character or series spanned time and media, how should it be categorized?
-
Would animation stand as its own category, or would it be sorted with TV or film?
-
How specific should categories be in accounting for sub-genres?
-
Which sub-genres were significant enough to stand on their own?
These questions weren't easily answered, and they never would be. Thus, my best chance at creating an effortless discovery process (i.e. a taxonomy for product inventory), would be to ask the users themselves. It didn't matter so much what was correct as what was expected.
Working off of a content inventory compiled via contextual inquiry and online research, I facilitated card sorting exercises to help build an understanding of customer mental models surrounding fan service memorabilia.
Placing specific product names and categorizations on Post-It notes, I asked participants to logically group the items, recording the results.
Then, extrapolating organizational schemas found in competitor research, I supervised a closed sort where more amorphous umbrella categorizations remained fixed, but individual products and subcategories did not.
Gathering the subsequent data, I was able to construct rational and intuitive content organization, ultimately serving the site's information architecture with evidence-based design.
ENTER THE CARD SORTS
DEVELOPMENT PHASE
Moving into more formal design efforts, I sketched solutions addressing John's needs and pain points. After establishing hierarchy with a sitemap, I then digitized my best concepts in Sketch as low-fidelity wireframes.
Building out my designs into a fully interactive prototype, I subsequently created use case scenarios and a testing script, engaging participants in usability testing with think-aloud and task-based protocol.
COMPULSIVE DESIGN HABITS
I'd always considered this project to be a challenge in interaction design, and consequently, I intentionally refrained from any efforts in visual design or branding. Yet, with so much experience in the latter, it worked a bit like muscle memory, and I came to detail my wires in minor ways. In digitizing the interface, I found myself reflexively styling the prototype with line weight, shape, and typography for a more organic, comic book feel.
BREAKING THE ICE
Talking points allowing me to build rapport and improvise as needed during testing.
-
personal introduction
-
"tell me a little bit about yourself"
-
occupation, hobbies, and interests
-
average internet and technology use
-
favorite/commonly used sites and apps
SETTING THE STAGE
Talking points allowing the participant to understand the study and their personal role.
-
introducing the study and its impact
-
no wrong answers (testing the site, not you)
-
think out loud (feelings, reactions, etc.)
-
honest feedback (no hurt feelings)
-
question and answer policy
-
think out loud practice on the landing page
-
gathering permissions
-
functional limitations of prototype
-
any remaining questions
TESTING THE SITE
Tasks allowing me to test the prototype by observing users as they work toward goals.
-
establishing context of use
-
task: locate character-specific clothing item
-
task: locate family-friendly board game
-
task: proceed to cart and purchase items
-
task: research store's holiday hours
POST-STUDY FOLLOW UP
Talking points facilitating the conclusion of the study, leaving the participant satisfied.
-
any additional feedback
-
any additional questions
-
thank yous and incentives
USABILITY STUDIES
Uploading the full set of wires to InVision, I built out an expansive interactive prototype comprised of over forty unique pages.
Preparing to fail fast in order to kickstart revisions, I then wrote out an interview script for the studies. But wanting to immerse users with task-based protocol, I outlined objectives based on use case scenarios established from the context of my primary persona John.
First and foremost, I wanted to validate architectural deliberations surrounding classifications and sorting. However, given my flexible approach to user flow, I was also interested in how the intended process flow would differ from the paths chosen by participants.
Testing occurred over the course of a single day, with five participants engaging the prototype as they attempted to locate specific items through navigation alone (despite building the pages for it, I barred use of the search bar in order to test the logic of my content organization and nav schema).
During testing, I promoted Think-Aloud protocol, taking notes on the process if users were uncomfortable being recorded. This greatly contributed to both the quality and quantity of feedback received.
SCRIPT OUTLINE
VISIBILITY OF SYSTEM STATUS
On the product detail page, above, users expressed concern that their actions weren't taking effect. A confirmation dialogue was added to reduce confusion and ensure adequate system feedback.
CONSISTENCY
& STANDARDS
A primary search bar in the global nav conflicted with a meta-search in
the filter/sort area. With users unsure which to use, or how it might affect their results, the meta search was removed, having proved redundant.
FLEXIBILITY & EFFICIENCY OF USE
In the checkout flow, users didn't like having to input an additional address, even if shipping and billing addresses were different. After looking into it, I was able to simplify the process by asking for the billing zip code alone.
AESTHETIC & MINIMALIST DESIGN
After clicking to the "Store Info" tab, a minority of users found the page's information design to be crowded, explaining that there was too much content. Condensing the FAQ section
with accordians created more space.
FINDINGS & ITERATION
With testing in the rearview, I'd found just four issues that would warrant revision. Luckily, none required major modifications to the interface, leaving me feeling both shocked and relieved that the concept site's first-ever usability studies had gone over so smoothly.