Design E-commerce Website

GOAL

To undertake a suitable template from NopCommerce and adapt it. Review the user experience and make the process of purchase as easy as possible. Responsive design for each interface. Identify the features required on the website. Create a visual language which is on-brand. Create mockups and modify the template. Work with the programming team to integrate the theme and launch the website.

TIMELINE

July 2017 – October 2017
4 Months

PROCESS

Discussions with the client to identify key features of the site, review competitor references, understand the look and feel they were aiming for and the audience they were targeting. Created mockups for the homepage and narrowed down on the visual language for the site. Devised the check-out process after taking into consideration the delivery constraints of the various products they offered. Designed interfaces for all the pages for desktop and mobile. Modified the template to recreate these designs, integrated the template in collaboration with the programming team.

MY ROLE

Interacted with the client to understand their requirements, brand personality and target audience. Researched competitors and the user flows they had implemented on their ecommerce websites. Designed Mockups in Illustrator. Received feedback from the client and modified mockups accordingly. Created all interfaces in Illustrator for desktop and mobile. Designed the checkout flow after taking into consideration the various categories of products, their shipping constraints and FFL requirements. Collaborated with the front-end developer to ensure the fidelity of the designs.

Mock Ups

Designed mockups of the home page while using a Nopcommerce template as a reference. Iterated a few times after client feedback to be more in line with their strategy.

Designed a menu style that displayed three level navigation.

Check Out Flow

Designed the check out flow. Each product category had certain legal restrictions on the type of shipping used to deliver it. The system had to check the various variables to select the apt shipping method. Firearms can only be delivered through an FFL Dealer nearest to the customer’s location.

Interfaces

Designed all the interfaces for Desktop and Mobile in Illustrator. Set up character and paragraph styles to keep typography consistent and easy to edit.

Handed specs and assets over to the front end developer for coding. Worked closely with the development team during the integration of the design to the website.

SUMMARY

Learned a lot about email marketing during this project which is still ongoing. Faced problems with the integration of the payment gateway which was resulting in low conversion rates. Explored automation tools and used MailChimp. Had to modify the workflow to fit MailChimp’s linear flow structure. Coordinated with client and developer overseas on this project.

REFERENCE

Anuja Lath
anuja.lath@redalkemi.com