A challenging first published interactive/product design project, this proved to be a deep dive into the unfamiliar territory and a rewarding learning curve. The goal was to modernise the company 4C For Charity's network of sales sites, starting with a brand new sites focused on individual consumer sales, featuring a degree of fluid interactivity and consumer ease of use not previously available in the company's existing sites.
Key Design FUNCTIONS
1 - Ease of practical use; fast, uncluttered and direct navigation of product and information pages. Easy and clear ordering process.
2 - Updated to modern web design standards, leading the direction for the eventual redesign of the remainder of 4C's network of sales sites, which are largely outdated and lack much in the way of customer interaction.
3 - Dynamic resizing and scaling of site to different devices and screen sizes (See mobile version for more details)
4 - Bespoke pages tailored to individual charities to sell cards directly to their supporters in partnership, with site colours and logos altered to match said charity branding.
5 - Easy back-end control for company staff to update new products, change prices, track orders, communicate with customer in real time, change site text, web graphics and website colours.
6 - Production of initial web graphics for the site.
7 - Site to be connected to larger sales site network via clearly labelled external site links throughout the site.
A. Site Map & Research
With the requirement from the brief to develop novel ideas allowing users to navigate the site clearly and easy, with a level of smooth interaction for viewing products and placing orders, my first goal was to look at exemplary examples of sales sites and the merits of their interactive design.
First, I conducted secondary research to familiarise myself with the general way in which product layout is used in sales websites for consumer clarity and ease of use.
A competitive analysis was undertaken to review the strengths, weaknesses, similarities, and differences between 4C's direct competitors.
I also began formulating the requirements of the sites map of pages (above right), to gain a clear understanding of what the site would need features wise when starting the planning of the proposed UX and UI.
B. Lo-Fidelity Wireframes
The practicality of pencil and paper proved to be useful for developing the initial wireframe ideas for the site that took many changes whilst in development and following frequent feedback and new ideas from 4C.
Below is a sample of some of the final wireframes for the site; many overarching ideas were consistent such as the general layout of the header and footer, the use of stripped back blocks of colour and flat-design and the predominately plain background to the site which we felt would help the products which are often colourful stand out best and avoid unwanted distraction.
What required more thought was the manner in which the pages would link together, what elements of the pages would feature animation and how the products would be viewed in an enlarged mode. I particularly wanted to avoid the pitfalls of many sales sites that take you to an individual page for each product to be viewed in detail before order. To counter this, I settled on the idea of having the products in each product page run on a 'carousel', that when clicked on would open up an overlay whilst fading out the background of the site. This allows the customer to click off the product and return to exactly where they were, and also scroll through the entire range of products in chronological order in this enlarged overlay view, from which the customer could then be taken straight to the basket pages of the site.
Thanks to it's excellent streamlined design and ease of use, I utilised Figma to put together the prototype for the site, once a clear concept and direction for the site had been worked out. This final version (below) is close to the final live site.