Good design is easy to digest—the brain shouldn’t have to expend a ton of energy to figure out what the heck it’s looking at. With any luck, people will just “get it” without needing a 6-section explanation.

How to UX the hell out of Account Management

TD;LR; Good design is easy to digest—the brain shouldn’t have to expend a ton of energy to figure out what the heck it’s looking at. With any luck, people will just “get it” without needing a 6-section explanation.

KISS (Keep it simple Stupid)

For user accounts, the default user experience should be as elegant and as simple as possible. This UI animation below, goes some way to filtering down what was essentially the most simple mobile navigation I could get stockholders to agree on. As always, there will be compromises, (inline personal information editing. for example) but overall keep the Three Little Rules (scroll down) front and foremost.

Three little rules

Online accounts give users privacy, control and a personalised experience. Account management is a necessary evil. Except when it goes wrong, no user likes or cares about account management, they just want to access the service.

3 Acc Mngt Rules – Nn user guesswork, be usable and barrierless

You can make account management less evil by following these three little rules:

  1. Don’t make the user guess – Almost every service on the web handles account management slightly differently. As a result, you have to be explicit about the requirements for your service. Otherwise, you’re just being cruel.
  2. Balance security with usability – Often, security folk will insist on an approach that compromises the user experience. This is foolish, because poor usability will lead to workarounds, and workarounds in turn lead to weakened security. Instead, aim for a design that is both secure and usable.
  3. Keep it simple – Account management is one of your biggest potential barriers to usage. Make the barrier practically invisible through a simple, seamless, pain-free design.

Account Management – Responsive wireframes

Recently I have been involved in the UX for Account Management for a worldwide responsive gambling site with over £7M in transactions daily, and nearly 4M registered users. This was my proposal;

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_02

Wallet Summary – Tablet landscape – 1024px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_04

Wallet Summary – Tablet portrait – 768px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_03

Wallet SummaryUX – Mobile – 320px – 425px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_05
DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_06
DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_07

Wallet Summary – What the hell is it?

A user account should provide the following static, user-specific content:

  • Personal Information / Contact Information
  • Security Information
  • Links to members-only content areas
  • Deposit and withdraw, bonuses and global settings
  • A User’s history

Bet History UX – Tablet landscape – 1024px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_21

Bet History UX – Mobile – 320px – 425px

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_22
DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_23

My Bonuses best practice

Here’s a list of best practices (although not always possible!) that make user accounts more usable:

  • Inline Editing
  • Safe Editing (Undo features)
  • Reading a users account information back to them later.
  • Delete/Save/Export/Import Options
  • Security Features
  • Deposit and withdraw, bonuses and global settings

Tablet landscape – 1024px
DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_36

Mobile (320px – 425px)

DEI_ResponsiveWeb-AccountManagement-allsizes-UX_Page_37

Conclusion

So now that we know some of the things that should go in a user account, how can we help users access their account?

Dedicate a link to the account. Most users expect to access their account information via the top right or top left corner of a website, with the preference being the top right. Here I used a “Hub and Spoke” architecture—a landing page that links out to individual sections.

Other options included a drop-down menu to give the user all of the choices at a glance. At the end of the day it you and your team that should choice the right method that suits your stakeholders.

Pssst… here is sneak preview of the final UI

DEI_ResponsiveWeb-AccountManagement-UI-Sportingbet_Page_02
Wallet Summary UI – Desktop (1440px)
DEI_ResponsiveWeb-AccountManagement-UI-Sportingbet_Page_04
Wallet Summary UI – Mobile (320px – 425px)
RussellWebbDesign: Get your fill of UX trends, case studies and best practice

Pique’d your interest?

This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.