top of page

In a marketplace where customers are looking for fast access to solutions and real-time updates on product availability and supply status, the broader Opal business has identified that it needs to engage with customers through multiple channels, as Opal has limited digital engagement with customers.

Bringing Opal operations
into the digital space 


Platform & Tools

Adobe Magento, Figma






About Opal

Opal is a new and innovative renewable packaging company which is part of the Nippon Paper Group. While the business was formed in 2020, it represents the best of two companies that have a shared history of sustainable manufacturing in Australia and New Zealand stretching back to 1868.

The process

From the project kick-off,  we had to dive deep into their business model through different workshops to understand their requirements, processes and customer interactions. 

Using this information, we identified challenges and areas to improve. The solutions for these were presented in wireframes and examples based on the landscape review. 

Once all parts were aligned and agreed upon, I designed the high-fidelity screens for the most relevant pages.

Category and information architecture

We worked alongside the SEO team and client to understand the wide product range and priorities, in order to create a new information architecture. This understanding was then translated into the design in an illustrative form to create a simple and clear visual direction for users.

Multiple customers

The ‘my account’ design has different views depending on the type of customers. B2C customers had a simple view to see their orders, details and wishlist products.

On the other hand, the B2B customer view included important features, with the ability to switch between users within the account for administrators, and edit and approval permissions, including a Simple UI with intuitive UX that allows B2B customers ease of ordering and reviewing history.

Bundle options

With multiple bundle options and prices, and ability to quickly add to cart, the display and execution was a key point.

Designs needed to be clean, detailed and, importantly, optimised for mobile.

For the desktop version users are able to see price per bundle, with a dropdown option to select the type of bundle and the quantity, which instantly displays the final price to add to cart from the category page.

As mobile view has reduced space, the displayed information was summarised with starting price and number of bundles available.

Checkout flow for different customer journeys

With different types of users we required a checkout flow for each of them, and an easy signup process for new customers.

A simplified checkout option was added to allow fast guest checkout on Magento, with integration of click and collect options that included store information, the functionality to select previous information (address and payment methods), provision to create a B2C account, and credit approval workflow.

UI Design

Opal Brand guidelines included several colours that work together, and need to be included proportionally, to create an engaging and bright design.

The design also needed to be clean and easy to navigate with intuitive and effective information architecture, clear call to actions, high quality imagery, and responsive across all platforms.

Quotation tool

Opal sales representatives needed to be connected with the new website and make sure all transactions happened in the digital space.

We created a quote system where sales representatives could search, create and view clients' profiles, items and quotes with the ability to send quotes for approval to clients or managers.

​The layout was simple and included all client requirements with an excellent user experience.

bottom of page