P&T Knitwear Books and Podcast

A webpage redesign for a newly open bookstore in the Lower East Side, New York.
✎  Project Type: Client
⏱  Project Duration: 3 months
☺  Responsibilities: User Research (Interviews), Competitive Research, Wireframe, Visual Design


P&T Knitwear is a family-owned independent bookstore, podcast studio, event space, and cafe at 180 Orchard Street, New York, run by a team of passionate lifelong readers and listeners. Other than working as a community and event coordinator here at this store, I took up the responsibility to redesign our website in order to:
‍
➊ improve online sales ➋ improve event attendance ➌ drive foot traffic into the store ➍ communicate our podcast studio policy ➎ advertise for our cafe
Context

Product Overview

After assessing the constrains and goals of this project with my store manager and marketing managers, I came up with an image based, campaign focused design plan. The design is made to achieve one of the biggest goas for P&T Knitwear as a new store, spreading the word and helping customers identitfy us, remember and differentiate us from other bookstore.

check out the website here.
The Solution
before
after
Before I started the design process, I went through the constrains that the design might encounter. One of which is the very limited layout and design option provided by the store website server. (The website has to run on this server because it is set up to correspond with the store's sales and inventory system)
Limited layout options:
Another constrain that I had during the design process is the Visual Guideline that the website needs to follow in order to ensure the consistency of the P&T Knitwear's brand identity.
Visual Guideline
The Proccess
Define Research & Challenges ✻
⊛ Residents in the neighborhood ⊛
who are looking for things to do near by in a long term, wanting to find out what events and things are happening in the store
‍Who are the customers? ‍
I conducted  interviews in the store with customers to learn about them and their needs, and here is what I found:‍
⊛ Tourists and first-time comer ⊛
who are looking for a place to visit for the first time, wanting to know what to expect in the store.
1 ∗
Users find it difficult to learn the basic information about the store from the website
2  ∗
Lack of interesting content that shows the current promotions or campaigns in the store
3 ∗
The schedule of events is not easy to find or read
4 ∗
The customers find it difficult to differentiate P&T Knitwear from other bookstores by browsing the website

‍
Notable Quotes:

❝ It would be cool if there were a calendar, insteading of clicking through❞
❝ I like the community tab, I think the store is very community oriented❞
❝ I live in the neighborhood, so i want to know about the events❞
❝ What is (this place)? ❞
❝ It seems to be a bookstore, a cafe. I would like to see how it looks inside❞

See interview notes here.
‍
‍
Interview Findings
‍What are the problems? ‍
After analyzing my interviews, I concluded 3 pain points that the store is currently expierencing with its website
Painpoints
Costumers find it hard to get a sense of what the store looks like from the website.
Costumers want to know what makes the store different from all the other bookstores or cafes.
There is too much information on the website that makes it difficult for costumers to get what they want to know in short time.
☹ pain point 2 ☹
‍Readability
☹ pain point 3 ☹
Uniqueness
☹ pain point 1 ☹
Visualization
Before starting my design process, I did a round of competitive audit to learn about other bookstores' websites: What are they doing well and not well? What kind of information are they (not) offering to the readers?
greenlight Bookstore
Housing Works
Strand
Barnes & Noble
Most of these bookstore websites have great information on featured events and campaigns, but they are lacking of a cohesive design that reflects the actual store, especially what makes them standout from other bookstores.
Conclusion
1 ∗ We want our website to reflect the aesthetic and brand identity of our actual store, adding information that is unique about us: community space, history, mission
2 ∗ Utilize more graphics to promote campaigns, and call of action to shop online
3 ∗ Features on events, and 1 or 2 pre-order books are one of the most helpful information
How Might We create an experience that is unique to us and distinguish ourselves from amazon?
Ideate wireframes ✻
the third most popular content is Events
the second most popular content is About Us Location Hours
from current Google Analytics of the website
the most popular content is About The Podcast Studio
Wireframe Skectching Process
1 ∗ Having my research conclusions and  Google Analytics data in mind, I started out building a basic layout that prioritize events, store information and campaigns within the constrains of the layout.
2 ∗ second iteration of the basic layout provided by the server with a feature of the event calendar
3 ∗ in this iteration I explored image based campaign promotion to give more visual information and break up the grid.
4 ∗ in this iteration I explored with color and shapes, adding in the four blocks of navigation to emphasize our identity: books, cafe, events and podcasts.

this iteration is rejected because it is too far from the style guide for P&T knitwear.
6 ∗ in this iteration I explored with gradient and shapes, and I made the four feature navigation in to buttons under a campaign banner.

I utilized elements in the style guide to make it look more align with the brand identity than the previous iteration.
5 ∗ in this iteration I explored with gradient and shapes, and I made the four feature navigation in to buttons under a campaign banner.

this iteration is rejected because it is too far from the style guide for P&T knitwear
7 ∗ in this final iteration I incorporate images within the style guide to create a homepage experience that provide immediate information for the customers, with clear navigation blocks of the main services, accompanied with eye-catching call of action campaign imagery.

This is the final version that P&T Knitwear decided on.
Final Product
Cafe ∗

I redesigned the homepage with photo based navigation blocks that showcase the four main services of the store, and I redesigned the Cafe page with photographs of the inrerio and new drink campaign to help customers visualize the space and get familiarized with the service.
Event Calendar
&
Campaigns ∗


On the new homepage, I added in an event calendar and campaign banners that make it easy for the customers who live in the neighborhood to know about the events and promotions in the physical store.
Request an Event ∗


I redesigned the page for requesting an event by lining up the information in blocks, so that it is easier for the viewers to intake the information one piece at a time, and there is a clearer communication between P&T Knitwear and those who want to have an event in the space.