Marketing for a new product

Background

My responsibility

I was hired as the first employee at Nodabl to design the product (a web application) from scratch and influence the product decisions. As the only designer, I also supplied the marketing materials for the public website and social media assets.

Note: Logo, branding, copy, and illustrations were not created by me. I worked with a brand designer to ensure the public website and product were aligned with the brand. An illustrator was also contracted to ensure the product would feel approachable and motivational.

Problem to solve

In the first year of a startup, time is restricted and the ‘delightful moments’ that improve user experiences generally get de-prioritised as it is more important that the product actually works. The marketing site was in general a lower priority to the web application. With this understanding, I wanted to balance the workload for engineers so that it would be a functional marketing website but also leverage design to convey our mission.

In short, I wanted to make a big impact with little effort for everyone.

My process

All marketing designs were completed with ensuring front-end development would be straightforward and design complexity kept to a minimum. I designed the web application and marketing site so that it shared the same CSS, spacing between components were consistent, and illustrations were limited so it would be easier to display on different breakpoints.

Through user research, the concept of managing and tracking your professional growth was new to a lot of people. We then wanted to ensure the message of the product and what it did. It was decided that this was most easily communicated through the stylised screenshots of the product.

What I learned

  • Better understanding of Bootstrap framework
  • To remember to reference the brand guidelines when you’re stuck on ideas
  • How to better collaborate with an illustrator. It was my first time I personally worked with an illustrator and had to provide guidance on colours and themes
  • How to convey to someone what Nodabl is after 10 months working on the product

Designs

About Nodabl

Nodabl is a startup founded in January 2019. The mission of the product is to enable every person to maximise their professional potential. To do that, we created tools for people to take control of their own professional growth.

Communicating the product features

As of October 2019, the product features went through many rounds of design and testing. For the public release, stylised product images were created to help communicate the core features.

Step 1: Set Goals

Users select competencies they want to work on as their goal.

Step 2: Track progress

To make progress towards improving on that competency chosen for their goal, users needed to record activities to track what they had done.

Step 3: Get Feedback

Users could request feedback on the activities they add from people that can inform them of their progress.

Step 4: Measure growth

At the end of each goal, a self-assessment was presented to users to measure their confidence and knowledge & ability in the competency. Reports were available for users to review their growth and how they are tracking towards their goals.

Nodabl.co – the public facing website

Home

Designed a mobile responsive website which was launched May 2019 then redesigned in October 2019. Main changes included updates to the features as well as simplifying the look and feel to communicate a more deliberate and focused design (to support Nodabl’s brand). The hero illustration was removed and replaced with decorative illustrations so that the value proposition of Nodabl could be read with less distraction.

Updated design launched on October 2019

Initial design of website launched on May 2019

About us

Resources

Preloader

I created an animation of the Nodabl logo using only CSS for the Nodabl preloader.

Illustrations

Use of illustrations were included in the product to make the product feel more approachable and fun.

Find out more about the 10 months of creating Nodabl or the most recent design iteration.

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

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.

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

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

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

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