Let’s Explore the Book Store!
Making Capitol Hill Book’s online presence navigational.
Overview or challenge:
Capitol Hill Books is a used bookstore located on historic Capitol Hill in Washington DC, with three floors of quality used books, first editions, and rare books.
Customers were visiting the Capitol Hill Bookstore eCommerce, but not making or completing their purchases. I was challenged to do an analysis of the website and figure out what design changes needed to be made in order for those cart conversion rates to be higher.
Team: Just me
Duration: a 2-week design sprint
This was a conceptual project.
Tools:
Card Sorting
Site Mapping
Plus and Delta Analysis
Comparative analysis
User Flow
Design Systems
Wireframing
Prototyping
Usability Testing
“How do I find the book that I want?”
As eclectic and unique as Capitol Hill Books is, the webspace is not a place customers usually want to take time when finding books. E-commerce is all about user needs and giving them what they are looking for. When I did a design analysis of Capitol Hill’s website the biggest issue that I found was the informational architecture under their “Browse” page. This was the main way customers searched for books that they wanted to find on the website. The category links are not grouped in any way and there were no filter options. All of these features would help customers navigate and find their books a lot quicker.
TARGET USERS
Because this was a conceptual project during my General Assembly UX design immersive course we were given target users and their needs, and pain points. We were given 4 different targets and had to pick 2 out of the 4 users to design for.
RESEARCH AND ANALYSIS METHODS
Plus & Delta Charts
Based on the target users' needs and behaviors I did a Plus Delta analysis of what they would’ve liked about the website and what they would’ve wanted from the website.
After doing the analysis there were four additional features that I felt Capitol Hill Books could benefit from on their eCommerce website.
Bookmarking features - This would be great for the careful critic because they wouldn’t have to “start all over because they don’t remember what products they’ve considered”.
Recommendation features - Both the Spontaneous Selector & Careful Critic would benefit from this feature because they “love getting special recommendations” and the recommendation feature can help feature “seek out authors and topics they already like.”
Indicators for special or rare books - Because the Spontaneous Selector “loves unexpected discoveries” and “can’t easily identify specialty items” it would be a great additional feature to add a “rare book” indicator.
Better information architecture:
Categorizing book navigation by book types - Because the browsing page had no categorization system it seems like it would be easier for the Spontaneous Selector to find books instead of having “difficulty browsing through a wide variety of products.”
Filtering system - In a similar vein, adding a filtering component would help the Spontaneous Selector to browse for books and the Careful Critic to compare multiple products more efficiently.
Competitive & Comparative Analysis
One of the best and most effective ways to design is to find and study what already works well. We don’t have to re-invent the wheel. I decided to do a Competitive & Comparative Analysis of websites that already uses the design features I decided would benefit the target users. Most of my feature design ideas came from Amazon, one of the most successful eCommerce companies.
Recommendation features - On Amazon’s landing page and product page, they have different purchase suggestions right off the bat. Based on the user's history Amazon’s webpage lists product suggestions.
Filtering feature - I also looked at how Amazon designed their filter system and implemented what Capitol Hill Books would need under their filter system.
Information Architecture via Card Sorting
I understood that the browsing section of the website needed to be structured better with categories. However, instead of relying on my own mental mind map, I relied on actual user’s surveys of how they would card sort the various books under certain categories. I did a open card sort using Optimal Workshop. This is where users who did the card sorting survey would make their type up their own categories and organize all of Capitol Hill Book’s book selections.
This is an example of Optimal’s data after having users do the card sorting. Using the data given I was able to determine which categories to use to sort Capitol Hill Books’ book selections.
These were the categories that came out of the card sorting data:
Special Collections
Fiction
Non-Fiction
History
Region/ Geography
Language
Art
Science
Children
Re-design of the Global Navigation
With the new features and pages added I had to re-design the information architecture of the Site’s Global navigation. I did a breakdown of each site navigation level in Figjam
Because I would be adding “Cart” and “Account Info” I had to reorganize pages to be tucked under each other. For Example “Events, and” “Blog” could sit under the “About” page. “Catalogues” could be found under Search or “Browse”.
My Figjam Site Navigation brainstorming / Layout process.
THE IDEATING & DESIGN PROCESS
Capitol Hill Books’ Brand
After the information had been laid out, structured, and organized I started to ideate my designs for the website. Trying to understand the client and Capitol Hill Book’s brand I found out that they stood their ground on their bookstore aesthetics and function. It was like a wonderland and a maze of books. The space was almost an adventure. You never knew what you would rare book you could find.
These are pictures and information I got from the About page:
You can tell that Capitol Hill Books is really proud of their unique bookstore.
Who knows what you will find the book store?
Note cards are used as labels through out the book store.
UX & UI Inspiration
I was wondering how to stay true to their brand, and not make the eCommerce website too much like the modern Barnes and Nobles or another Amazon. I did have an idea come to me during our UX Design lectures.
During the time of this project my UX Design Class introduced me to a website created to explore the Canals of Amsterdam. I was inspired by how the user navigated through the website almost as if they were going through a canal in the web space. In the same way I thought “What I can create a functional eCommerce website but the look and feel of it would still mirror Capitol Hill Book’s presence in some in someway?”
So I took the idea Skeuomorphism and ran with it. I sketched out the landing page of the website to look like a book with note tabs. These tabs would be the Global navigation pages.
User Flows & Wireframes
After I designed some of the sketches I started to sketch out some user flows and wireframes utilizing Figjam and Figma. The two user flows planned out were based on favoriting books & and going through the check out process.
The 1st User Flow task was to favorite a book on the website.
The 2nd User Flow task was to complete a book purchase.
These were also the wireframes for the new features that were added into the web design:
Wireframing the Browse section and utilizing the card sorting information.
The Rare Book indicator and the favorite icon are good visual indicators of design, letting the users know more information about the book that they are browsing through. I’ve also added the filter option to help find various books based on the user’s needs.
Books similar to this are also a sort of recommendation that fulfills the target users’ wanted and needed users experience.
Like Amazon, the Home page will show users’ their Recently Viewed, Book Marked to easily bring users’ back to what they were exploring or interested in. The Featured books and Grab Bags are ways that the users’ could find new books outside of their scopes.
USER TESTING
Utilizing the wireframes I’ve created I had two tasks based on the two user flows that I conducted.
Book marking a book.
Checking out a book.
The users were able to accomplish the task. Most of the critiques came from the design aspect. Users talked about how the spacing seemed cluttered and information could be spread out a bit more.
A lot of the comments that were received were about how they’ve never encountered a global navigation that was on the side. It was not a negative or a positive, just a change in experience that the users haven’t encountered.
HI-FIDELITY PROTOTYPE
After listening to the user testing feedback, I changed some of the spacing issues.
Prototype Videos:
NEXT STEPS
Do more user testing - After doing wireframe user testing, the next steps would be to do more user testing on the high-fidelity prototype design. Getting feedback on the design changes, and also also how the final color, look, and feel of the eCommerce as a whole would give me a better understanding of what parts of the design is and isn’t user friendly.
KPIs - Because this was a conceptual project, there were no KPI tools to compare and contrast how these design elements actually affected the boost of sales and purchases. However, it is a good thing to keep in mind that if KPIs measurements were available this would a good way to further my user research and make my designs more efficient. There are always improvements to be made in products as we as UX Designers continuously dive into what works and what doesn’t work.
REFLECTIONS
What didn’t work
Certain design aspects didn’t work - Skeumorphism is different concept, but I needed to tread on it tastefully. Some of the users mentioned that some textures were too distracting or not aesthetically pleasing. At the beginning the book spine had texture behind the filter text. Getting feedback from users saying that they didn’t like it had me make some design changes.
The unrealistic review section - One design concept I got too excited about was the review/ rating section on the books. Although a review section would’ve been a good design feature for the selected target users, I failed to make designs realistic to Capitol Hill Book’s real life business operations. Unlike Amazon or Barnes and Nobles, Capitol Hill Books is a bookstore that collects used books, so some of the inventory might be unique. There would not be enough readers for those specific books to leave reviews on those speciality books. Therefore, the 5 star review section would not be much use.
Being new to Figma and the hard skills - Being new to Figma, I didn’t not use component systems effectively. And did not know about variables and the grid lines Figma had to offer. So designing took a longer time than it should’ve if I knew about components and variables. Alignments and every detail in design is very important and should be intentional. Every small detail that is perfected makes a cleare picture as a whole. With that being said, utilizing components and grid lines to adjust every frame at the same time would’ve saved me some design time. Hard skills are learned with time and experience.
What Worked
Implementing features based on research - Researching, listening to what your research tells you helps guide you in the direction you need in regards to your design decisions. Without understanding the target users, Needs, habits, pain points, and desires there would be no direction for efficient change. You can copy design features and make possible suggestions all you want, but it’ll be like stabbing in the dark and hoping you’ve hit the target. But designing based on understanding and empathy for the users needs helps you focus on what design decisions are important to implement.
Taking a risk on skeuomorphism - I had positive feedback on the Skeuomorphic design concept. Because it was a unique eCommerce design concept, and it tied into the Capitol Hill Book’s brand it grabbed users’ attention. To challenge my design skills in general I believe it is good to try to new things, take that risk, and learn from the experience. I learned what parts of the skeuomorphism worked and what didn’t work well with the users, but I wouldn’t have never known this information if had played it safe and designed a website like the modern Amazon eCommerce giant. I’m glad to have taken that risk with a growth-mindset.
