Combining two mobile apps for a unified experience

Mobile UX

Commonwealth Bank had two mobile apps where the Commbank app was used by majority of CBA’S mobile customers despite being limited to features that Kaching provided. Due to the overall usability and functionality of Kaching, the decision was made to bring inspiration from Kaching’s designs to the Commbank app to unify the two apps.

Working within a team of 3-5 UX designers, a concept was created to introduce a dashboard which surfaced payment options as they were the most used features (which also included Kaching’s social payments) and an off-canvas navigation to separate the users’ tasks.

The work was laid out to plan and sort the screens which required changes as well as the measure of how much effort it would involve.
sort

Flows for existing screens which required header changes or new component designs were included.
Flow_Pay_someone_Mobile_and_email

Flow_Transfer_between_accounts

New flows were created which included an improved registration process and on-boarding to the new app.
uniapp_flow

A specification document was produced for all screens with annotations and interaction details.
uniapp_documentation

Previous design of CBA’s app:
479859_601456163201034_2002564817_n-640x426

A fresh look and feel for the CBA app with lifestyle imagery.
Visual designs are not my work.
screen568x568

Designing for Call Center Agents

UX

IMG_1737

Brainstorm

Sketch - round 2

Sketch - round 2

Sketch - round 2

Sketch - round 1

Salesforce - Flows

Salesforce - comparative

Component – Custom console component1

Mindmap

Wireframes in prototype for user testing round 1
wireframe

Visual design in prototype for usability testing round 2
Screen Shot 2015-12-08 at 15.12.24

Screen Shot 2015-12-08 at 15.11.05

01 – Discovery Phase – User Research
02 – Design Phase 1 – Sketches WIP
03 – Design phase 1 – User Feedback

Introducing UX design to high school interns

UX

For six weeks, I teamed up with a co-worder to help introduce UX and UI to five talented (still in high school!) front-end developers completing an internship with the #builtbygirls #girlswhocode program.

Every week we planned fun, working sessions where we sketched, discussed and analyzed the design and content. More importantly, we emphasised the importance of collaboration and teamwork.

In hindsight, it should not have been so surprising that it was the endearing interns who made it enjoyable for us. They never ceased to impress us on how swiftly they could adapt and “fill in the gaps” with low fidelity wireframes and missing design assets. Every week we would witness their progress in leaps and bounds with their ability to prioritize important questions, and also fearlessly communicate their opinions.

builtbygirls Cambio

unnamed6

unnamed-5

unnameda

Design workshop

BBG at Facebook

It was a very valuable and rewarding experience. We gained a lot of (and somewhat frightening) insight in the new wave of talent coming into our industry.

Moving from mobile to tablet – Commbank Tablet App

Banking Mobile UX

Third time back at Commonwealth Bank Australia in Sydney fora one month contract helping out the Tablet app team.

I lead the UX design in my project stream to implement the Cards view within the Account details. Functionality included the temporary card lock/unlock functionality which I lead the UX design on the Commbank mobile app.
tablet prototype

App available in iTunes and Google Play
CommBank app for tablet on the App Store on iTunes

UX process & team communication

Mobile UX

In an environment where the UX team is constantly pushed for time and growing in demanding numbers, the need for process and structure is vital to ensure the quality of work within the team. It was the urgency and never-ending challenges that initially attracted me to Commonwealth Bank (CBA), which is why I returned to the team a few months after my initial contract as new challenges would be expected. That challenge involved adjusting to the vast change in process and structure.

Joining the mobile UX team was a natural transition, as a strong agile process was steadily in place. Each feature in the mobile app had its own project team, and the UX team were spread across seven streams. Every day the teams were evolving and adapting new methods to ensure work could be openly reviewed, tracked and shared.
IMG_0951

Inception workshops were conducted and run by UX leads involving the entire project team. This allowed the team to align on ideal user journeys, sketch ideas and discuss its feasibility.
IMG_1587

A collaborative team software was used within the team for product owners, designers, content writers and developers to reference and feedback on. For the stream I led in the mobile project, up to fifteen flows were created to demonstrate the possible use cases including edge cases. Each individual screen was also uploaded but replaced with visual design when available.
flow_-_temporary_stop_-_multiple_cards

In every two week sprint, usability testing was conducted by the UX Research team. An Axure prototype using objects, variables and logic was built for the entire mobile team to use across all seven streams. It allowed each individual in the mobile UX team to swiftly update the mobile prototype every two weeks with ease.
IMG_9561

