Redefining the UX/UI for a beautiful Ecom experience — Pt 01 “Web”
We have come a long way with our understanding in the E-commerce vertical. But we feel through the act of “Design Thinking,” there is still a lot to achieve in the final manifestations (UX/UI). At Robosoft Design Labs, we are constantly questioning, iterating and pushing the limits of simplicity in design. We believe that implicit design is much more powerful than the explicit.
In this article, I am going to demonstrate how this can be achieved for a curated e-commerce experience rather than for large aggregators like Amazon and eBay. I feel that the aggregators try to pack too much into their interfaces by cramping in too many products for maximum visibility, which in-turn does not celebrate the individual product, but pushes products to compete with each.
We believe that this approach is an unnecessary distraction. The real mission here is to generate the emotion of desire through simplicity in design wherein content is always the main focus, celebrating each individual product.
Since I am a Fisherman and an Appman (check profile), I decided to do a mock-revamp of Shimano Fishing — http://fish.shimano.com, my favorite fishing tackle site. It is something I empathise the most with.
Keeping my description short and to the point, I hope to demonstrate how subtle design can help bring the essence of both celebration and focus to the shopping experience. This article (Part01) is based on the web, I hope to follow it up with a Part-O2 — design for the mobile App.
The Brief
Shimano Fishing is a company who manufactures and sells high performance sport fishing gear. They have been around for decades and are now leaders in the industry with a cult of dedicated users. The company now needs a curated digital experience as opposed to regular market place, which would inspire its audience to purchase and uses its products.
Execution
Intent of design
The intent is to keep the home page stunning enough to engage and clear enough to navigate quickly. The Shimano Fishing site is subtly divided into three sections — Explore, Shop and Learn.
This being the holy grail behind the website lead me to an intent, which was not limited to a beautiful visual manifestation but went beyond, into the emotional realm.— the user needs to experience the 3fold curate journey. In the “Explore” section users are inspired through stories and product experiences, in the “Shop” section, users can then buy the products and lastly you have the “Learn” section wherein users are taught how to use the products through interactive demos, product care, and support tutorials. However, in this article, I have illustrated only the “Shop” experience.
Brand & Colour Treatment
Shimano Fishing as a brand sports blue as their primary colour and yellow as its secondary colour. I believe that the essence of these colours can be manifested through beautiful line work and fonts rather than force fitting large blocks of blue and yellow. This will also help maintain the initial intent of a clean white look throughout the site. (Refer Fig 1.0 below)
Fonts
I have used 2 fonts, Bangla MN and San Francisco. The font Bangla MN is semi-serif, which sports an organic and earthy look that matches the passion for an outdoor sport like fishing, while SF being beautiful and clean, maintains high legibility for body text. Together they complement each other, like ebony and ivory on a piano keyboard.
Product Landing Page
The product landing page is the most important section when it comes to user exploration and decision making. The global design grid is center aligned with a simple and elegant menu system. On the top right-hand corner — Global Search, Profile, Favourites, and Shopping Cart/bag.
For the masthead, I have decided not to use a conventional image driven masthead approach that would disrupt the flow of the white space & openness (which is a key ingredient to this design flow). Instead, a beautiful illustration of “Spanish Mackerel” implies the type of fish you can catch with these fishing reels. It also lends a certain elegant handcrafted feel to the page. (Refer Fig 1.2 below)
The product display section is carefully crafted into a 3 column grid (the 4th being reserved for the filters) that seamlessly fits in with the center alignment of the master design grid. The three column grid provides the perfect display area for the product, giving each product thumbnail (fishing reel) enough room to breathe. This visual appeal is essential to celebrate the aesthetics of these high-end fishing reels while maintaining the balance of openness through white space.
Each product box has a compare option, (as this feature in the context of fishing reels) which is really important to the user. Along with precise description, the price is up front. (Refer Fig 1.3 below)
The LHS filter menu in the 4th column is built with mindfulness for the avid fisherman, wherein sorting and filtering down to the right choice is quick and seamless. This menu also sports collapsible sections. The products are sort by default to “New Arrivals” — featuring the latest products upfront. (Refer Fig 1.3 below)
Product description page (PDP)
This section is clearly about product focus. I must emphasise that great photography is crucial here. No matter how mindful and beautiful is the UX/UI, bad photography destroys everything. A great product shot not only helps define the details, but also helps celebrate the fine craftsmanship. The devil is in the detail.
In this case, I have taken care to display the product (fish reel) with enough of space around, so as to keep it clutter free and focused. (Refer Fig 2.0 below)
Points to be noted here — Keep the product description with a “Read more” link, this avoids long write-up that could disorient your design layout. Quick specs gives the users a quick overview.
Group essential UX elements together — ratings & reviews with the price, because at this point the user will need some validation before the final purchase. “Add to bag” and Favourites helps purchase at later date. Delivery time and contact info work best together, as that’s when the user probably needs to speak to someone on the other side. (Refer Fig 2.0 above)
Below the product image, try and keep the product thumbnails to an optimum number. Resist the urge to add a horizontal scroll. If the user needs more info like images, videos, etc. redirect them to the products Facebook, Youtube and other social media pages, these mediums work best in such cases and are specifically designed to handle media — like video content much more efficiently. In this case, we have restricted the images to 2 interactive views and one video. For more stories we have redirected them to social link-ups. (Refer Fig 2.1 below)
Lastly, I recommend that if possible do not add more than 3 to 4 recommended products. You are the curator, you need to do your homework and be sure of your offerings. Do not confuse your users with a plethora of recommendations in the disguise of better product visibility. Less is always more. (Refer Fig 2.1 above)
Be mindful about quality v/s quantity, control that urge to add everything in the guise of Product Visibility. There is indeed a stark difference in abundance and unnecessary choices.
I hope you enjoyed this read as much as I enjoyed designing it, and I hope somewhere down the line Shimano likes it too :)
