NZSB E-Commerce Web App

This project belongs to a New Zealand company called New Zealand Safety Blackwoods (NZSB). NZSB is the leading supplier of safety equipment, engineering supplies, uniforms, and packaging in New Zealand. Our project was to redesign their E-commerce website and deliver a Minimum Viable Product (MVP) tailored for their punch-out customers. The company emphasized the need for a responsive website that would work seamlessly on mobile devices.

• My Role: Lead UI/UX Designer
• Duration: 2023 - Present
• Platform: Web & mobile browsers
• Tools: Figma, Mural, Adobe CC

There were several significant challenges in their existing system:

• 1.

  Declining Sales and Increased Churn:

  Over the past couple of years, web sales had been declining at a considerable rate, while the churn rate had increased.

• 2.

  Outdated and Bloated Tech Stack:

  The existing technology stack was outdated, making it impossible to add new features or improve performance effectively.

• 3.

  Inefficient Mobile Experience:

  The website’s performance on mobile devices was subpar, making it difficult for users to browse and complete tasks efficiently on smaller screens. This issue was particularly concerning as 45% of the website’s traffic came from mobile devices, according to Google Analytics.

Through analyzing existing data and conducting usability tests and interviews, we identified three major pain points:

• 1.

  Poor Information Architecture:

  Users were struggling to find products due to cluttered and poorly organized information on the website. This disorganization significantly impacted user experience and satisfaction.

• 2.

  Difficult Account Navigation:

  Signed-in users faced challenges navigating through the "My Account" section, particularly when accessing critical business-related features like orders, invoices, and statements. Given that this is primarily a B2B website, these sections are crucial, and their usability issues likely contributed to the high churn rate.

• 3.

  Lack of Mobile Experience:

  The existing website was not optimized for mobile devices, making it difficult for users to browse and complete tasks efficiently on smaller screens. With nearly half of the traffic coming from mobile users, this was a critical issue.

"To address these issues, we designed a more user-friendly MVP, along with a robust design system that prioritised clarity, accessibility, and scalability. Additionally, we implemented a mobile-first responsive design to ensure seamless performance across all devices."

Mural Board with brainstorming ideas and client /user feedback

Well documented design system

User flows in the design itself

Agile environment where all the work is task oriented

Client management and justifying my design decisions

Previous slideNext slide

• 1.

  Existing Data Analysis:

  Reviewed analytics data and Hotjar reports to identify user behavior patterns and pain points. Additionally, affinity mapping was used to synthesize insights from primary research, helping to uncover and categorize users' pain points more effectively.

• 2.

  Heuristic Evaluation:

  Conducted a heuristic evaluation of the current website to identify potential usability issues based on established usability principles. This evaluation provided valuable insights into areas needing immediate attention.

• 3.

  Stakeholder Collaboration:

  Engaged continuously with stakeholders through meetings and daily stand ups to align on business goals and understand client feedback regarding usability to keep the balance between user needs and business goals.

• 4.

  User Research:

  Conducted primary research by user interviews with existing clients who uses the website to identify true pain points and needs. We mainly focused on user journeys of major flows and sections like buying a product, user account section, product search etc.

• 5.

  Competitive Analysis:

  Examined competitor websites to gather insights and benchmarks for improvement.

• 6.

  Prototyping and Testing:

  Developed wireframes and interactive prototypes. Conducted usability tests on these prototypes to validate solutions and hypotheses, gathering valuable user feedback to refine the designs.

By leveraging these insights, we successfully designed a solution that addressed the identified challenges and set the foundation for improved user experience and business outcomes.