The Northwestern Mutual iOS app was released in July 2016 which was an MVP to match the desktop experience. The goal for the next January 2017 update was to provide clients insights on their spending behaviour. As a device, the mobile phone had the most potential to consistently and easily provide quick access for clients to track their budgeting needs–and in turn keep clients engaged.
Business goal and Research
Providing insights within context
Audit of the existing design and flow of the iOS app to determine where we could find opportunities to include spending behaviour insights:
From a single transaction, we can extract information from the captured data to help paint of a picture of a user’s spending behaviour. For example, we can inform users on how often they are spending, where they are spending and how much they are spending.
Also, with the categorisation of each transaction, we can provide insights on how they’re spending on their lifestyle.
Wireframes of flows and interactions
Overall flow of the mobile experience from Summary screen to a view of a single account:
Alternate placement to surface the visualisation of spending behaviour:
Filtering transactions on an Account view:
Categorisation of transactions:
Interaction for quicker categorisation of transaction:
Wireframes for iPad
A one month engagement at Commonwealth Bank Australia in Sydney to help 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 feature which is the same feature I lead the UX design on for the Commbank mobile app.
App available in iTunes and Google Play
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:
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.
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:
A style guide was provided by the visual designer (style guide was not designed by me).
Experience map of banking with ING Turkey with set goals.
User journeys based on goals with templates.
Taking the existing online banking information architecture and simplifying the sitemap.
Broke out the sitemap to be task-led i.e. ‘View & manage’, ‘Make a transfer’ and ‘Apply for products’.
After heavy research, low level sketches were produced across all templates.
High fidelity wireframes for handover to the tech team.
After high fidelity wireframes were produced, the sitemap with template references were revised.
Designs by Claire Morris
Having joined the team after the discovery phase for the redesign of the HSBC UK public website, I was required to work on high fidelity wireframes and collaborate with the team to collect a library of templates and modules.
– Took part in user testing and worked with consideration of feedback
– All products and content from existing site was audited against proposed design
– Detailed documentation for client approval and off-site developers