Responsive online store | Case Study

Boutique Online Store

Davor Anic is an online haberdashery boutique created for consumers and their pets.

http://shop.davoranic.com/

Project type

Independent in-house project for a small fashion business

Duration/time

2017

Role

UX Strategies, UX Designer, Developer




BackGround

Passion and Heritage

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.

THE CHALLENGE

Create a Unique Experience

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.

POTENTIAL SOLUTION

Responsive Online Store with Personal Touch

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.

Research

Find the right balance

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.

Sitemap

Simple Structure for a Big Impact

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.

Click on images to see more.

Style Guide

Staying True to Simplicity

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.


Click on images to see more.

Ideate

Playing with Shapes

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.

Responsive Design

Made to Fit Every Screen

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.‍

Final Product

The store is open!

Visit the store
© 2019 Davor Anic All rights reserved