swatchbook

swatchbook

Platforms

Web app | iOS & Android apps

Project Overview

As the first  designer at this company, I established the swatchbook design system and design language used across our product line and every client touchpoint. Along this 8 year journey i have built the design team responsible for the UI/UX across the company's entire product line from the ground up, working in a fast-paced, iterative environment using Agile methodology. We collaborate closely with front-end, back-end, and QA engineers.

swatchbook is a design and software company that provides a cloud-based platform for digitizing and sourcing materials. Some of swatchbook's clients are: Nike, Adidas, Puma, Target, New Balance, H&M, Victoria Secret,Wolverine, Hanes, lululemon and BRU. Our key offerings include:

Digital Material Management

swatchbook provides a centralized cloud platform to manage, organize, and share digital material libraries across teams and customers globally. This streamlines collaboration, ensures everyone works with the latest approved materials, and eliminates the need for physical swatches.

Color Integration

With the integration of over 6,000 Pantone colors, swatchbook allows designers to accurately match colors, manage color palettes digitally, and ensure color consistency throughout the design and production process. This level of color precision is essential for professional design work.

3D Visualization and Rendering

swatchbook's platform enables designers to visualize materials in high-fidelity 3D, apply them to product models, and render photorealistic images and animations. This capability accelerates the design iteration process and facilitates virtual product development.

Supplier Collaboration

Designers can directly connect with material suppliers through swatchbook, source materials efficiently, calculate costs, and streamline models for manufacturing - all within a unified digital workflow. This tight integration enhances communication and speeds up the sourcing process.

Execution

A key aspect of my role involved identifying the need for and designing new features, enhancements, plugins, and integrations. I led two major UI updates that significantly improved user navigation and satisfaction. I conducted extensive market research and led a complete UI overhaul across platforms, which enhanced the overall user experience. Through user research methodologies such as A/B testing, I gathered valuable insights that informed our design decisions.

I developed personas and user journey maps, led the design and prototyping of new features, and worked closely with cross-functional teams. Monitoring and analyzing user behavior was a key part of my role, and I conducted regular design audits to ensure the highest quality. I continuously improved designs based on user feedback and testing and piloted new design tools and techniques. I also facilitated design workshops to foster collaboration and innovation.

I successfully launched product apps across various platforms, including web, tablet, and mobile, specifically swatchbook, swatchbookmix and swatchbookremix. Additionally, I was responsible for all outward-facing visual communication and handouts, including branding, websites, marketing campaign graphics, print materials, brochures, booth designs, flyers, business cards, videos, and event merchandise.

See Design ops & design systems and Design leadership, culture & advocacy for more details.

Competitive Audits

Competitive and design audits were regularly done to ensure highest quality.

Competitive Audit

UI Overhauls

UI updates including two major overhauls across all platforms were designed and executed in collaboration with engineering and QA. Several case studies, mockups, prototypes and usability tests were made. For the details of the design system created to govern these designs see Design Ops & Design Systems

v2 UI mockups_01
v2 UI mockups_02
mobile app 01
mobile app 02
Information Architecture 01
Information Architecture 02
Information Architecture 03
v3 UI mockups_01
v3 UI mockup_02
v3 UI mockup _03
v3 UI mockup _ collection view
Store mockups

UX Research Continuous Enhancement

Surveys, interviews, analytics monitoring helped identify patterns and key insights.

System Usability Scale Survey

Google analytics was leveraged to understand many aspects like device types per region, another example is most common screen resolutions to test against. Screen resolution is indicative of the height and width of the screen where the browser size refers to the space available for your website to load (removes toolbars and also covers the case of manually resized windows) scale can be a factor as it can sometimes be larger than the screen size. windows users for example are known to tweak scale as a global setting for the machine nevertheless we were able to identify outliers highlighted yellow (less than 1 sec average sessions) as well as common resolutions.

Screen resolution analytics

In house analytics was leveraged to monitor user interaction with swatches to quantify interest, and identify patterns.

In house analytics to monitor swatch view KPIs

Efforts have been made to design a UX Research Database by identifying the needed fields and workflow.

UX Repo field mapping for Jira

Features Introduced

A recent example would be Flashcards, swatchbook's flashcards offer a "quick reveal" feature, allowing users to access material details without the need for sign-ups or complex navigation. Additionally, flashcards can be easily shared within organizations, teams, or with external partners for efficient collaboration. Overall, swatchbook's flashcards serve as a comprehensive and visually engaging resource for material exploration, enabling designers and professionals to make informed decisions and streamline their material selection and development processes.

A/B testing & usability research was done in collaboration with BRU (a leading global supplier of interior furnishing fabrics and wall coverings), as well as Sunwell try a prototype

Prototypes
Flashcard UI
Mapping out collaboration feature
Line collaboration feature

Plugins & Integrations

A good example would be the swatchbook x Centric integration. This integration allows swatchbook customers who also use Centric PLM to seamlessly connect their digital material libraries and data between the two platforms.The key benefits of this integration include:

  • Streamlined material data exchange between swatchbook and Centric PLM, eliminating manual efforts and errors.
  • Centralized access to accurate, up-to-date digital material information within the PLM environment.
  • Improved collaboration and visibility into material development processes across teams and suppliers.
  • Accelerated product development cycles by ensuring material information is readily available.

By tightly integrating swatchbook's digital material management capabilities with Centric's PLM solutions, fashion and consumer product companies can drive greater efficiency, transparency, and speed in their material selection and product development workflows.This partnership exemplifies swatchbook's commitment to providing an open ecosystem that integrates with other best-in-class solutions, enabling customers to leverage the full potential of digitized materials within their existing technology landscapes.

Try one of the prototypes

Integration Mapping
Integration UI 01
Integration UI 02

Design Services

Design and UX services were rendered across the company functions a good example would be the Service Center Digital requirements card they hand out to textile supplier factories. So instead of a printed PDF, this card provides supplier with access to live requirements that can be updated at any given time.

Designed a streamlined digitization requirements sharing pipeline for swatchbook China

Websites, branding, email templates, campaigns & promotional elements

I designed, executed and maintained the company's websites and promotional elements.

Results

Working on the swatchbook ecosystem was a labour of love that lasted about 8 years, it is a complex ecosystem with outstanding capabilities. In the above images i have tried to showcase a few examples of some aspects but it truly does not do it or the work done justice. If you're interested i encourage you to dive deeper into the many publications out there.

New Balance x swatchbook case study by the interline

Visit Website

Appstore

GooglePlay