Material Design for Android app

Customer need

The SimplePractice Android app needed an overhaul to create an Android specific experience for our customers. The engineers in the mobile team had been working for 5 years without a dedicated designer, and created an experience based on best practices while mostly referencing iOS patterns. Considering the resources available, the app worked well. But as SimplePractice’s web experience was constantly improving and features were being implemented, the mobile experience needed more design patterns to cater to those needs.

I designed the Android app based on material design system but also used existing patterns in the app to alleviate the burden of forcing our customers to learn a new app.

The following are the core screens which contain all the components used throughout the app.

Scheduling and managing appointments

The calendar is the most used screen by customers. I wanted to ensure the most important information was clearly displayed as clinicians may only have a few minutes between sessions to check their schedule.

Two FAB buttons were used which breaks the material design recommendations (should be one), but the use case to allow customers to quickly decline or accept appointments was a justified reason to implement it.

Clients and their contacts

As clinicians may have hundreds of clients, a filtering system was included for quicker access to specific clients or contacts.

Client detail

The client detail screen is slightly more unique as clients are the centre of a clinician’s practice. To provide the importance of a client and remind which client is being viewed, the header area is enlarged to give that focus.

Notes to track progress

Including notes is vital to a clinician’s role to track their client’s progress. Optimising the way forms are viewed, and the ease of use of text fields and selectors provides a lot of value for our customers.

Reminders

Reminders are another key screen for a clinician to keep their practice on track.

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

Overview

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

Slideshows

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.

Existing

Current tool used by Financial Planners:

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

Prototype

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.

Sketches

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:

Improving scheduling – iOS app

Problem to solve

Our customers require a quick and scannable way to review their schedule to manage their appointments. As scheduling appointments for Clients are one of the most crucial parts of practice management, we needed to improve the readability in viewing a schedule as well as the ability to improve time management.

Research & Results

As customers are quite often in session seeing their Clients, their least intrusive device to check their messages and schedule is the mobile phone. Through speaking to customers and feature requests, it was validated that the ability to accept & decline appointment requests through the mobile device would provide a lot of value to our customers.

The calendar views include a monthly, weekly and daily view with force touch to create sessions where there is availability.

So that customers could make their best judgement as to whether an appointment could be accepted or declined, we displayed a snippet of the schedule.

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

MVP

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