Responsive Website for Learnvest Editorial

Problem to solve

  • Learnvest’s editorial site was not optimised for mobile which was affecting the rankings within search engine results.
  • Although statistics informed us on high volumes when articles were promoted via other channels, there was very low recirculation i.e. users often did not continue to read other content

Discovery and research

Started with an audit
Reviewed the type of articles and the tone of voice, as well as understand the target audience. I also research sites of our competitors or with similar content, and a comparative analysis of other editorial sites.
View PDF – Audit of LV Content

Existing design had a navigation which was not self-explanatory and three types of article pages which was resolved into one for consistency

Existing sitemap
Sitemap of the navigation and categories – tags were also used but not included in sitemap.

Proposed Strategy

Started with an overall goal for the editorial content site so that is tied to the company’s mission statement

Resolving the Information Architecture
Consolidated the categories to allow only 6 to reside in the primary navigation, and 4 other “hidden” categories which will be surfaced by leveraging the use of tags and modules within the site to help recirculate content of interest to the user. i.e. top articles, most popular and sorting by content type (e.g. video, quizzes and checklists)

Navigation items were informed by SEO research (by external company) and card sorting by the research team helped allocate which categories to promote.

Design Solution


Article and Video
Articles and videos were tackled first to ensure they were optimised for mobile to improve rankings within search engine results.

Main focus in the design of the article page was to improve the readability without distractions and reduce the paradox of choice for the user when deciding what content to view next.

Home and Category landing page
To resolve the discussions between stakeholders on the goal of the editorial site, two directions were created to decide what type of product we wanted to provide for our audience. Direction 1 is a knowledge base of all personal finance needs, where as direction 2 is a guided approach to introduce the Learnvest methodology to financial planning.

A combination of the two design directions were used for the home and category landing pages

Search results
Pages with a list of results had similar template for consistency e.g. search results, content with a specific tag, a special collection/topic, and content by contributor

Resources landing page
A page to review all the interactive media such as tools & calculators, quizzes, slideshows and checklists


Design for an Estate Planning Tool

Opportunity for predictive planning to create estate plans

Where the existing estate planning tools used by Financial Planners provide outputs for a client to review what could happen to their estate if they died today, data scientists within Learnvest were able to create an algorithm to predict what could happen if they died any time in the future.

By layering on the prediction of what year they’re likely to die, the estate plan can become more of a realistic outlook of how much the client’s beneficiaries can receive.


Current tool used by Financial Planners:

Output of the tool consisted of a flow chart and tables of data:


Created by data scientists to validate the algorithm and calculations, the data provided was used to inform what functionality and outputs were available.

I separated the sections on different pages within the final design to prevent from overwhelming the user, as well as to create a step by step process for the Financial Planner to go through.


Overall flow

Clickable prototype

Created a prototype to share with Advanced Financial Planners to observe and gather feedback on the design

Final Wireframes (after many iterations)

Landing page for returning users will have previous scenarios saved for quicker access:

Inputs for the distribution strategy with collapsible sections when they are irrelevant to the client:

Main output of the calculations is the summary of the client’s total estate. More details can be shown in a full screen modal:

Quick navigation at the top allows users to click between other scenarios, as well as the ability to compare the scenarios:

Telling a story with data

What is the Financial Wellness Score?

Data scientists within the Learnvest team created a score out of 100 for Financial Planners to analyse a client’s financial wellness.

The algorithm to create the score is comprised of multiple factors such as chance of disability, market value, the client’s fact set and likelihood of death. The algorithm is simulated 10,000 times within 3 seconds and the percentage of success is the actual outputted score.

The Financial Wellness Score module in the financial planning interface:

Problem to solve

Lack of trust
We received feedback from financial planners that they did not have trust or confidence in the score due to the lack of documentation and explanation of how the score is generated. More information was needed to support the robust algorithm.

Do not disrupt the workflow
As Financial Planners have their own set of tools to create analyse a client’s financial wellness, a microsite was proposed to provide information — but not disrupt their current workflow.

Discovering opportunities

