UX/UI Work
Responsive Homepage Redesign
Responsive redesign for the homepage of Brimar Industries' largest e-commerce website. Designed various navigation grid components in order to add visual contrast to break up the multiple sections of products.
This is the wide breakpoint of a three breakpoint responsive design. The navigation grids tile in order to allow for the narrowing of the viewport, while also giving the user the ability to see the most products/content at a time.
Responsive redesign for the homepage of Brimar Industries' largest e-commerce website. Designed various navigation grid components in order to add visual contrast to break up the multiple sections of products.
This is the wide breakpoint of a three breakpoint responsive design. The navigation grids tile in order to allow for the narrowing of the viewport, while also giving the user the ability to see the most products/content at a time.
Responsive Navigation Pages Redesign
Redesigned the navigation pages for Brimar Industries' largest e-commerce website. This redesign is made up of three breakpoints to allow the user to see the navigation content in the best layout based on their current viewport. The design of multiple navigation components opened up the possibilities for marketing to be able to display the product content in the most eye-catching ways possible.
There are two navigation grids that were created to link to other navigation pages deeper within the site's page hierarchy. These navigation grids include a headline and snippet. A snippet allows marketing to add detail to describe the content of the navigation page that the page tile links to. One of these two navigation grid components has wider tiles to allow for a longer snippet.
The product grid links directly to the product page of each tile. I created over 26 different image width and height combinations to allow for the product to best fit within the image container for the tile of the product grid. This allows more variation and control for marketing. The height of the product tile is partially determined by the height of the product image within the tile; therefore if the products are short in height for that product grid the marketing team can select a shorter product image height to allow for more products to be viewed at once.
Sliders allow for a larger quantity of product tiles or navigation tiles to be grouped together but not take up a lot of real estate on the navigation page. These have been a fantastic addition to the multiple types of components that marketing can utilize. The sliders are used for narrowing by state for example for Safety Signs that have different products per state (like handicapped signs).
The redesign of the navigation pages has allowed Brimar to see increase in revenue as well as conversion rate for products that are commonly purchased together because of marketings ability to add sliders to navigations pages.
Redesigned the navigation pages for Brimar Industries' largest e-commerce website. This redesign is made up of three breakpoints to allow the user to see the navigation content in the best layout based on their current viewport. The design of multiple navigation components opened up the possibilities for marketing to be able to display the product content in the most eye-catching ways possible.
There are two navigation grids that were created to link to other navigation pages deeper within the site's page hierarchy. These navigation grids include a headline and snippet. A snippet allows marketing to add detail to describe the content of the navigation page that the page tile links to. One of these two navigation grid components has wider tiles to allow for a longer snippet.
The product grid links directly to the product page of each tile. I created over 26 different image width and height combinations to allow for the product to best fit within the image container for the tile of the product grid. This allows more variation and control for marketing. The height of the product tile is partially determined by the height of the product image within the tile; therefore if the products are short in height for that product grid the marketing team can select a shorter product image height to allow for more products to be viewed at once.
Sliders allow for a larger quantity of product tiles or navigation tiles to be grouped together but not take up a lot of real estate on the navigation page. These have been a fantastic addition to the multiple types of components that marketing can utilize. The sliders are used for narrowing by state for example for Safety Signs that have different products per state (like handicapped signs).
The redesign of the navigation pages has allowed Brimar to see increase in revenue as well as conversion rate for products that are commonly purchased together because of marketings ability to add sliders to navigations pages.
This is depicting the three breakpoints for the navigation page. The toppers are used as an accent piece at the top of each navigation page to allow the user to gain trust and confidence with the site. These are utilized to highlight important details like advertising that we have products that you can tweak or adjust the copy on the sign to become exactly what you are looking for, that there are bilingual signs, fast shipping, and the site's low price guarantee.
Responsive Product Page Redesign
Responsive redesign of the product page for Brimar Industries' largest e-commerce website. SafetySign's product pages are heavy in content. This made it very important to follow a visual hierarchy for the page layout. Unlike many e-commerce websites this product page has multiple options for the user to select from when picking their SKU (size, material, laminate, mounting holes, packaging). The quantity the user selects will also adjust their pricing tier and therefore adjust the price accordingly. Each SKU meets different compliances which is also important information for the user to understand. The Size the user selects can adjust the viewing distance for their sign, the material selected and adjust the outdoor durability; all of this is important to communicate to the user. This was an extremely enjoyable challenge to work through for me and I am very proud of the outcome and positive user experience feedback Brimar has received on the new design.
Responsive redesign of the product page for Brimar Industries' largest e-commerce website. SafetySign's product pages are heavy in content. This made it very important to follow a visual hierarchy for the page layout. Unlike many e-commerce websites this product page has multiple options for the user to select from when picking their SKU (size, material, laminate, mounting holes, packaging). The quantity the user selects will also adjust their pricing tier and therefore adjust the price accordingly. Each SKU meets different compliances which is also important information for the user to understand. The Size the user selects can adjust the viewing distance for their sign, the material selected and adjust the outdoor durability; all of this is important to communicate to the user. This was an extremely enjoyable challenge to work through for me and I am very proud of the outcome and positive user experience feedback Brimar has received on the new design.
Product Page Redesign
Product page redesign to create a more fluid user friendly product selector to increase conversion. The previous product page had a large grid layout for the product options selection. I redesigned the product options of Size, Material, Laminate, Mounting Holes, and Packaging into a more consolidated product controller. This allowed it to be easier for the user to digest the content of the multiple selections they would need to make and allowed them to not get as overwhelmed for the multiple options.
Product page redesign to create a more fluid user friendly product selector to increase conversion. The previous product page had a large grid layout for the product options selection. I redesigned the product options of Size, Material, Laminate, Mounting Holes, and Packaging into a more consolidated product controller. This allowed it to be easier for the user to digest the content of the multiple selections they would need to make and allowed them to not get as overwhelmed for the multiple options.
Signs of Security Homepage Banner
Home page welcome banner to showcase security signs and decals.
Home page welcome banner to showcase security signs and decals.