Problem

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.

Solution

The solution included a streamlined navigation system, improved product listings, simplified checkout process, and a clean and modern visual design.

Embark on the redesign journey of Greenlight Bookstore's digital experience. Uncover design innovations, mid-fi concepts, and hi-fi animations, unveiling the meticulous design thinking behind each pixel.

Original header & hero vs hi-fi prototype

Before (Header and hero)

Initial assessment: Navigational overhaul and aesthetic refinement - a critical review

Social, “search” and “cart” icons all together at the top of the page. Also a mailing list CTA that looks like a search bar with a contact icon next to it - all very confusing for the user.
Significant user problem with the navigation - “My Account” button placed underneath a nav button which has a drop down menu.
A lot of information placed in prime real estate - gives a cluttered, unprofessional look. (Under the nav-bar).
No search bar in the header.
Unnecessarily large logo.

After (Header and hero)

Strategic enhancements: optimizing hero section, improving search placement, social icon styling, and carousel innovations

Moved the cluttered information from the 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 wishlist.
Updated navigation with relevant information and clear styling.
Added carousel to highlight new releases, with updated and clearer buttons. Also included the ability to save items to a wishlist or add them to the cart directly from the carousel.

Hi-fi prototype

From Concept to Interactive Reality: Unveiling the Hi-Fi Prototype

Home page

Structural refinement and visual optimization: achieving consistency, streamlining footers, and elevating hero section, search, and navigation

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.
Transformed the main hero section by relocating cluttered information to a sleek revolving info bar, introducing a dynamic banner carousel spotlighting new releases.
Enhanced user experience by repositioning the search bar to the top left, aligning with conventional user expectations for an intuitive and preferred search location.

Product page

Interactive enhancements and seamless navigation: real-time breadcrumbs, enhanced product hierarchy, convenient side sliding cart, and engaging book carousel

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.

Checkout process

Efficiency unleashed: streamlined checkout, dynamic progress tracking, intuitive backtracking, and seamless Apple Pay/Google Pay integration

Introduced much more simplified, streamlined process for checking out.
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.
Added dynamic progress bar which informs the user of where they are in the process.

Paul Taylor

E-commerce site redesign

Problem

Solution

Role

Tools

Skills

Timeline

Role

Tools

Skills

Timeline

Role

Tools

Skills

Timeline

Original header & hero vs hi-fi prototype

Before (Header and hero)

Initial assessment: Navigational overhaul and aesthetic refinement - a critical review

After (Header and hero)

Strategic enhancements: optimizing hero section, improving search placement, social icon styling, and carousel innovations

Initial ideas sketches

Sketches of key screens in the design evolution

Home (version 1)

Home (version 2)

Two versions of the checkout card

Product page

About page

Navigation bar

Hi-fi prototype

From Concept to Interactive Reality: Unveiling the Hi-Fi Prototype

Home page

Structural refinement and visual optimization: achieving consistency, streamlining footers, and elevating hero section, search, and navigation

Product page

Interactive enhancements and seamless navigation: real-time breadcrumbs, enhanced product hierarchy, convenient side sliding cart, and engaging book carousel

Checkout process

Efficiency unleashed: streamlined checkout, dynamic progress tracking, intuitive backtracking, and seamless Apple Pay/Google Pay integration

Case Study Full Process