Optical Solutions Australia

About the Client

Optical Solutions Australia is a supplier of fibre optics and communication network solutions nationwide. With a catalog of over 10,000 products, OSA serves a diverse market, including small businesses, government agencies, and large commercial and industrial developments.

CLIENT

Optical Solutions Australia

INDUSTRY

Telecommunications

ROLE

UX/UI Designer

TEAM SETUP

1 Project Manager + 1 Designer

TIMELINE

9 Months

Goal

Rebuild the OSA website to deliver an intuitive, elegant shopping experience that aligns with the company’s growing business model and new service offerings. Focus on the user experience of product browsing, implementation of a new pricing & customer-tier structure, a custom trade checkout & quote process, and visibility and discoverability of the new product hire service.

Challenge

My primary challenge for this project was to understand and capture OSA's feature and functionality requirements for the website redesign. Initially, the request seemed to be for a simple redesign, but as we delved deeper, we uncovered a range of essential services and functionalities that were missing from the existing site. Working within a limited budget and timeline, I focused on translating OSA’s complex internal business operations into user flows that would deliver a streamlined and high-impact user experience. This approach ensured that we could meet OSA’s goals while also providing a smooth and intuitive journey for users, achieving the project’s primary goal.

Outcome

I helped OSA modernise their digital presence and created a seamless and user-centric experience that redefined how customers engage with the site. The OSA Project Managers were thrilled with the results - from the optimised user flows and enhanced functionalities that elevate the user journey - to the sleek, modern design that positions OSA as a standout in their industry.

Discovery

The Process

Kick-Off Meeting: The project began with a kick-off meeting to outline the initial goals of a straightforward website redesign.
Heuristic Evaluation Audit & Presentation: A heuristic evaluation quickly revealed that the site faced more significant usability challenges than initially anticipated. The findings were presented to the client, which led them to identify three additional features they needed to support internal business workflows.
In-Depth User Flow: I developed six complex user flows focusing on key areas: Product Filtering, Product Variations & Bundling, Client-Tier-Based Product Page Variations, and Hiring & Tech Checks. These flows were designed to optimise usability and align with OSA’s new and unique business needs.

Website Audit & Heuristic Evaluation

User Flows & Product Variants Diagram

User Journeys & Wireframing

Main Challenges to Overcome

User Journeys: Given tight time and budget constraints, my research focused on a comprehensive competitor analysis for OSA and the development of a persona and user journey map. This approach helped pinpoint key pain points and areas for improvement, providing a clear foundation for the redesign.
Wireframing: With numerous existing pages requiring redesign but minimal content changes, I prioritised creating wireframes for the site’s most essential features. This allowed us to focus resources on optimising key interactions and user journeys, ensuring a more targeted and impactful design approach.

Persona, Empathy Map & User Journey

Wireframes

Design Solutions

Key Solutions

Navigation Overhaul: I developed a custom navigation system for OSA, reimagining product categorisation by both product type and brand for a more intuitive browsing experience. Through analyzing user flows, we also identified gaps in customer support features within the existing navigation. To address this, I added a new “Resources” section, centralising all relevant support links for improved accessibility and user support.
Product Card Variations: To accommodate diverse user flows of OSA’s four customer tiers, I designed nine unique product card variations. These cards differed in the information displayed—such as product details and pricing—as well as in functionality, including purchasing options, product variation selection, and bundling capabilities. This approach ensured each user received a customised, relevant experience that aligned with their specific needs.
Product Page Variations: This I created six elaborate product page module variations that served customers at different levels, different promotions, public pages and hire product pages. Through multiple testing and iteration stages, we

Navigation

Product Cards

Product Module Variations

Outcome

At the conclusion of the project, I handed over all design assets to the implementation team, who were responsible for executing the website development. The team relied heavily on the user flow diagrams and component library I had built over months of design work. The handover package I provided included:
‍
User Flows: Detailed diagrams that outlined the journey for each new user action.
Page and Feature Variations: Designs for all pages and feature iterations, including different states and responsive variations.
UI Kit: A complete UI kit with clear design guidelines and rules to help developers maintain visual consistency during the development phase. This included typography, color schemes, button styles, and other design elements to ensure the final website matched the intended user experience.

Let's create together.