Adding value
The Financial Wellness Score is provided for every generated financial plan for a client. However, financial planners wanted a score for the client’s current state without a plan, to benchmark the client’s value for sticking to a plan.

More than just a number
I conducted one-on-one interviews with financial planners to understand their needs, the estimate of time availability and the likelihood of using the microsite. It was more transparent that a need for a qualitative assessment of a client’s situation could be fulfilled with the data provided by the Financial Wellness score.

After multiple discussions and working sessions with the data scientists, information was extracted to tell a story about a client’s journey to financial stability. It became apparent that the delta (or change) between the current score and the proposed score could inform how much of a lifestyle change a client would need to experience.

Prototype created by developers

The graphs and charts informed what data points I could use in the microsite.

My first iteration of the wireframes involved only a redesign of the prototype.

Design solution

Second iteration included possible features for the future where Financial Planners could communicate with each other on clients in similar situations.

Finding inspiration

Finding direct inspiration was somewhat hard to come by, I explored how dashboards provide data with the support of a visual component


Final wireframes with the story that told financial planners where the client is currently standing, and how they will benefit by having a financial plan.

Where relevant, sections within the microsite consisted of a visual component, but always with an alternative to view the facts in a list below.

As the microsite is used internally within the company, receiving feedback is greatly encouraged to inform designers and developers on improvements or bugs. The feedback mechanism to allow Financial Planners to inform the team on what was useful or not.

Financial Planner’s feedback

Interviewed 5 Financial Planners with the final visual design to improve and iterate on design and copy.

(Not my work) Visual design update to the Financial Wellness Score to align with the microsite

Spending Insights for the Northwestern Mutual iOS app

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:

Design solution

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

Customisation of Salesforce for Call Center Agents

Problem to solve

The design request was to provide information for Aol call center agents about products of interest to a customer, but also allow call center agents to easily find related Aol services and products. There was also the additional need to migrate from the previous CRM tool Gandalf, to Salesforce.

User research

Shadowed call agents for one day to listen in on calls and observe their current work flow:


We synthesized our findings:


I created a mind map to categorise the findings which were separated out into topics related to customers, call agents, environment and team.

Discovery Phase – User Research (PDF)


As call center agent did not have large screens and had to open multiple programs at a time, ensuring the interface could fit in a small screen was a priority. By utilising an existing template of having expandable side panels, it gave call center agents the flexibility of displaying the up-sell of other AOL products when it is needed.

Sketch - round 2

Sketch - round 2

Sketch - round 2

Sketch - round 1

Design Phase 1 – Sketches WIP (PDF)

Research and war room

Salesforce - comparative

Salesforce - Flows

Designing with the smallest screen resolution to show the viewport size when interacting with the expandable side panel:

Component – Custom console component1

User testing

Wireframes in prototype for user testing round 1


Prototype for usability testing round 2

Screen Shot 2015-12-08 at 15.12.24

Screen Shot 2015-12-08 at 15.11.05

Design phase 1 – User Feedback (PDF)

Mentorship for high school interns

For six weeks, I teamed up with a co-worker to help introduce UX and UI to five talented high school students completing an internship with the #builtbygirls #girlswhocode front-end developer 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.

It was nothing short of an amazing experience as 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. On a weekly basis we would witness their progress in leaps and bounds with their ability to prioritize important questions, and also fearlessly communicate their opinions.

builtbygirls Cambio




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.

Combining two mobile apps for a unified experience

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 align 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.

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


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

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

Previous design of CBA’s app:

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

UX process & team communication

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.

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.

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.

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.

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.


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



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

Our avatars.

Online charity donation form

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

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.

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.

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.


Research on other charity websites
PowerPoint Presentation

Research on donation form components
PowerPoint Presentation

PowerPoint Presentation

Prototype for usability testing

Usability report and findings

Light documentation

Wearable product for connected travelers

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.

Validated concepts with SMEs from American Airlines.


To communicate the navigation flow.

Visual designer and developer.

Testing beacons at checkpoints around the room.


Refining wireframes for prototype.

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

Guerilla usability & concept testing.

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

We were one of the five winning teams!