1/4

An Unsolicited Redesign

Pegasus Books

Video may have killed the radio star, but bad web design will kill a business.

 

In order to keep a competitive edge with online retailers, Pegasus Books requires a structural update to better facilitate an expedited online shopping experience.

Pegasus Book's current site

The Challenge

Pegasus Books is a locally owned bookstores and event spaces with three locations in Oakland and Berkeley, CA.  

 

Through the use of:

  • Site Audit 

  • Competitive Analysis 

  • Sitemaps  

  • Wireframes

 I improved the e-commerce experience on an existing website for a type of person who has a strong preference to shop locally and support mission-based organizations, but with limited time to execute transactions. The Busy Buyer.

Diving in

My jumping off point was an existing website with an identified target user, the first step into refreshing Pegasus Book’s site was to evaluate the functionality of the site for the purpose of quickly finding items and buying them. On top of doing an inventory of the site, I also needed to see what features the competition used to empower their users to frequent their stores.

To identify the areas of opportunity, I did an analysis and inventory of their online store and offerings. I climbed through the site, discovering more and more branches, with leaves that were placed in unexpected places. The pain point I discovered, was that Pegasus Books needed to be restructured and reorganized in order to appeal to my target user.

Using 3 competitors, I looked at what users should be able to do in order to successfully navigate and execute a transaction.

 

  • Green Apple Books is a San Francisco based new and used bookseller with a dated but useable site.

  • Thriftbooks.com is an online only, used book merchant with a robust website.

  • Amazon is a global giant that has revolutionized the e-commerce experience and manages global appeal and accessibility.

 

View Spreadsheet here.

The Opportunities

For the purpose of shopping Pegasus Books, you must have an exact idea of what you are wanting to purchase. The ability to browse is buried with no direct way of accessing, meaning the odds of a Busy Buyer would complete a transaction are meaning 88% of users who consider this a bad experience won’t return. The fundamental difference between the various booksellers I evaluated and my bookseller is that inventory was visible to customers with as little as one click.

Modus Operandi 

The first move I made, was to restructure the existing site map and to consolidate some of the redundant elements. With the existing framework reorganized I brought inventory to the forefront by adding a row of Popular Titles and grid of Inventory Categories to shorten the amount of time, a customer would need to locate an item. As apart of my restructure, I condensed information related to the Brick and Mortar location and collapsed the existing single page checkout to reduce the cognitive load.

Getting Sketchy

I started on newsprint to block out the entire page and used 3x5 cards for mobile concepts.

 

At one point I felt so blocked I took a sharpie and 3x5 card on a walk. As I was strolling up the SF streets I was able to draft an early version of what would become my Product Module 1 (PM1) where I would showcase the product information across the site.

From Sketches to Sketch

Sketches were given more standard form and dimensions with wireframing in Sketch. While it's always best to start working on paper, it's not until I pieced it out in Sketch did it start to become tangible.  

 

The scope of the project did not include a visual redesign, understanding that the largely monochromatic color palette of teals and blues reflect the business’ brand. But in the future, I look forward to adding High fidelity Screens as a way to continue practicing. 

Getting Validation

Exercise Impact

The lessons I learned

The first round of testing happened using Invision, which was a quick way of validating the order and flow of pages while identifying elements that needed refinement.

 

The Second round proved to be a better experience but still not as intended as the overall feel of the page and its elements are quite large.

 

This has led to the reuse of early screenshots as a template to compare and regulate the scale of my iteration.

While the time allotted and the scope the project was limited, this project has given me the inspiration to continue the refine met of this design to address the specific flaws in my design and to provide a visual refresh. 

But, moreover, it has inspired me to continue this as a series of projects that will allow me to further develop and explore my ability to add to work others have done. People grow and adapt and so should design, which is why this is the first in a series.

 

Unsolicited Redesigns: top notch designs that no one asked for. 


 

Once I had the existing site structure understood, I was able to replicate and modify to better suit my target user. Here is my proposed sitemap.