Wireframes – Graham Todman freelance UI / UX product designer

Sensoria Fitness iPhone app UX design – Wireframes

Graham — Sat, 04 Apr 2015 18:54:20 +0000

V1 Beta

Wireframes for an iPhone app for Sensoria, a super accurate fitness tracker that tells you how well you run. Click here to pre-order yours.

Last.fm charts wireframe & user flow

Graham — Tue, 10 Feb 2015 09:24:04 +0000

The plan for the new charts page was to make it more dynamic by including location and tag/genre filtering. In addition to this we were considering intergrating personal user listening charts. Although user charts were for a later iteration, this wireframe needed to workout the overall IA to prepare for the later development work.

Asset Mapping prototype web app for managing buildings, sites or whole cities

Graham — Tue, 12 Aug 2014 20:33:57 +0000

Wireframe prototype for Asset Mapping. If you are responsible for a new building development or are in charge of city planning, keeping track of the installation and maintenance of hundreds of security cameras, air conditioning units, lights, etc is a massive juggling act. Asset Mapping is an app that centralises all assets feeds and displays everything on an easy to use map and timeline of repairs.

A mobile or tablet version of the app would help contractors find the right place to fit an asset, and it will be easier to find and repair an asset that needs servicing later.

The app creates a real time secure Google map of the physical assets of new developments or buildings or even cities, such as: security cameras, air conditioning units, etc. The CAD file or plan of the development is given Google map coordinates. The app then links up with real time API feeds of the status and location of all assets in one place.

My main role here was information architecture and to prototype the interface. My approach was to break out a navigation structure by themes, separating the modes of viewing the information (by: list / map / table / time) from the hierarchy of asset information (site / zone / level / asset type ).

It is a very complicated piece of software with lots of moving parts, made simple by use of sorting, filtering and folder style navigation.

See Assetmapping.com for more information.

Scrobbler tablet & mobile music app design – wireflows

Graham — Thu, 15 Nov 2012 11:44:36 +0000

Launch flow and "music moods" playlisting using machine music analysis tags

Exploring local music collection with listening data sorting and meta.

Profile screen and music listening stats views

Wireflows for the local music library stats and playlists app I’m working on.

Last.fm tablet music discovery app concept sketches

Graham — Mon, 09 Apr 2012 15:20:28 +0000

Social share UI wireframe

Graham — Mon, 09 Apr 2012 14:48:07 +0000

Last.fm charts concept wireframes

Graham — Mon, 09 Apr 2012 14:19:41 +0000

Concepts for user listening trend graphs for Last.fm showing how much music a person scrobbles from day to day, and how much they are discovering new music or listening to old favourites.

Books With Bite wireframes

Graham — Mon, 09 Apr 2012 14:07:24 +0000

Website wireframes for Hachette publishing to promote their Vampire Young Finction ranges, called “Books With Bite”.

Homepage wireframe

Book list template

Book detail page template

Series list page

Last.fm Festivals app – wireframes

Graham — Wed, 28 Mar 2012 17:18:11 +0000

User flow for festival finder iPhone app

Tablet music discovery app – concepts & user-flows

Graham — Mon, 25 Jul 2011 13:13:09 +0000

Brief: Conceptualise and a music discovery app for WebOS. Timeline: 1-2 weeks.

Concepts, wireframes and visual design for a Last.fm music discovery app. Currently without a stable home (As of 18 Aug).

Wireframes below – the notes have ben removed (so I don’t have to worry about too many typos out in the wild ; ) !

Cold start experience – a way for new users to quickly add artists to their library

Exploring artists and recommendations

Exploring artist’s biography, images and top tracks

Playing personalised radio with slide show and listening stats overlay

GUI doc

Initial sketches of the interaction model