Case Study
nº1.a
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.
WireFrames
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.
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.
Design
Menu
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.
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
The button expands and hightlighs purple to show the user where they are.
Home button spins in the corner and scrolls with site
Information
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.
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