ScentAir is on a global mission to enhance environments, brands, and experiences through improved air quality and the power of scent.
Scroll down to view more.
Frontend Development, Magento, UI Design
November 2021 - April 2022
ScentAir aimed to consolidate three web properties into a single B2C global Magento e-commerce experience. There was short deadline to launch a MVP (minimum viable product) version of the site by the first quarter of 2022.
As part of the consolidation project, the frontend component was broken into four parts, to be completed in three sprints:
We broke the research process into multiple components to throughly investigate areas of improvement for the site.
After I completed the workplan for the frontend components, I developed the custom platform theme by completing the base styles, home page, and mega menu.
Placing more emphasis on ScentAir's products in different environments, the home page illustrates the brand's versatility and reputation.
Move mouse into the box below to scroll through the design
Home Page
We adjusted the site to be compatible with mobile and tablet devices across all browsers.
We opted for a vertical and stacked layout for both mobile and tablet for easy scanning.
We set hover and focused states to have the same styling to maintain mobile compatibilty.
Move mouse into the box to scroll through the design
We added a mega menu to showcase ScentAir's products in a visual manner. This gives customers an idea of the available diffusers and fragrances at a quick glance.
Menu dropdown for the “Scent Diffusers” navigation item on desktop
Menu dropdown for the “Fragrance” navigation item on desktop
The mobile and tablet view of the mega menu condenses the header navigation into a menu that slides out from the left. The navigation items become accordion tabs that can be expanded to reveal more information. We updated the layout here to be vertical and stacked to make use of the space and dimensions available for mobile and table screens.
The “Fragrance” tab condenses the most. Instead of displaying images representing the scents, a simple colored dot reflecting the scent's color scheme is presented next to the name instead.
Mega Menu Mobile
Diffusers Mega Menu
Fragrances Mega Menu
I got to work on a project that was on a global scale for the first time. This was also the first time I worked on a project with such a short deadline. It was a valuable experience that taught me how to workplan and develop for a larger project while taking many factors into consideration.