The room in which observers could watch the usability testing was converted to a temporary war room where issues or comments could be consolidated; and possible resolutions could be discussed throughout the session. The set-up permitted the entire team to collaborate and also rapidly update the prototype if required for further testing.
IMG_1466

IMG_1480

Project stream I lead the UX designs for involved the ‘Temporary lock’ features for credit and debit cards. The features allowed users to control how their credit card gets used: lock international transactions when you’re not using them, or set a transaction limit to manage your spending, as well as lock and cancel missing credit cards, or replace a damaged card.

Screen Shot 2015-01-26 at 13.58.28

IMG_1613

IMG_6290

UX mobile team scrum board was used daily with strict time limits. It opened up the conversations for people inside and outside the teams.
IMG_1618

Our avatars.
IMG_1620

Online charity donation experience

UX

Engaged in a three week project with Cancer Council NSW (CCNSW) as to research, design and test the user experience. The project involved redesign and implement best practices for the online donation forms (mobile and desktop).

Stakeholder interviews were conducted with CCNSW’s marketing, development and product owner teams. Key findings included users being confused with the existing donation forms which were split into three to cater to once-off donations, recurring donations and in memoriam donations.

Three different donation forms
Existingforms

Analytics
Review of analytics were used to get a general idea of the websites performance. It gave an insight that users were dropping out of donation forms to the ‘Contact’ page.
GoogleAnalytics

User journey
Based on findings from Patrik-Haggren – Creating the Perfect Donation Experience, the user journey was created to emphasise that although the donation forms were to be revised, the restriction of not holistically revisiting the entire online experience for Cancer Council NSW would not resolve the donor’s awareness and increase of donations.
ccnsw_user_journey

Flow for form data
To illustrate the existing content of the donation forms, the colours represented the type of data requested from the user. The data categories were 1) donation type and amount, 2) payment information and 3) user information. To keep the flow consistent, the order and grouping of form fields were rearranged. The flow also demonstrated how the three donation forms could be consolidated into one.

Flows

Research on other charity websites
PowerPoint Presentation

Research on donation form components
PowerPoint Presentation

Sketches
PowerPoint Presentation

Prototype for usability testing
prototype

Usability report and findings
usabilitytesting_report1

Light documentation
ccnsw_documentation

Wearable product for connected travelers

Mobile UX

Participated as a UX designer in a team of four from ustwo NYC for a hackathon event hosted by Wearable World. Using APIs for flight details from Concur, inflight internet services from Gogo, WeatherUnderground, location services with SITA Beacons, we built an Android app to connect travelers with their loved ones as they fly.

Created user journeys and quick sketches to kick off visual design and development.
img_0448a

Validated concepts with SMEs from American Airlines.
IMG_2952

IMG_2910

To communicate the navigation flow.
flow

Visual designer and developer.
IMG_2913

Testing beacons at checkpoints around the room.
IMG_2938

IMG_2939

Refining wireframes for prototype.
flow-addperson

Clickable prototype for testing.
Screen Shot 2014-06-07 at 4.37.58 PM

Guerilla usability & concept testing.
testing

Racing towards a deadline. Testing the notifications with the wearable watch interface and Android app.
IMG_2962

We were one of the five winning teams!
1510971_681726752499_5811997611073628294_n

Internal web application for Commonwealth Bank

Banking UX

Redesign of a 10 year old internal web application which had been updated with new features or tools in an ad hoc manner when required by management. To tackle the extent of the project, a 5 day discovery phase was kicked-off to define the problem space. This involved: a system screen audit, 6 x user research (user observation & findings) and determining usability issues.

Initial findings through system screen audit:
TIAMS_original

Through user observations, it was made apparent that the environment in which the application was used, needed to be the most highly regarded. In order to not affect the repetitive and predictable routine of the users, the application’s core purpose of being functional and efficient was maintained by card-sorting the navigation to be user-orientated for the primary navigation, and task-orientated for the secondary navigation. A minimalist design to reduce loading time was applied as well as contrast colours for readability and usability.

As a way for finding solutions to the problem space, I resulted to recommendations on guidelines, implemented design principles and determined a set of templates & components.

The interaction flow below demonstrates the use of referencing for searched items and a task-oriented secondary navigation which was previously available at all times.
TIAMS_portfolio_1000_v3

After the discovery phase, the project progressed to a final phase where templates and components were attentively created for the redesign. A new sitemap and a documentation of wireframes containing the templates and components were produced, as well as an interactive prototype to demonstrate interactions.

The wireframes were also tested among users before finalising the designs.

A compilation of a few components:
TIAMS_portfolio_components_1000

A style guide was provided by the visual designer (style guide was not designed by me).
TIAMS_styleguide