top of page

Case Study


CoA Guide App

Discover heraldry around you.

iPhone X Mockup_edited.png

The Problem

People don't know that there is a hidden story about London all around them. The hidden world of coats of arms can tell you more about where you live. Who lived where and who owned what and when it all happened.

The narrative is unfortunately behind closed doors.

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.

It should link in with the College of Arms website.


User Personae

Ben_Platten_GDN_3000_FMP_ProcessBook 32.png
Untitled (3).png

Mapping out the App

The user flow for the website was condensed to fit the needs of the app. Rather than learning, the app focused more about discovery  

above: The userflow for the website.

below: The apps userflow.

Wireframing and Lowfi

Asset 2.png

The styling went through many changes through the months. Heraldic lens was always part of the design.

Heraldic Lens

First home.png

First home screen

first learn.png

initial sketch for the shield section

second learn.png

Initial learning index.

The entire site made in figma. Of course it wasn't fully interactable, still it gives a good replication of a real app.

I like how you can see the separate sections based on colour theming.

Screenshot 2023-08-10 at 14.33.06.png



Search by entering key words to search the database for a coat of arms.


Snap a picture of it with heraldic lens and using machine learning the app will comb the database to find the right coat of arms.


Games that help users practice their Blazon skills. They can make their own coat of arms from blazon.

Users can also, using treasure hunt, try and find a coat of arms that is around them.

The initial home screen was minimalistic. The feedback was however that having left-aligned navigation was uncomfortable to right-handed folks. I being left-handed didn't consider this. This was an opportunity to refresh the home screen. I added features to it and changed the nav bar to be more consistent with the rest of the design which helps users navigate the app more effectively. 


Key Colours

Azure #4800FF

Purpure #CC00FF

Gules #FF272A

Vert #00FF4E

Sable #090017

bottom of page