Extra user CP pages which show custom profile fields

[Earl Grey]

Hi there. I was wondering if I could get some help in achieving the following:

I am setting up a RPG site where each user account has 'character' information as well as 'user' information. The character information can get quite detailed (upwards of 30 custom profile fields), and so I'd like to put all these fields on a new page within the user CP (and take them off the "edit profile" page).

At the same time, I'd like to code how these fields display in the user cp by myself (as in - not leave it to the default array). I have the PHP in templates installed which I'm sure will be of some use in achieving this.

I've provided some print screens below of a site which has achieved what I'm trying to do:

http://i.imgur.com/1NnS32L.png
http://i.imgur.com/CLMR9Mo.png

I'm still finding my way around PHP, so will need some help, but I can see this involving two stages:
1. creating the custom page in the user cp which includes the capability to modify profile fields
2. hard coding the profile fields on each page

I'm grateful for any help that can be spared <3