-
Swatchbook is a cloud-based B2B ( and B2C in the future) platform that allows designers to explore, visualize, and share materials, revolutionizing the materials sourcing and management process. The platform offers a catalog of over 150,000 texture scans, renders, and 3D visualizations of materials, which users can use to instantly order from suppliers worldwide. Users are given access to with an in-depth CMS that allows for a unique and personalized experience.
Along with the catalog, swatchbook developed an app for mobile, the Ipad, and the Apple Vision Pro that allow users to apply materials to a 3D model in real time and view them in AR and VR. Swatchbook's clients include fashion retailers H&M, Target, Kohl's, Victoria's Secret, and Nike, as well as smaller fashion startups.
Disclaimer: All Names, Numbers, and Information has be replaced or changed to “placeholder” for non-disclosure purposes. Not all work shown has been fully released yet.
E-commerce
UI/UX | Product research
During my time at swatchbook, designing with a small team means I had to wear many different hats. Tasked with creating marketing material, I took the chance to expand my motion graphic skills. Products I created deliverables for range from swatchbook™, mix™, collaborations with The Surgeon™, and remix™ released for the Apple Vision Pro.
Information Priority
Creating an E-commerce page from scratch is no easy task. The first step I took was to break down what was most important for the user to see and interact with at first glance and all that follows it. Imagery of the swatch textile being the most important for obvious reasons, with cost and title going hand in hand. Supplier is contextually very important because the users are, on average, from a brand that is looking for source suppliers.
The secondary group is all user tools that help interact directly with the product in some way. The last group includes metadata which is vitally important but also a mass of information not user will need and thus will be include near the end. Suggestions are for allowing the user to explore other products that may interest them and help swatchbook’s algorithm to adapt better to the user.
Layout
The base grid structure for the swatchbook brand was a 6 column grid with a focus on using 3 columns if possible. This did cause some conflict in the creation of E-commerce page however, since we needed to provide a mass amount of information that the users required. I provided a solution that allowed for adaptability base on what information was needed. A 12 column grid that allowed the flexibility of using a 3 and 4 column structure. The 4 column grid was restricted to a select few categories but allowed me to optimize the users readability experience.
Wireframes to published
The base grid structure for the swatchbook brand was a 6 column grid with a focus on using 3 columns if possible. This did cause some conflict in the creation of E-commerce page however, since we needed to provide a mass amount of information that the users required. I provided a solution that allowed for adaptability base on what information was needed. A 12 column grid that allowed the flexibility of using a 3 and 4 column structure. The 4 column grid was restricted to a select few categories but allowed me to optimize the users readability experience.
