I worked along our client and coders on this project that consisted of designing a B2B website layout for Casamia - a furniture company. The main objectives were to display the full range of products and its features, to provide sales representatives contact details and to highlight the company values and compromise with its clients.
The graphic elements and colours (purple, grey and white) were based on the brand visual identity. The tool used to design was Photoshop.
A contemporary flat style was chosen for the elements appearance to grant a minimalist aspect reducing the visual information to the user that wants to focus on the products and information. All buttons are purple and fields are withe with a purple stroke, all titles are coloured purple and secondary information is in grey to keep visual consistency to the user so he/she can know what to expect when interacting with the elements that are visually similar. Also, the purple colour grants a great contrast against the white background being used on the most relevant pieces of information and elements.
On the top of the layout we can find the Global navigation of the website composed by a menu and a bar. On the menu, the company’s logo links to the home page, and the website main sections to their related pages, allowing the user to easily see where to go and where the user is indicated by a purple arrow below the section, except for the home page. The menu was designed with 100% website width and the elements are equally spaced between each other.
Below the menu a purple bar with a button to the Restricted Access Area and a search field were placed to support users that only enter to access the Restricted Access Area and/or the ones that want to find something specific without having to navigate the entire website to do it so. The bar uses 100% screen width and the elements are aligned to the right where there’s less information as most western websites content is typically aligned to the left.
The global navigation is fixed at the top and visible in all website pages to make the access to all main sections as quick and intuitive as possible to the user.
On the top of the the centre stage right below the purple bar breadcrumbs with in-links are displayed so the user can easily know where he/she is and where he/she has been. Right below, a title with the selected section is displayed with an oversized font to show the user where he is.
On the Home page, in the centre stage there’s a slideshow with automatic and user-controlled movement showing eye catching images of the rooms to grab the user attention.
Below the slider there is a brief conversational description highlighting what the company offers and on on the right side a list with the special features that support the high quality of Casamia’s products. This information make the user confident he/she has chosen the right company to buy from.
Below there are the types of rooms offered divided in four different categories that are buttons linking to their related pages. And at last a button that links to a specific part of the Rooms page and another button that links to the Download section.
When the user access the Ambientes (Rooms) section, in the centre stage there’s a slideshow with automatic and user-controlled movement showing eye catching images of the rooms to grab the user attention. Right after the breadcrumbs and the page title the types of rooms are divided in four different categories (Bedroom, Kitchen, Living Room & Laundry Room) that are buttons linking to their related pages. Right after the user can have an overview of all the characteristics, special features, available colours and how to take care of the products. These information show the user what he/she can expect from the product and why he\she should buy it.
On the Dormitorios (Bedroom) page, the items available in this category are displayed below the breadcrumbs and title. Knowing that displaying many items would be necessary, the images would have to be reduced and organised in a way that the user could have an overview of as many options as possible so, the centre stage grid comports five items per row, what allows a good number of thumbnails displayed still keeping the image in a recognisable size.
Right after the items a zoomed image shows the room details and below there are module tabs to separate characteristics, components, special features and available colours of the specific item that is selected.
On the Representantes (Sales Representatives) page there is a dropdown list where the user can select the state of preference and find the results on the right side, a scrolling list is activated if there are too many results to be displayed and the active arrow in purple indicates there’s more results below. The grey arrow is inactive indicating that at first there are no results above.
When users visit the Empresa (About) page they find a conversational text about the company’s story, values, mission and vision with images showing the inside of the factory. This content show a rightful company that compromises with clients helping to gain the user’s trust and esteem.
On the Contato (Contact) page the centre stage was split in two to grant a great size to the form on the left and the map on the right. The form has input fields with its related labels inside, the send button was placed at the end of the form. On the right side the user can find a google maps area that allows the user to see where the factory is located and also to navigate through the area if necessary. The address is also displayed bellow to aid the user to mentally locate the company. A phone number is also available for contact.
On the Restricted Area Access page there are two buttons that when clicked result in different actions: the first button redirects the user to an external login access for Sales Representatives and the second button links to an internal login to access the Downloads page.
The Login page content consists in two input fields, for user and password details and a send button.
On the Downloads page, module tabs were implemented right after the title in order to divide the two types of products in a way that the user can quickly alternate between the two. An arrow below the selected option indicates which category is selected. When selecting a category, an immediate response with the related results displayed as thumbnails of the products with their related description and download button bellow, allowing the user to have a quick view of details about the image and the option to download immediately without having to take any more steps.