Elements bvba
Bringing global brand growth to Elements through eCommerce
Elements bvba is a distributor/agency of high quality and responsibly-made outdoor brands that reinforce our relationship with nature. They are active in Belgium, the Netherlands, Luxemburg, Germany, Austria and France.
Challenge
Elements asked us to create a B2B e-commerce site that allows them to manage their relationships with different customers, distributors and partners from a single platform and enable their customers to manage their accounts and place orders, re-orders and pre-orders.
The goal was to design a responsive e-commerce site that meets the user’s needs while focusing on the client’s business goals.
My Role / Approach
After inhaling the functional specifications given to me by the client and a skype team meeting to discuss the strategy I started off the project. I used a sitemap to get a proper overview, user flows to understand user needs better, wireframes to make the idea visible and finally a working prototype to present to the customer. 2 design iterations and a thumbs up from the client later, I started the slicing and HTML/ SCSS.
Team
Me and the Dev team of ESCMy Role
UX /UI Design - Front-end developmentTools
Sketch, Adobe Creative Suite, Invision, HTML/SCSSClient
Element.bvba , done for ESC, 100% RemoteSitemap / flow
I started with a sitemap to visualize the website and to create an overview of how all the content will fit together.
It helps me to understand the scope of the work better and protects me to oversee critical parts of the website architecture.
Business Requirements
1Simple Filters and Search
On the homepage, the user will be able to filter on brand only. By search, they can look for a custom product. Auto-suggest and spelling correction is included.
2Brands need to be present on the homepage
Idea is to present a new brand on each row.
There are 3 blocks available for a brand.
- A Brand logo and CTA to productpage of this brand.
- B Brand product
- C. Brand movie
Block B and C are adjustable by the admin(s) of elements. They can change a movie to a promo for example. Block A is not adjustable, we will always keep the CTA.
The hierarchy of the brands changes for each user depending on their most bought or most viewed products.
3Pre-order has to stand out
When a brand has a pre-order, it will appear on the first row and the CTA will be in a bright colour with a further to decide content.
4Clear Site orientation/navigation
Bread crumbs for site orientation and SEO and an easy option to go back to search results.
5Clean product overview
For a clean product description I suggested to include the next content
- Main photo and 4 thumbnails. They can be enlarged
- Title of the product
- Reference of the product
- Stock status and emergency elements
- Price excluding VAT
- Description of the product truncated to a fixed number of characters to guarantee the clear layout
- Amount/ size/color fields
- CTA add to the shopping basket. When the product is out of stock we can go for an alternative product.
6Easy to read & maintain extra product information
ecause some products have a lot of extra information we gonna work with tabs. Depending on the info of a product there can be more or fewer tabs. Tabs can be, materials, features, movie, size table explanation…..
