ICN Website Redesign
Crafting a New Design System for Seamless Interactions
Overview
ICN enables businesses to publish and bid on tenders. ICN Gateway supports suppliers in accessing submitting expressions of interest for available projects, work packages.
ICN engaged Exo Digital to deliver a scalable, consistent look and feel for their website. They had buy in from the business for a design language built from their brand guide but they needed a sustainable, responsive website design.
Guidelines to steer any expansions to the website and user satisfaction across their network was critical to their success and the stimulus for this project.
Exo Digital delivered a customised design system, responsive designs for their website and gateway, and recommendations fed by usability research.
Challenge
Exo Digital was tasked with developing a reusable, scalable library of guidelines and components inspired by their brand guide, recreation a responsive, consistent designs from existing designs and conducting usability testing.
Scalability and consistency are crucial to ICN as they ship a number of products to their vast network and have more products in their roadmap for the near future.
Our Proposal
- Discovery
- Scoping and prioritisation
- Design system development
- Responsive web design
- Usability testing
Exo Digital recommended an 8 week project that was split into four phases: Discovery, Refactor, Design and User Research.
The Discovery phase involved competitor research. requirement gathering, scoping and risk identification.
‘Refactor’ was our term for the development of a design system. The Design and Refactor phases were to take place over the first 4-5 weeks of the project and occurred simultaneously.
Finally, the Research phase included prototyping and testing three user journeys with multiple touch points. The outcomes of this research were to be prioritised and organised in the roadmap for further development of the ICN website.
We effectively organised cadences with the ICN team, managed the scope of the project, and delivered high quality work.
The Solution
01.
Scoping and prioritisation
Since the visual style was established and had buy in, a scoping exercise was conducted to streamline the work through each phase of the project.
02.
Refactor
A design library with a foundation referencing the brand guide, and reusable, responsive components and patterns was produced to support the design of ICN’s new website.
03.
Design
ICN’s new website was designed for three breakpoints using the new design system produced in the refactor phase.
04.
Usability testing
Users from ICN’s network were recruited to participate in a moderated usability test for four journeys through a desktop prototype as a first step to future iterations.
Consulting
Establishing success metrics and expectations
With any new project, identifying stakeholders, success metrics and expected outcomes for the project is an effective first step in bringing the team together and getting everyone on the same page. This exercise was conducted in a scoping workshop.
Organise requirements
We covered expected scope for each phase in the project and then broke the work down into two buckets: ‘must haves’ and ‘nice to haves’. The ‘must haves’ were completed within the agreed time frame and the ‘nice to haves’ have been formulated into a backlog, which can be worked on over time.
UI & UX Design
Design System
One of the main problems identified in our scoping session was the lack of scalability and responsiveness of the existing designs for ICN’s new website. We needed to take a step back and build a system of rules and components that could be applied to their website as well as any expansions and other digital products that ICN might develop in the future.
Responsive Web Design
The design phase for this project involved building out responsive screens with a consistent visual style that could be scaled as needed. We delivered close to a 100 screens across breakpoints including multiple journeys and content page templates.
Prototyping
We built a prototype mapping out three key journeys for the primary users of gateway. Users were recruited from ICN’s network of businesses to participate in testing. We facilitated moderated, think aloud sessions virtually.
Research Outcomes
The sessions were recorded and analysed for insights. The insights were compiled and summarised into recommendations, pain points and ‘how might we’ statements that were prioritised and added to the product roadmap for ICN’s website.