GoChart – Account Settings Window and Home Tab

The account window of the GoChart is where all the information and settings for the application were located. Later, the idea of adding a “Home” Tab was brought up. It had a number of positives that would lend to structuring the program. We could put all the “Non-trading” Widgets in here. The intent is to come here in the morning and read up / plan your day.

This also allowed the separation of the Account Setting and The Home tab based of inward (management) and outward (communication) intentions.  This also gave some features greater visibility and other items less.

This lead to the structure that is in now the invision wireframe.

Invision from Account
 
Invision from Homepage

Applied Concepts

Concept:

I am sure there is a technical name for this. While designing the  account sections, I would access whether the inputs were important enough to make the user deliberately click on an edit button or if this was an unnecessary step. If the consequences for interacting with the field or button were harmless I left them exposed. For example changing your credit card is a much bigger deal than changing the color of the background. So the interface should reflect this.

Sketch Mapping the Home Tab:

The fixed screen height of the application was causing me to have issues designing for the home tab. By chance I clicked the “I need inspiration!” button in Balsamiq and came across InspireUX, Catriona Cornett’s blog and portfolio.
This post I specifically found interesting for my current problem:
I used this to ideate on three elements I was having issues with, the left hand navigation, the profile area, and how the sections would be structured.
Chicken scratch example: http://imgur.com/eEvlSu7
I then these ideas sketched again in Balsamiq: http://imgur.com/eEvlSu7
From this, I fairly quickly came to some conclusions. First, another horizontal interactive element was too much and Second, the profile image size was what was dictating  the layout based on where it was and what section of the layout it lived in.
I learned that given a situation where I had some freedom to change the layout I gave some attention to other options so that my chosen direction is more confident.

Organizing the Account:

GoChart was built of an an existing trading framework. Working off feature lists,  I integrated the planned additional functionality with the existing options and to organize the account tab into meaningful groups.  I designed a improved clearer interface that still was in line with the existing architecture.

By creating each individual account widow, I found redundant entries and exposed hidden extra screens. Creating something like this is a good at illustrating all the hidden work the would go into the development as well as how a seemingly small change can have widespread effects.

Later, the concept of a homepage was introduced and with it came another list of features. I made the decision to keep the account section for inward  actions and the home page for outward or public action.  This could also be seen as constant versus occasional use by the user.

Discoveries

What worked

  • The sketch mapping was a good fast way to at least give a token thought to many different layout options and explore the other ways she uses them for myself. I should do more presentable versions in the future.

What what Didn’t Work

  • Designing from a huge list of  features is ineffective and a lot of time is spent on how and not why.