UX – Absa Banking App

Improve Log In

OBJECTIVE:
Improve the current login layout was in order to scale for the next iteration of adding multiple users and other pre-login features, including a UI update to reflect the move branding from Barclays, back to Absa. The layout needed to be optimised without adding too much complexity.

TIMELINE:
1 Week

TEAM & MY ROLE:
• UX Designer (me)
• 2 UI Designers

CHALLENGE:
How might we best utilise the space given that the primary action here is to log into the app?

The existing login screen was only able to have a limited amount of content. Although keeping content on this screen to a minimum was the goal, we needed to add the options for adding multiple users, legal and compliance information and also make provision for other “pre-login” features.

Screen estate was taken up mostly by the keyboard and a big button for fingerprint login (if the phone had fingerprint scanning capability).

UX

Prepaid Electricity on App

TEAM & MY ROLE:
• UX Designer (me)
• Two UI Designers
• Systems Analyst

CHALLENGE:
Provide a consistent experience for all prepaid electricity customers given while maintaining good design principles, while adhering to the regulatory requirements mandated by the different municipalities.

SOLUTION:
The team took a highly complex technical design and crafted a concise simple flow that would not overwhelm the customer.

Intensive collaboration between UX, UI and tech allowed us to display information to the customer that was absolutely necessary.

We managed to cater for multiple error states, despite the technical errors and challenges encountered due to the bank systems communicating with a third-party system.

Micro Interaction

I’m in the Dark!

During one of our design workshops, we discussed the situations that users are in when they need electricity, and it is usually when the the electricty is almost run out or, when they are in the dark, at night, needing to make dinner.

We decided to add a seemingly novel feature to the the final success screen where the token numbers are displayed.

 A torch on/off switch 🙂 A user can see the keypad of their meter if they’re in the dark.

Web Design

Accenture Mobile Retro-Fit

PROJECT: (2014) Accenture SharePoint Site Responsive Mobile Design

OBJECTIVE:
Design and retro-fit Accenture SharePoint internal marketing group sites to  be responsive on a mobile phone.

TIMELINE:
2 Months (for the initial project)

TEAM & MY ROLE:
Project Manager/Web Designer (me)
UI Designer

CHALLENGE

The version of  SharePoint  sites  being used by Accenture for internal marketing and news was not responsive on mobile devices, and the native “mobile” rendering plugins did a poor job at allowing Accenture staff to effectively access the sites on their mobile devce browsers. The system allowed the adding of customer CSS and JavaScript plugins. The challenge was converting the menu and content structure from tables to responsive elements and even converting the table menu to a slide-out menu.

My ability to customise our Accenture client’s internal marketing site to a “mobile friendly” website, by retro-fitting the SharePoint design and adding custom CSS and javascript, allowed us to take on new projects that had not been previously considered.

Once the initial CSS code and media queries was set up, we were free to work within the Accenture brand guidelines and push the boundaries to create good looking usable SharePoint sites.