Covalent

Translating graphics into an accessible, responsive website

Product Type
Marketing website
Contribution
UX audit and design updates, UI kit, feature additions, web page design


Goal
The goal of this project was to translate graphic design mocks for a marketing website into a strong user experience that would pass accessibility standards and enable developers to build from. The project was done for a quantum computing software client, Agnostiq, who had worked with a graphic designer to establish the brand and visual style for the website. While the design was aesthetically strong, accessibility and user experience were not considered during the design process.

​​​​​​​

Approach
The first step I took was conducting a UX and accessibility audit, making note of issues such as typography sizing, contrast, image resizing, hover, active and success states, scrolling behaviours, design inconsistencies, interactivity, filter functionality for blog posts and missing pages such as a 404 page and a policy page. 

​​​​​​​
Design and Outcome
Once all these revisions had been made to the desktop designs, I then adapted them to be responsive for mobile and tablet. To streamline the development process for devs, I created a UI kit to have a source of truth and standardization.
Back to Top