Client Project: CYMOT
Contribution:
To design and mockup the header, footer, home page, product page and category pages. The client liked the Condensed and Vector templates so both were mocked up and a comparison was done to see which template suited the client better. The Vector template was chosen for its layout and further breakdown of content information on the category and product pages.
Scope:
This project was about creating a fresh new look for Cymot. They had an outdated design which was with Commercebuild so now they were looking to redesign their site.
Design Rationale:
I selected the Vector template (which i designed, see UI Design project) as the header, while being a minimal/simple design, has a separate line in which the navigation
is displayed. This allows for multiple categories which meets the clients requirements.
Here are the Desktop Designs:
Home Page
The homepage is also designed to showcase featured categories which allowed Medela to add their respective content and banner designs. The idea of the homepage was to have a simple design with minimal scrolling so that the customer can easily see the categories and use the navigation or the content to search throughout the store.
Product Page
The product page is designed to be spacious and to allow for a lot of different options. It is constructed in a systematic manner where all the options are on the right allowing for a large product image. Underneath the options there are mini tabs to allow for more bullet point content. The page ends with a related items carousel that prompts the user to buy or view more products.
Category Grid View
The category view is designed to contain a banner along with a heading and subtitle to add more detail to the category page. The filters on the left are standard and split into different sections to allow for ease of filtering.
The grid view is designed to have a large image contrasted by a smaller heading, stock status and price. This view lets the user easily see products that have great imagery.
Category List View
The category list view is another way to see the items. By putting each item in its own row it is easier to see the product information and also add it to favourites or a wishlist. This view is suitable for users who like to view product information in detail.