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
Sitemap of the navigation and categories – tags were also used but not included in sitemap.
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.
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
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
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
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.
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.
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.
Research and war room
Designing with the smallest screen resolution to show the viewport size when interacting with the expandable side panel:
Wireframes in prototype for user testing round 1
Prototype for usability testing round 2
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.
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.
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.
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.