::::: The Challenge :::::
The challenge in e-commerce was that each regional and country-specific site had been managed separately for over 15 years. This led to a disconnect between the sites of different countries and inconsistencies in styles, fonts, colours, and sizing. The team attempted to apply print guidelines, which resulted in a compromised colour brand guideline for the web. This resulted in the sites being non-responsive, appearing untrustworthy, and lacking brand consistency.
::::: The Solution :::::
A web-specific color palette and a design system were essential to start building pages and templates. I developed the design system and templates for the e-commerce platform using atomic design. I worked closely with the engineering team to enhance the websites and roll out new page templates for Product Detail Pages (PDP), Product Information Pages (PIP), and Landing Pages for new product launches.
::::: The Result :::::
::::: Design System :::::
When I was assigned the task of working on the website, my first observation was the need to clean up the site and focus on essential aspects like standardizing the fonts and design system. This involved ensuring consistent use of fonts, establishing brand recognition, and creating a uniform user experience across the site. These efforts are vital for building user familiarity and trust in the brand.
::::: Homepage refresh :::::
The SIMRAD homepage underwent a comprehensive refresh, resulting in a notable increase in user interaction compared to the previous version. By bringing the core product range and categories to the forefront, users now have full visibility and easy access to these key features and products. This approach proved to be a great success.
::::: Product Information Page :::::
The design system and font standardisation have been applied to the product information page template, this has been used on the majority of products across 18 countries.
::::: Product Information Page for NSSevo3S :::::
::::: Product information page on commercial :::::
::::: Product description page template :::::
::::: Category page for products :::::
My web design process
My standard web design process involves collaboration with the relevant teams from start to finish, including the following steps: Briefing, sketching, conceptualising, gathering review/feedback, obtaining sign-off, handing off, and conducting user acceptance testing (UAT) before launching the site.
::::: Product information page template exploration for NSSevo3S :::::
::::: Product information page template exploration for NSX :::::
::::: Product information page template exploration for HALO Dome Radar :::::
::::: Other category page template explorations :::::
::::: Digital ads explorations :::::
