Role: Responsive UI Design |
Project: Redesign |
Agency: Foundry119 |
The Challenge
To create a clean, usable, responsive design that would improve the shopping experience and convey a credible company with high-quality products, as well as showcase new LED lighting solutions. Challenges included lack of access to quality photography at design time, and complicated multi-tier menu structure.
The Solution
Professional typographic design, careful color selection and a clean layout conveys a fresh, modern aesthetic, and a credible company with quality products. The vertical sidebar with large, fly-out mega-menu on desktop allow users to get deeper into the site with fewer clicks.
Before
After
Laptop and Desktop Navigation
A vertical sidebar for navigation options makes best use of space in laptop and desktop devices. A fly-out menu for product categories aids product findability by giving users a bird’s eye view of navigation choices. Menu options are divided into groups so the user can visually compare choices without having to rely on short-term memory.
Navigation on Tablet and Mobile Devices
On tablet devices, the vertical column collapses, and the mega menu for product categories becomes available from the horizontal menu. Mega menus were chosen based on research at the time as a best practice for large-scale e-commerce sites with many secondary and tertiary categories. With careful layout and design, product categories and subcategories are visually grouped to enhance scannability. Mobile devices employ a mobile menu with expandable submenus.
Design Files
I designed the site on a 24 column grid to allow for more flexibility. I created a desktop (1200), tablet (768) and mobile (320) version for each of the 6 page layouts – Home page, Category landing page, Products landing page, Product detail page, About Us page, and Contact page.
Development
Although the agency’s developer converted the design into a Shopify theme, I developed the home page myself in Bootstrap to test, communicate layout changes at breakpoints with developer, and work on my front-end development skills.
It can be seen here.
