Physical Design for Digital Retail
for PowerHouse Arena
—
Responsive Web | Case Study | Two (2) Week Sprint, Fully Remote | 03/25/20
Figma | Sketch | Adobe Illustrator | Miro | Principle
In 2020, PowerHouse Arena, an independent bookstore in Brooklyn sought to reestablish their online presence. I was part of a small team responsible for a website redesign with a focus on defining the visual identity of PowerHouse, driving conversion and reducing lead times for page launches.
UX Challenge
Supporters of PowerHouse Arena want the process of making sure the book that she buys is the right one. Art and Design books have re-editions, abridged vs unabridged, etc. and it easily becomes tedious to have to search through different stores for unique publications. The actual sense of the book: it’s look and feel is lost over dimensionless jpegs.
The expansive interior of the PowerHouse Arena bookstore.
Approach
Our approach begins with learning about our user's behavior with online bookshops, their preferences, and their comfort zone.
Identify the functions that are being introduced through the website, to see if they already, and if they do, how it is currently being implemented.
To harmonize brand identity with the look and feel of the website (UI and interaction).
Identify user loyalty and engagement in the apps of our competitors.
Breaking down what PowerHouse Arena does well (and struggles with) alongside its competitors.
Research
Powerhouse stands out by providing a distinct voice through its curated content, while uniquely situated to sell a collection of limited edition, signed, and collectible books.
They consider themselves not just a bookstore, but a gallery space, an event space, and even a bar. They capture greater engagement with its local community than the average bookstore.
Affinity diagramming the results of user interviews.
Survey
To identify the issues with the existing site that may interrupt the user’s journey throughout their platform. This directly relates to the efficacy of the current platform, and ultimately, potential sales and exposure. Users will test the Powerhouse Arena website by picking a design book and purchasing it through the checkout process. We gained insight into how the peripherals' visual noise was preventing users from the opportunity for deeper engagement with content. The existing browsing process needs to be more fluid and direct for users to reach the product.
Journey mapping the experience of our main user- Zoey in search of an artist’s monograph.
Defining the Experience
We build upon an awareness that users are looking for a particular kind of book. We develop a User Journey map as a way to put our feet in the shoes of our users, and take time to pick apart with cognizance the actions of our users through their current book buying process, noting down the potential emotions felt along the way, thus captured potential opportunities to solve for them when we stumble upon pain points in their search for their next artist’s monograph.
Restructuring the information architecture of how the existing website categorizes different genres.
Getting to the good stuff sooner
As identified in our earlier heuristic analysis of the existing website, we found that users had a highly difficult time navigating to even the product page. Without a book in mind, the process became even more difficult.
We propose a new schematic with faceted navigation, meaning we group multiple ‘sub-genres’ into larger ‘genres’. A master navigation easily accessibly from the main page while allow us to reduce the number of steps it takes for our users to find and locate products.
A user flow diagram to reduce the barrier for users to view a product from the main page.
Single Click Access
Carrying on the concept of minimizing the number of moves users take to locate a specific book or genre in mind, we also looked to collapse the additional actions-to-take, by bringing the products offered by PowerHouse to the forefront of the site.
This is specifically done by highlighting book products on the main page of the PowerHouse webstore, instead of being tucked away (as shows the current condition) with a newsletter on the main page.
Wireframes are developed from concept-making throughout the design studio and navigational analysis.
Prototyping
How might we help provide Zoey with a more responsive online bookstore experience, by making the book finding process more clean + quick and intuitive + informative? Sketches made to ideate homepage layout, which aims to combine the home page from the existing state with the store page (drawn from user testing and comparative analysis with competitors). The left column navigation bar for categories and the strategy of implementing recommended products in product page is defined from the previous user flow exercises.
Looking for cues from the top-selling publications at PowerHouse in the work of Saville, Tillmans and Teller.
Blending the Physical and Digital Identity
Before stepping into the mid-fidelity stage, we look for artistic cues from the top-selling publications at PowerHouse Arena. Those by the British graphic designer Peter Saville and two distinctive German photographers of their right, Wolfgang Tillmans and Juergen Teller.
Their particular approach to establishing identity will also help PowerHouse Arena determine its own identity as its physical counterpart's mirror image, an austere, high-ceilinged, yet unapologetically colorful space with neatly sorted piles of books and small publications.
Top row establishes the original layout of detached components. Bottom row yields a method that emphasizes the products.
A New Identity for PowerHouse
Based on the findings from the Lo-Fi testing and research into visual identity, the diagram to the right takes us to the next step by refining the layout of navigational elements in response and provides more real estate for products to be displayed.
Instead of floating navigational elements, we introduced a fixed bar that acts as a ‘guide’ to the dropdown categories and has the search function available for users instantly.
The second iteration of the prototype using three colors to define the three main functions of the store: About, Navigation, and Cart.
Mid-Fidelity
The usability testing yielded some expected results. One user found the navigational layout unorthodox but could quickly pick up on its utility. For the next round of iteration, adjustments would need to be made to increase accessibility and decrease users' cognitive workload who may face a similar issue.
Another user hit a snag when they attempted to look for assistance to clarify some details about shipping and inventory, expecting to find contact details to talk to someone at the physical store for help on the page of a product they were interested in. The high-fidelity prototype will include possibilities of providing users with an increased sense of control of their purchase.
A final iteration that reflects the established identity of PowerHouse Arena.
Hi-fidelity
We arrive at the final interactive prototype that addresses the issues unearthed through three prototyping stages and two rounds of usability testing. At this stage, our product delivers users straight to the heart of the bookstore, provides them with a sense of the book's physicality, and provides a sense of identity for the already characteristic PowerHouse Arena.
Response
The challenge of this project was not simply thinking of new, improved ways to approach navigation in a bookstore but also to blend the utility of navigation with the website's identity. Our interviews, Zoey- our persona, and her user journey were crucial to defining the scope of features to build out within our two (2) weeks. It set a foundation we could continually refer to as we moved into the rapid, prototyping and iterative stages.