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.

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

Explore the world of science, technology and health

A new vertical for BBC called Future is a hub of content in forms of articles, images, video and interactive applications. To make discovering content more fluid, users have the ability to view by tags and filter by media.

Started with an experience map to set goals for how different user types could use the website to find something of interest to them.
BBC Future

Sketching and card sort exercises to produce pages.
BBC Future

Low-mid fidelity wireframes which were passed over to the designer and collaborated to refine the designs.
BBC Future

Visual design not my work.
BBC Future