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.
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
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
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
I created an animation of the Nodabl logo using only CSS for the Nodabl preloader.
Use of illustrations were included in the product to make the product feel more approachable and fun.