Partner Spotlight: DBNY Builds a Product Customization App
Designers do not often have the opportunity to build a design that is inspired by a past great artist. Digital agency DBNY was granted the opportunity when offered a chance to build an online store to sell reprints of artwork by Ugo Mochi, a famous Italian artist from the early 20th century.
Amlan Das, Director of Design at DBNY, worked with the acclaimed “Poet of Shadows” and described his experience to us:
Based in NYC, DBNY is a digital agency that helps fashion, lifestyle, and retail brands connect with their audience by creating appealing eCommerce solutions.
They strive to create profitable solutions that meet their clients’ business goals because they are more than just another creative agency. their design philosophy circles around multiplying the performance of their clients’ business.
Ugo Mochi was an esteemed and highly accredited Italian stencil and outline artist from the early 20th century, best known as the “Poet of Shadows”. Ugo Mochi adapted the idea of the traditional silhouette and evolved it into intricate pieces of outlined art that overcame what was considered simple stencil outlines. The grandson of the artist and a past client had requested that we work on a personal project for his family.
His awe-inspiring artwork has been identified by The White House, The Metropolitan Museum of Art, The St. Regis Hotel, and has been featured in countless books and magazine publications.
Our client expressed a vision and key goals of establishing a creative online experience using the legacy of Ugo Mochi’s professional career. Also, he desired to educate the users on the prolific career and wanted to create a shopping experience that was just as eccentric of his grandfather’s work. This experience also had to appeal to a targeted audience ranging from interior designers, art curators, and individuals who respected historical artwork.
What unique requirements did your client have for their store?
To truly comprehend the level of detail and skill it took to create these astonishing pieces of art, visitors were encouraged to explore all facets of the website.
The best approach was to tell a story through a vividly visual experience full of colorful imagery, thoughtful copy and user-focused interactions.
By telling the story, it teaches and converts first-time visitors into well-versed and potential buyers. Once the customer has reached the shopping section of the website, the requirement was clear: provide a very distinct purchasing experience that is intuitive, comprehensive, and highly customizable.
How did you go about giving them the product customization they needed?
The purchasing behavior of Ugo Mochi’s work is intentional and sophisticated and not typically impulsive. Creating an experience around this type of buying behavior, it is important to extend users the ability to highly modify their order to satisfy their needs and tastes all while collecting imperative information i.e.,frame dimensions, materials, sizes.
Here is the three-step approach taken:
1. Selecting a print
2. Choosing from a wide variety of frames and mattes
3. Selecting/modifying different sizing options
These three steps thus ultimately allows the user to have almost infinite abilities to customize and personalize the product that is about to be purchased.
The end result was a sleek and vigorous product customization process that allows users to visualize exactly how their custom creation will look when they receive it in the mail.
Where did the inspiration for the shop’s design come from?
The inspiration for the website was stemmed from an era-specific vintage appeal since most of Ugo Mochi’s career evolved around the early 1900’s. The ‘vintage’ ambiance was combined with current design elements that users and customers expect from a modern eCommerce store.
What changed along the way?
The overall build of this project was substantial and intricate from the interactive story-telling experience to the product customization ability. What started as a small enterprise selling 15 prints with just a few framing and matting offers now provides over 50 unique prints with over 40 frames and mattes to decide upon.
“Creating a shopping experience for a few products varies tremendously from creating a shopping experience for an abundance of products.”
What tools did you find most useful when creating the website?
“We have a unique workflow in place in terms of how we execute our projects. This results in focused UX design and rapid prototyping using pen and paper. You would be surprised how quickly you can iterate designs with pen and paper; they still rule, folks! We wireframed several models of the product customizer until we were satisfied with a version that met the needs of the shop.
Our designers are huge fans of Sketch. It allows us to quickly sketch out (pun intended) ideas with minimal effort and makes our workflow faster so we can move on to other phases of design. It’s important to be flexible in the design phase, especially with a large scope.”
The product customization functionality of the website. Not only does the catered shopping experience guide users through the customization process, it summons users to take a thorough look at every piece that is associated in their custom combination. This allows the user to see an accurate visual rendition of the finished product.
“Growth is very important to us, so we took into consideration future product and collection additions. This app is built to scale and can handle hundreds of thousands of possible product combinations with ease.”
What was the most difficult part about creating this shop?
Limited customization options from current apps along with technical restrictions was the motivation to get creative and construct a modifiable and streamlined solution.
With a total of nine size and shape combinations for each product as in the case of Ugo Mochi, the complexity and sheer size of all the possible product combinations, along with asset allocation, was a challenge. This was solved by customizing the naming conventions for each variation and coded conditions for any possible product combination. The combination is stored in the memory when each customization step is completed (adding frame, adding matte).
What did you learn while creating this website?
This was a very large and complex build so we planned accordingly and broke it down into multiple components, giving us the freedom to be more flexible with the build. Therefore, It’s important to understand scope requirements in order to anticipate technical limitations and what can be done to resolve them.
We exhausted all options for the product customizer and ultimately decided that building our own for the client was the best way to go. Sometimes, pre-made apps will not solve the goals of the project, and it’s worth exploring building your own solutions, especially if it’s within the scope and budget. We were fortunate that Shopify is an extremely flexible platform, one on which our developers pushed the limits with this build.
“Sometimes, pre-made apps will not solve the goals of the project, and it’s worth exploring building your own solutions.”
Absolutely. We haven’t seen many apps in the Shopify App Store that offer this level of specificity for shop owners. We think it’s important to provide a level of flexibility and customization for stores that offer a unique product, or a highly customizable product. For that, we’re currently exploring various options and features while building out this app for the App Store and we’d love to hear any suggestions or feature requests from those who are interested.