Case Study
nº1.b
CoA Guide App
Discover heraldry around you.
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
.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
The styling went through many changes through the months. Heraldic lens was always part of the design.
Heraldic Lens
First home screen
initial sketch for the shield section
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.
Figma
Search
Search by entering key words to search the database for a coat of arms.
or
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.
Play
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.
Improvements
Key Colours
Azure #4800FF
Purpure #CC00FF
Gules #FF272A
Vert #00FF4E
Sable #090017