Klarian.

During my near 4 year tenure at Klarian ltd, I assisted with the creation of the frontend from designing, building, testing and implementation. Initially I started as a Jr. Frontend Developer, creating reusable components within the frontend as well as surfacing and styling JSON payloads. I then progressed into a UI/UX focussed role thanks to my strong design skills, appreciation of software development and ability to empathize with customer requirements.


I became the lead for UI/UX within the company and regularly worked alongside head of technology and software team to create a frontend that had accessibility closely in mind, ensuring regular manual testing and the usage of accessibility checker tools. I was responsible for creating the application color palette and comprehensive design guide in line with the company rebrand, as well as design documents. Day to day I would be designing and implementing UI components in accordance with client requirements, as well as providing feedback to current development builds, in line with UX.


Below you will be able to see some examples of elements I have both designed and styled within the Django templates.

The Klarian frontend in both light and dark mode, featuring a basic device list. Styling implemented by myself.

An image of the Klarian frontend in dark mode, a list of tickets is featured in center screen An image of the Klarian frontend in light mode, a list of tickets is featured in center screen

A preview of the Klarian design style guide created by myself as a result of the company rebrand. I produced multiple color palettes as well as extensive design best practices for current and future developers.

An image of the Klarian design style guide featuring different color palettes used on the frontend and narrating text

A UI component mock up of a device card for the frontend map view with light and dark mode considered.

An image of a device mock up design in dark mode and light mode

A UI component mock up of a dialogue box for the frontend map view with light and dark mode considered.

An image of a dialogue box design for the map view in dark mode and light mode

Another UI component mock up of a dialogue box for the frontend map view with light and dark mode considered. This can be seen implemented in other screenshots.

An image of a map point dialogue box design in dark mode and light mode

Above is a weather app component I designed and created using Javascript (vue.js) within the first iteration of the frontend application.

An image of weather component displaying different weather forecasts across a week

The Klarian frontend in the dark mode map view, within an device mock up created for demo purposes, highlighting mobile responsiveness implemented by me on the frontend.

An image of the Klarian frontend in dark mode on a ipad mock up

Map icons created for the map view on the frontend.

An image of a map icon with a question mark in the center An image of a map icon with an exclamation mark in the center An image of a map icon with a computer chip like image in the center