Greenlight Bookstore
The solution included a streamlined navigation system, improved product listings, simplified checkout process, and a clean and modern visual design.
The aim of this project was to redesign a local store's website to improve its usability and user experience. The original website had a cluttered design, confusing navigation, and poor visual hierarchy, which made it difficult for users to find and purchase products.
In this concept project I had to find a local store and redesign their website with the goal to increase their conversion rate.
I chose Greenfield Bookstore, which is an independent book store with two locations in the heart of Brooklyn.
I performed contextual inquiries on three users, observing their behavior as they navigated, searched, and made purchases on the current site. I also asked them a few questions about their online shopping habits and how they like to interact with similar stores online.
I created an affinity map to see if there were any patterns in the data collected.
The following three main trends were identified from the affinity map.
Users want a visually appealing site with a minimalistic design.
Users need a clear structure with well-defined information hierarchy to easily navigate the website and find products.
Users want a professional looking, clean, easy to understand site.
I also looked into how UX/UI design can effect the success of an e-commerce store.
This stat summarizes the research and shows how effective UX/UI design can be for increasing conversion rates.
I conducted a detailed review of the pages involved in purchasing a product (homepage, navigation, product page, and checkout process) using Nielsen's 10 usability principles as a framework.
It confirmed my initial thoughts that although the site was functioning reasonably well, there are still many areas for improvement that could greatly enhance the user experience.
I discovered 29 violations within the four sections, and evaluated them based on a severity scale ranging from 0 to 4 (0: No usability problem; 1: Cosmetic problem only; 2: Minor usability problem; 3: Major usability problem; 4: Usability catastrophe).
Most of the violations identified were minor usability problems and cosmetic issues, although there was one significant usability problem. The “My Account” button was placed underneath the navigation which had a drop down menu.
The heuristic violated most frequently was the principle of Aesthetic and Minimalist Design.
Below are some issues found with the homepage:
Below are some issues found with the product page:
Using the insights gathered from the discovery phase, I created a problem statement to work towards.
Users are discouraged by the cluttered styling and unintuitive user interface of the Greenlight Bookstore website, including the checkout process. Users desire a more streamlined, clear, and intuitive transaction process, which would increase their satisfaction and reduce the likelihood of cart abandonment.
I conducted a task analysis on the checkout process of direct and indirect competitors. This allowed me to gain insight into different approaches and identify any useful techniques to incorporate into the redesign.
I performed the same task on each of the sites and recorded the steps, while making notes on the process keeping the user and Nielsen’s usability principles in mind.
I selected Community Bookstore, a similar-sized local bookstore, Strand Bookstore, a medium-sized bookstore, and Barnes & Noble, a large bookstore, as direct competitors for analysis. In addition, I evaluated Awesome Brooklyn, a local gift store, and Record Grouch, a local record store, as indirect competitors.
In order to improve the site's navigation and information hierarchy, I started by creating a site map of the existing design.
Following an assessment of the website's navigation, I identified the need to enhance its organization and hierarchy. To achieve this, I streamlined the navigation by removing any superfluous links and restructured the links to improve the website's flow. In order to obtain user feedback on the new categories, I conducted an open card sort with five participants.
As you can see from the above table, the majority of participants rated the proposed categories with a score of 4 or 5, indicating their agreement with the organization of information. Some lower scores, such as 1, were due to users being uncertain about the items and not necessarily a reflection of the proposed structure. This confirms the effectiveness of the new navigation in improving the website's overall usability.
I used the results of the card sort to create a revised site map, which is designed to improve the flow, intuitiveness, and usability of the site. It has a leaner navigation structure that only includes relevant information. The location and relationship of elements like 'My Account', 'Cart', 'Search', and 'Join Mailing List' are now clear. Additionally, I've added a 'Wish list' page.
These sketches formed the foundation of my redesign, guiding my decision-making and helping to create a compelling user experience.
I then developed a style guide to help keep the brand consistent when designing and for people to follow when updating the site.
I kept the original primary color of dark green but added a secondary color of orange and an accent color of a slightly lighter green.
The 60-30-10 Rule
I also followed the 60-30-10 rule, whereby 60% of the palette is dedicated to the dominant color. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.
I chose to use Baskerville as the primary font because of its classic and elegant look, which aligns with the traditional and refined image often associated with bookstores. The secondary font, Helvetica, was chosen for its clean and modern look, making it easy to read and providing a nice contrast to the more decorative Baskerville. Together, these fonts create a balanced and visually pleasing design that enhances the user's experience on the website.
I created a hi-fi prototype of the new design. Below are some previews of the pages and the improvements I made.
Moved the cluttered information from the main hero section to a revolving info bar at the top, and replaced it with a banner carousel promoting new releases.
Moved the search bar to the top left - a more conventional, intuitive placement, for the preferred way of searching for the user.
Styled social icons to match the branding and separated them from the cart and my account buttons, and added a wishlist button.
Updated navigation with relevant information and clear styling.
I added a book cover carousel to highlight new releases, with updated and clearer buttons. I also included the ability to save items to a wishlist or add them to the cart directly from the carousel.
Now there’s a clear structure to the site with consistent spacing and styling.
The footer now only displays necessary information such as contact details and links to socials, resulting in a cleaner and more effective design.
I added dynamic breadcrumbs that update in real-time as the user navigates through the site.
Now there’s a clear hierarchy of information with the product listings.
Added an unobtrusive side sliding cart, so the user can quickly check what’s in their cart and then get back to shopping.
Included carousel to promote similar books.
Introduced simplified, streamlined process for checking out.
Added dynamic progress bar which informs the user of where they are in the process.
Gave the user the ability to go back to the previous step in the process.
Added option to pay with Apple Pay or Google Pay.
I tested the hi-fi prototype with the same four users I observed using the site at the start of the project.
Users appreciated the consistent styling and spacing.
Users mentioned how much of an improvement the new structure of the checkout process is - and they loved the side sliding cart.
Users were able to locate things easier than before.
I’ve used the MoSCoW method below to help ensure that the next steps are clearly defined and prioritized.
Conduct further user testing to validate the design changes and ensure they are meeting user needs.
Implement the final design changes across all pages of the website.
Update the style guide to reflect the final design changes.
Conduct a competitor analysis to ensure the website is staying competitive in the market.
Consider adding additional features, such as personalized recommendations, to improve the user experience.
Implement responsive design to ensure the website is mobile-friendly.
Integrate social media sharing buttons to allow users to easily share products on their social media channels.
Consider implementing a loyalty program to encourage repeat business and customer retention.
Explore options for internationalization to allow customers from other countries to shop on the website.
Implementing virtual or augmented reality features, as this is beyond the scope of the current project.
Adding unnecessary or unrelated features that do not add value to the user experience.
