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.

Free iTunes film on Thursdays

A tight scheduled project for the Orange’s iTunes Film To Go offer. User journeys and diagrams articulated the platforms available to redeem iTunes code and the process in which how users can download the film. Worked closely with the copy writer as well as the creative team to create experiences for the desktop website, mobile website, iPhone app, Facebook tab and other related campaigns.

Orange iTunes - Film to Go

Orange iTunes - Film to Go

Orange iTunes - Film to Go

Orange iTunes - Film to Go

Visual design not my work.
Orange iTunes - Film to Go