Davor Anic is an online haberdashery boutique created for consumers and their pets.
Independent in-house project for a small fashion business
2017
UX Strategies, UX Designer, Developer
Attempting to combine my passion for fashion and my Croatian heritage, I launched the company in 2014. After three years in the neckwear business and offering my products on the Etsy marketplace, I felt it was time to establish a unique experience following the story I built over the last few years.
To translate my story into a unique experience, I needed to take control of the visual presentation and user flow of my store in every segment. In other words, I needed to build a custom online store. Being a small operation with limited resources, I stumbled at the first step: Cost! The cost of creating a custom website was out of my reach, so I needed a different approach to solve the problem and to learn how to develop by myself a sustainable online store flexible for future.
With a strong background in design (graphic and fashion) and experience in customer behavior, I tackled the problem following my learning process. The critical objective was to create a fully responsive online boutique focused on product features and brand awareness with an integrated payment platform that complemented brand aesthetics. The project needed to be based and supported by respected platforms in the industry.
Analyzing the best online stores gave me a clean perspective on trends and industry standards. I concentrated my research on:
• What a website needs to support the honest customer shopping experience focusing on the quality and not quantity.
• How to present, visually and verbally, a product's feature in an appealing fashion to the customer without overloading them with too much information?
• The technical support I need to reach my objectives
Sales drive large department stores are overwhelming the user with marketing messages and product volume. However, their website structure was a valuable starting point for creating product categories, and a list of product information customers are using while shopping.
I turned my research to the tech industry and found a more product-oriented approach. Featuring the straightforward product descriptions highlighted with quality images gives users space to explore the product independently and to build a desire organically.
On top of that, a personalized page for presenting flagship products is an excellent, unobtrusive substitute for generic marketing messages
My next step was to find the most affordable option that would support my ideas and knowledge level.
After testing a few platforms, I wasn't satisfied with the flexibility there offered. Template based platforms were not an option as I wanted to create a more personal experience. My exploration led me to a visual coding concept that had the flexibility I sought and spoke a language I could comprehend.
I came across an excellent company QooQee.com who created and Adobe Muse widget to link you a Shopify account (as a sales platform) with your website build in Adobe Muse. The widget is customizable to the degree I needed to follow the brand identity and user flow.
With
the acquired findings, I structured the online store with the first tier to
represent product categories. They are positioned in the navigation bar next to
the logo and a shopping cart. Every set contains products grouped in a collection,
with a collection introduction page as the second tier of the website.
All
logistical information supporting customers’ shopping experience was grouped as
I planned to position them in the website's footer.
Since the brand uses an almost-black, dark blue as a primary color, I took a chance and opted for bright colors as a collection image background to differentiate the collections.
As ties are long and narrow. I used them as a graph design element to create dynamic patterns for category and product cards. The product page is structured in two segments; the leading section contains full view image on a light gray background to neutralize reflection and a second segment provides product information and a feature slider.
The store is fully responsive with a break point on 1366px, 768px, 667px to cover both portrait and landscape modes on tablets and mobile devices.
