The Client

Johnson Matthey is a British multinational speciality chemicals and sustainable technologies company. A lot of the UI design work for Johnson Matthey was around charts and tables which set a challenge on how it would look responding down to mobile.

JM Hero image thin

The Brief

Working on Johnson Matthey I was briefed to create page templates which included a responsive chart, price tables, and contact information regarding their precious metals data. The project team consisted of me as UI design, a UX designer, Project manager and a Business analyst. I worked alongside the UX designer who created the initial user journey and wireframes which I developed upon to create the final UI as well as working closely with the Business analyst to make sure the data shown within the design was correct. Upon finishing the brief I broke down the design into components which I handed over to front end development within the project functional spec.

JM Respons

Style Guide

Johnson Matthey had already supplied me with a style guide as they were already a legacy client before the project. However, I decided to take the style guide and create it as a sketch library in abstract so that I could easily keep consistent with it while I designed the UI.

JM Styleguide

Designing Components

With Johnson Matthey being a legacy client I already had page templates and a style guide created by another designer on the team to work from. This meant that I had to create components that followed the style guide and could come together to create the page templates for the new user journey.

JM Components

Wireframes to Design

Working closely with the UX designer on the project, I began creating the UI based on the wireframes that were created. I used different colour combinations to help break up information on charts and tables so that they are easily readable by users.

JM Wires to design

Responsive Design

For this brief, the designs needed to be responsive for mobile. This set a challenge with charts and tables but I made sure to take the steps needed so that they maintained their information from desktop when viewing on mobile.

JM responsive2
JM responsive 1

Retrospective

Working on Johnson Matthey I got to expand my design skills with designing charts and graphs that surrounded a lot of data. I enjoyed this brief with the way that it challenged me on how to correctly communicate information through UI. I also expanded my experience with working for a legacy client and how to correctly design style guides and components that fit an already established brand.