top of page

Case Study


CoA Website

A website to demystify Heraldic science  


The Problem

Most texts on heraldry are written in archaic language and use dated visuals.

Heraldry can tell a story about a person or place but because of the adherence to tradition and pedantry, this knowledge is being lost.

The Brief

Create a website that explains coats of arms and (creating arms) without talking down to or confusing the user.

The colour scheme should be fun and modern. As well making sure the copy is easy to understand, even for those whom English is a second language.

User Flow

A selection of user Personæ so I could generate a sense of what the users might need for a learning platform. the app was more focused on local discovery whereas this was an educational website to explain the misunderstood aspects of heraldry.   

From this, I made a user flow diagram to determine the correct flow for the website and app.  My biggest fear was that the site's architecture would be too confusing so I had to make the sections very clear.

Screenshot 2023-09-11 at 10.20.59.png


I made wireframes based on this information and actually brought it to the College of Arms as a proposal. I did get feedback on it. Which was useful.

Based on this website that I loved I laid out the College of Arms website. Instead of using symbols I used colour to indicate sections.

LoFi Mockup

I mentioned earlier that I was given feedback that was after I had already made a low-fidelity mockup of the site. One thing that was said was that I had tried to make the site too modern without respecting the past. It was stated that not having any explicit reference to heraldry visually was confusing to an audience.

This was exciting to me because it made me realise the fact that I have to not think like me I had to empathise with a user who had no idea what heraldry was which was a fun task.

New Iteration

The feedback meant I had to go back to the drawing board. The discovery feature which was just some tidbits on heraldry became the main focus. I had to make heraldry, which can be a dry subject interesting to a new generation. The key though was not talking down to 

 them. I had to use not simplified words but what was in common parlance and a tone of voice which was not patronising. This is easier said than done because most text on heraldry uses archaic language that would confuse the modern reader.

Main page.png

This website would teach people blazon: the language of heraldry and developed for the College of Arms in conjunction with their Field Guide App.

Fun Fact

The video of me in the beginning represents how the site would use the users webcam. This is because heraldry is as much the bearers identity as their very own face.



The overriding colour used is this royal purple and the green is used as it was bright and wasn't common throughout the rest of the site so it stood out.

Screenshot 2023-08-09 at 18.32.09.png

I used the original blazon (language coats of arms are described with). Tincture = Colour

Escutcheon = Sheild

Charge = Symbols 

after testing it was shown that it was too confusing for users.

Title font

Eskapade Fraktur

Body font

PP Neue Machina Inktrap light

Screenshot 2023-08-10 at 10.51.56.png

The button expands and hightlighs purple to show the user where they are. 

Home button spins in the corner and scrolls with site



A big portion of the project was creating a consistent way of delivering information without overwhelming the user. Images were favoured in conjunction with text.

Screenshot 2023-08-09 at 15.33.09.png

Red body font = emphasis

Fraktur = Blazon

This is a subtle hint to show the user what they are looking at is blazon. Subconsciously enforcing the link

Key Colours

Purpure #CC00FF

Azure #4800FF

Gules #FF272A

bottom of page