nirali patel - portfolio

Nirali PatelDigital Design

Nirali Patel | Digital Design | UX Design

Challenge: Current homepage is too restrictive in layout options. We need flexibility to display varying number of banners; to cater to the offers and overlay deals we run in each promotion. Some banners are too small to use effectively and make the page cluttered.

Brief: Within the current functionality, create alternative layout options in the main banner space to allow us to display banners in various formats based on the offers we would need to display at any time. Review layout to declutter and bring focus on main promotions.

Legacy Site - Homepage Options

Current Homepage: Redesigned Layout: Four layout options created

LHN cleaner and shorter

Light BG colour used to pull out categories/ active tab on rotator.

Also used to separate the

service messaging on the page from

promotional banners

Top section decluttered to

introduce more focus on main promotions.

Clickable tabs added - users

are able to click and view the

deal they want or let the rotator run on default


Result: A decluttered homepage, more layout options enabling flexibility to a cater to showcase offers clearly on the homepage.


Challenge: PDP is cluttered and too many distractions on the page make it easy for users to leave without purchase.

Brief: Redesign the PDP to give more focus to the product. Clearer communication of main product information and offer. Scope to add in reviews and service information.

Legacy Site - Product Detail Page

Current PDP:

Standard web site LHN categories - not relevant to product or category currently on

Label information as per the packaging, not user friendly.

Alternative size options not clear to

read

Offer not clear to see


Section A: Product image, review rating,

social icons

Optional: ‘You may also like’ for cross

sellSection C: secondary

information in tabbed format.

Section B: Primary product information,

price, offer

New PDP Wireframe: The LHN categories removed as these are not relevant to the current product and pose an easy distraction from purchase. The remaining elements split into 3 clear sections - adding white space and format to information on the page.


New PDP: Live on legacy web site. Decluttered look and feel giving focus to sections accordingly with primary information formatted at top of page. Secodnary information supporting the sale displayed below the image and main product information.


Challenge: Missing an opportunity to cross sell and upsell on the basket page. Promotions not clear in basket.

Brief: Design layout options within current functionality to improve display of items in basket by promotion. Showcase how and where we can display cross sell and upsell products.

Legacy Site - Basket Page

Current Basket:

Limited upsell area - no dynamic

capability.

messaging to encourage upsell into

the promotion


New Basket: Within current functional specification. Display format cleaned up to clearly display products in the offers they fall in. Ability to display multiple offers. Ability to add messaging at product level to encourage buy-in into multiple buy offers.

Products listed by promotion... products

not in promotion, Penny products,

multibuy.Makes it clearer for

customer to see where they could be

missing out.

Messaging atproduct level where

deal could be missed

Cleaner format of displaying product

price and total, quantity and total

summary


New Basket: Upsell and Cross-sell options added to new basket format

Upsell on Delivery:Spend £X more to get Free Delivery

Cross-sell on products: You may

also like format options


Challenge: The current offers page is not working as hard as it did on legacy website.

Brief: Redesign the current offers page to better represent the offers within the current promotion.

New Site Platform: Landing Page Redesign

Original Design Redesign

Bounce Rate: -14.7%

Exit Rate: -19.6%

Orders (visits to Offers Page): 8.3%

Conversion: 6.6%


Project DesignReview options to display Delivery options on PDP and support with design; the below is one instance of the format and layout of delivery information. Variations on icons colours.


Landing page template designed using modular approach; flexibility on content display options across the page, banner sizes work for all devices - reducing the requirement for rework or duplication of banners for mobile devices.

Landing Page Design


Developing the online branding for Beauty through microsite design; responsive design to work across devices.

Beauty Microsite


Creating look and feel; being on brand, manipulating existing assets, creating new assets

Creating Artwork


Iconography

+


Defining and documenting Design Team Process and SLAs. Creation of Design Planner for all BAU workload to be used by all ecommerce areas and design team. Leading digital design dsirection by defining Digital Brand Guidelines.

Process & Documentation

Digital Design Brand BookCore Look & Feel.


Web Creative


Email Examples


Marketing Activity

nirali patel - portfolio

Documents