home / Dulcesol

Ecommerce design system. A new era of classic donuts.


The need of an ecosystem.

Dulcesol partnered with VG to think about the design of their ecommerce site. They needed to find a way to showcase their line of products that would work seamlessly across all screen sizes. And our approach was to use atomic design as the design methodology.

Atomic Design

Atomic Design as a methodology for product design.

Atomic design means creating a system of pieces that can come together to create elements and templates we can reuse over and over again.

Atomic Design
Atomic design core philosophy.

By creating modular, repeatable elements and patterns we can exponentially speed up our design and development process. Not only by how fast it is to build but also how quick it is to make changes across the system.

Atomic design isn’t about designing a single instance or page, it’s about designing with the big picture in mind — it’s about designing the core of the system. Brad Forst

Spend a little more time thinking through your core and gain an incredible amount of time back as the process unfolds. Some of the benefits are:

Product component as the minimum unit.
The Process

Starting with atoms.

The idea of Atomic Design is to begin with common raw material (atoms) with which we can build the rest of the project. This visual language must be strong, easy to build, and free itself from the context on which it is going to be displayed. It has to be able to work on every screen!

Possible variations of a generic component
Sample of a block including real examples of a component use cases.

The part and the whole

Atomic Design provides semantic rules and principles of organization for interface elements. One of the really interesting things building a system of components with Atomic Design is that we are conscious of creating a set of elements that depend on each other.

Dulcesol Website
Home layout with different blocks.
Dulcesol Website
Family products detail view. Header, filters, and cards.