- Client: Safety Depot (hard)
- Type of project: User interface and web page design
- Tools: Adobe Photoshop, Front-end development, Invision
Project description
Safety Depot needed a complete renew of the design of its old website, as well as giving the importance to the new products and add sections that did not exist that they actually needed, such as job board, suppliers, etc. Another important point to note is that they wanted to unify the inventory of the physical store with the online store to have an exact control of their products and with this, being able to provide a better service to their customers in a timely manner.
Applied knowledge
- Agile and atom methodology
- New sections with direct code to the template (html, liquid)
- Editing the templates css and liquid code
- Creation, edition and export of assets
- Constant follow-up with the client
- Integration and configuration of apps (reviews, map, testimonials)
Challenges
- Create a web page with sections for the collections of all the products that they manage
- Adding all the requirements of the client without affecting the previously approved design
- Create and edit new templates with liquid code to adapt the chosen template
- Carry out the prototype in a short period of time
- Make sections that can be manipulated for the client
What I've learned
- Creation of a friendly and simple interface for the large number of products they manage
- Edition and implementation of nuew coded templates and sections of the liquid code of shopify
- How to create catalogs and collections with a high number of products for inventory
- Modification of product detail template to add more than two options of variants for each one
Safety first!
The most important challenge of the project was to organize the inventory properly so that both stores could coincide. For that reason we had to organize and divide the products by specific collections, variants and categories, this would give us a better organization to make the necessary adjustments.
With all the requested sections and all the requirements of the client applied in the design, the page was approved successfully and the layout was made in time and form for the day of delivery.
The best design for all products
All products have their specific variants, whether in sizes, dimensions and accessories. The design of the product page and their variants were one of the main requirements of the client, since users must have access to these options to be able to make the correct order.
Another aspect to be highlighted is in the collections of the products, we've applied a wide number of filters to simplify the customer's choice of search. A promotional banner section was also added to improve the shopping experience.
A responsive model
All the sections applied to the design must be responsive as in all projects that are currently carried out. All the pages created in the project were designed so that they can be adapted to all mobile devices. For that same reason, we managed to organize all the sections so that they looked perfect on any device and all of them had to have the right functionalities.
