folio
labs
about
contact
#no
#no
0
Client
TITLE
A short description here
#no
#no
01
02
Stomp application
03
04
05
06
07
08
09
10
11
12
Worked
With
Tip-Top
Brands
*
Apps . 2D / 3D . Web . Mobile . Art Direction . Front-end . Concepting . Storyboarding
what i
love & do
UX & UI
Motion
ETC
Secure Area
Access Denied
This project falls under NDA and is therefore protected from public viewing.
Website - Desktop
Website - Mobile
Booklet . Logo design . Business cards - Print
View Concepts
Logo ideas - Conceptual
Low FI - Wireframes
Website - Desktop
UI Assets
In game shots
Stomp App posters - Promo
View Concepts
Game - Flows
Low FI - Wireframe
Logo ideas - Conceptual
Mid / High FI - Wireframe
Secure Area
Access Denied
This project falls under NDA and is therefore protected from public viewing.
Secure Area
Access Denied
This project falls under NDA and is therefore protected from public viewing.
Respimat Product Demo - Explanation
High FI - Wireframe
OOH - AD
Prelaunch - High Fi - Wireframe
Launch Final - Mobile
Product Hero - Artworking
Product lander
View Concepts
Low FI - Wireframe
Prelaunch product website
Launch product website
View Concepts
Concept sign up for product page - Prelaunch
Low FI - Wireframe
GS2 - Print & Motion Ads
0
LABS
past and
future ideas
UKCN
App Pitch
17 July 2017
This work was produced for a pitch I was working at the time whilst at Neobred. We approached UKCN and proposed a few updates to their current application. This was simply a mock idea of how their new application could possibly look, but time was of the essence and I had to come up with a quick look and feel to present. This took about one day and the rest of the UX process will follow providing they liked the approach.
Digital
Ex's
11 October 2017
Over the years I have created a few portfolios, some made it live and some were purely experimental also to see reactions of users and collect feedback from them be it friends, colleagues or just the stranger on the other side of the world that sends you an email saying he loved your work. This segment contains a collection of designs, motion and interaction ideas to hopefully inspire you.
Website | 2016 - Desktop
Website | 2016 - Mobile


Experimental Website | 2015 - Desktop
This site made it on CSSDA's articles on the " Power of Typography" which is awesome.
It then went on to win a couple of design awards.
Bad
UX
14 November 2017

HSBC Banking Website


As an avid everyday user of interfaces be it apps, web, or any device which requires human to computer interaction it really baffles me that I still encounter obvious usability issues in 2017. In this brief study I will be looking at the HSBC website which I’m an actually user of. The issues below frustrate me so much I thought I would do a little “expose” of it, so hopefully an awareness of these issues could be known and sorted.

UX Issue 1


So the 1st thing I want to do as a user is log into my account. It takes me a whopping 3 clicks from the homepage to do so. Why do 3 mouse clicks seem dramatic at this point? – Well it does due to major interruptions / distractions like opening a new tab, pages are not consistent visually and opening terrible pop-up windows (what if I had an AD-blocker). If all this has a rational behind it I would love to know but without context, having this sort of user journey isn't great!

UX Issue 1 - Continued


Once you finally succeed authenticating yourself and selecting relevant user account you’re then presented with an out of place looking UI. But to save time and not completely rip into the many holes of UX on the HSBC system I will mention another factor that really frustrates me as a user.

UX Issue 2


Want to try to download multiple statements!? – Good luck with that! – Their radio button solution enables a one at a time download which in fact isn't the best option. A more flexible, user friendly solution should be presented. What happens if my accountants needed me to download 20 statements?, things could get interesting then right?

Solution


A simple off the cuff solution for issue 1 would be to eliminate unnecessary clicks and permitting the user to ideally click once on the “Business” link and then user prompted with credential / authentication screen ideally within parent window eliminating the pop up.

For issue 2 I would simply have tick boxes instead of radio buttons to enable users to select multiple and specific files they would ideally like to download. Multiple download files could then be packaged and zipped with an appropriate file naming convention.
E : info@johnjattoh.com
T : + 44 (0) 7964 243350
Other : CV | Email
A
BOUT
My life is design, I live and breathe it with passion and my appreciation for it knows no bounds. I believe that life is all about progression and furthering ones knowledge to eventually one day become a master of his art.

I'm also a passionate "Cook" and enjoy the finer things in life like music, beer, doing graffiti / doodles and spending time with my girls.

I’m very much a futurist with a deep love for technology and what it brings.
E
XP
Over 10 years experience in the design field and continue to always keep up with the times and trends. Proficient in the entire design life cycle and working to UCD principles, I utilise my expertise with the appropriate tools to solve problems.

Privileged to have worked on great projects for blue chip companies and also won a few web awards over the years.

Toolkit. Sketch . Photoshop . Illustrator . Axure . Balsamiq . Invision . AE . C4D Etc