Category: Technology

Digital Transformation for SMEs

I spend most of my time at the coal face of new product development inside tech startups. But I’m occasionally called on to help with the broader application of technology throughout a medium-sized or larger organisation. I love seeing how improving their digital tools and systems can make an entire organisation more customer focussed.

Some digital projects only impact one part of the overall customer experience, but these days, any good software project should really consider the wider context of the entire organisation and the whole customer experience that they deliver.

Different company sizes approach digital transformation differently

I’ve noticed that digital transformation projects can be very different in a small to medium sized organisation. Corporates, startups and mid-sized SMEs handle digital transformation and customer experience innovation very differently:

  1. In a corporate there are whole teams dedicated to technology and the connections between functional departments. While there is a lot of bureaucracy, digital transformation and customer experience projects are feasible inside a corporate because they can throw resources at a problem.
  2. In a small business or startup, the whole team is closely enough connected that cross-functional collaboration is inevitable. While resource constrained, the ability to implement change quickly makes startups fast to adapt to changing circumstances and customer needs. They also often have the advantage of dedicated internal software developers, digital marketers and operations specialists with deep technical systems experience.
  3. Good honest medium-sized SME businesses can be the teenagers of adopting digital technology. Big enough to have departments with competing goals and seperate tech systems. But small enough to be resourced starved and unable to invest in major organisational change projects. Digital transformation is hard for SMEs.

Icehouse Ventures is a small, independent rogue team that spun out separately from the Icehouse several years ago. I’m now the CTO of that business and we effectively operate as a tech startup ourselves with dedicated marketing, operations and software development capability. But it wasn’t always like that. And the wider Icehouse (in particular the SME learning & development business) has been through a genuine company-wide digital transformation over the last two to five years. There are several lessons that we’ve learned at the Icehouse in pursuing our own digital transformation and in helping other medium-sized New Zealand businesses with adopting digital technologies better across their whole business.

Digital technology maturity scale

Digital transformation is simply a description of the broad adoption of digital technologies throughout a business. Digital transformation is best measured by how connected together a customer’s experience is with the business. There are several levels of maturity in a company’s gradual digital transformation:

  1. Disconnected Experiences: At level one, every business system is separate and siloed (or possibly offline entirely). For example, it’s annoying for customers when a store’s e-commerce website can’t show whether a particular branch has stock on a particular product because the stock management system doesn’t talk to the website CMS. Or when you lose your receipt for a warranty claim and the loyalty card system won’t talk to the warranty claim software.
  2. Connected Experiences: At level two, a company’s various internal systems are separate but are starting to be connected by syncing tools and APIs. This starts to allow for more connected experiences. For example, an e-commerce order can be re-routed easily to in-store click & collect. Or a forgotten loyalty card can be easily looked up using a phone number.
  3. Seamless Experiences: At level three, a company’s systems are so well integrated that they can be navigated by the customer just as easily as internal staff. At this level we see self-service customer portals, hybrid in-store and on-line checkouts, and in-store payments collected by a self-service mobile app.

Customer Experience Canvas

The tool I used to map and diagnose digital customer experiences throughout the full customer lifecycle is the Customer Experience Canvas. The CX Canvas combines a pretty standard marketing funnel (based on the AIDA model of awareness, interest, desire and action) with a CX Flywheel (similar to the one proposed by HubSpot with stages for acquisition, activation, retention and referral).

There are several potential layers to the canvas depending on the project and intended application:

  1. Experience: The surface layer of the funnel and circle can be used to map the digital touchpoints a customer interacts with throughout their experience of your product. Making these experiences more connected and efficient is a key part of digital transformation.
  2. Data: The same canvas can be used at a deeper level to map out the data used to measure and track the experiences. The metrics we use across the whole lifecycle are based on Dave Mclure’s ‘pirate metrics’ (so called because the acronym is AARRR): Acquisition, Activation, Revenue, Retention and Referral.
  3. Technology: Even deeper, the canvas can be used to map the technology stack and systems integration work required to deliver a seamlessly connected customer experience. This layer looks at the syncing tools, triggers & events and APIs needed to make the whole system work together.

Agile Project Prioritisation Matrix

In 2001, as a reaction to traditional engineering project management techniques (that had been optimised for construction projects), a group of software developers proposed the ‘agile manifesto’. This approach to software development prioritises speed, simplicity and efficiency. There are lots of tools and techniques from agile that can be applied to an organisation wide push for digital transformation.

I’ve found that most companies undertaking digital transformation end up with a giant todo list and no practical ways to have shared conversations about prioritisation. One of the best tools to reach agreement on prioritisation is the Agile Prioritisation Matrix.

When considering a whole of company digital transformation it can be an overwhelming task and it’s hard to know where to start. The agile project prioritisation matrix breaks projects down by:

  1. Impact: Potential return on investment, improvement in customer experience, etc
  2. Effort: Likely expense, time and complexity of implementation.

Projects that are high impact and low effort are quick wins and should be done first to build momentum. High impact and high effort projects are called ‘epics’ and are important to tackle but take time to finish. Whether easy or hard, lower impact projects should be avoided where possible.

Digital Transformation Checklist

Having mapped the customer experience and prioritised the key projects, it’s also worth checking that you have all your basic tools in order so nothing gets lost. Boiling all the strategy down, I’d still suggest checking these basics are in place:

  1. Marketing: Website Analytics & Email Newsletter metrics.
  2. Sales: Customer Relationship Management System.
  3. Production: Invoicing, production and shipping software.
  4. Service: Customer Feedback System such as NPS surveys.
  5. Operations: File storage, knowledge management and internal instant messaging.

Across all of these, it’s essential that your CRM can act as more than just a sales tool and provides enough APIs and/or syncing tools to eventually act as a centralised customer data platform. Because in the end, having your customer data centralised in one place is the most important part of providing a seamless digital customer experience.

You can learn more about digital transformation in a podcast I did with Bryar Stewart from the Icehouse team:

Top Laracon Conference Presentations

Laracon is an ongoing series of conferences and events about the Laravel software development framework. We use Laravel pretty heavily at Icehouse Ventures because it powers our Investor Portal. I’ve learned a lot over the years from the various Laracon conference recordings. The topics range from basic coding best-practises to advanced systems architecture, database design, all the way through to user interface design. The talks I get the most out of switch between broad theoretical best practises but then back it up with practical live coding examples. I’ve made a list with a few of my favs and some notes on how they influenced view of what’s possible with Laravel…

SOLID Design Principles

This talk with Katerina Trajcevska covers the basics of the SOLID coding principles. SOLID is short for:

  1. Single responsibility principle,
  2. Open-closed principle,
  3. Liskov substitution principle,
  4. Interface segregation principle, and
  5. Dependency inversion principle.

The SOLID jargon can seem heavy at first, but it actually fits nicely into good Laravel coding practises and Katerina lays things out simply and clearly.

Curing the Common Loop

This talk probably changed my approach to coding more than any other talk. The idea of using chained functions, scopes and collections aren’t that revolutionary by themselves, but seeing Adam collapse whole pages of complex nested code into a single line is just magical. The elegance, power and simplicity of Laravel collections when they’re used properly blew my mind.

CRUDDY by design

Another mind-bending talk from Adam Wathan. CRUD is short for:

  1. Create
  2. Read
  3. Update
  4. Delete

I do not necessarily agree with everything this talk, but the mental exercise of trying to see everything in a modern web application as a CRUD operation is a matrix shifting moment of clarity. We now heavily use Laravel’s built in “Resource Pattern” to link models, views and controllers into common CRUD functions.

Eloquent Performance Patterns

Eloquent is the data modelling ORM (Object Relational Mapping) tool built into Laravel. It’s an amazing tool, but Jonathan comes from a ‘bare metal’ background and like me, learned MySQL years before he learned to code in a modern framework. As such, he thinks in raw database queries. Laravel’s ‘Query Builder’ is the database layer that gets things from the database before passing them to Eloquent (to wrap the richness around). This talk is all about speeding up Eloquent by doing more in the database.

Laravel Performance Optimisation

Kasia Zien takes a pretty detailed and hard-core approach to performance optimisation, but it’s eye opening to see her logic for how to squeeze the best performance out of Laravel.

Software Design Patterns in Laravel

“Design Patterns” are best-practises or standard approaches to common problems in programming. Not every design pattern is a good habit (the repository pattern can over-complicate a project fast). But when used carefully, the various software design patterns make for better and more consistent code. We use the Presenter Pattern at Icehouse Ventures to tidy up data before sending it to our Vue JS front-end.

The Laravel Way

Jeffrey Way is one of the original gangsters in the Laravel community. As an OG, he’s been working with Laravel so long that he’s drawn out the broader mindset of what I think of as the “Laravel Way”.

Chasing Perfect Code

Yet another Adam Wathan talk, but honestly every one is a level-up in terms of how I write code. Adam goes through ‘code smells’ and things to tidy up. Things like nested-conditionals may technically work in a solo project or a university code exam, but in the real world our code needs to be read by other developers or by your future self. This presentation taught me to make my future self’s life easier with code that is simple, readable and clear.

Diving Deeper

One of the things I love most about Laracon is being exposed to more advanced topics in software engineering that I might not have otherwise discovered. For example:

  1. Database Indexing – The art of indexing a database is kind of obscure, but the pursuit of fast queries and ‘groking’ database indexing stretched my mind and reminded me how much I love MySQL.
  2. Denormalisation with Eloquent – The Icehouse Ventures investor portal calculates pretty advanced ‘professional investor grade’ maths and charts like IRR, TV/PI and other venture capital finance metrics. Many of those are too complex to run on the fly so we tried caching them. But with thousands of investors and hundreds of metrics our cache became a mess. Database normalisation saved us but also forced me to learn about cache warming and cache invalidation. This is the Laracon talk I wish I has watched before we built our Entity Stats table by hand.
  3. Resisting Complexity – When I dive into the Laravel core code (the stuff we’re not really supposed to see and can’t edit) I’m always surprised by how small each function is. Each function does one thing, then passes it onto the next atomic unit. At first it seems wasteful, but Adam walks us through how breaking big functions into small ones makes them cleaner, clearer, more re-usable and more testable.
  4. Clean Code – Uncle Bob invented the SOLID principals and is a legend in software development. Not Laravel specific, but a great reminder of the wider context of why clean code matters.
  5. Design Patterns that pay off – Matt Stauffer lays out some advanced design patterns and boils them down into simple good habits for good code.

I’ve saved all these Laracon presentations as a YouTube playlist so it’s easy to find them, play them and refer back to them in the future: Laracon YouTube Playlist

Using JavaScript with Laravel through Inertia and Livewire

For the upcoming Icehouse Ventures investor portal we chose to build the application using Laravel, which is a php framework. Frameworks like Laravel speed up the development process by providing a lot of the scaffolding that you need for a modern web app.

Mockup of the upcoming Icehouse Ventures Investor Portal.

We started off looking at using off-the-shelf tools such as venture capital fund management software and various online angel network platforms. But we couldn’t find any tools that would allow us to provide combined reports that showed a consolidated view of both direct angel investments into a company and indirect fund investments into the same company through a fund the investor was a part of. Investors told us that this was a mission-critical feature so they could evaluate their effective exposure to particular startup companies in their portfolio.

We also evaluated a range of other low-code and no-code solutions such as Salesforce and various template-based databases and website builders. These were ok, but couldn’t handle the depth of complexity investors wanted such as calculating IRR over long time periods, exporting PDF statements and ranking portfolio performance against other investors.

Laravel uses the classic Model-View-Controller architecture.

In the end, we chose php and in particular Laravel because of the robust stability of a MySQL database and the power of the Model-View-Controller approach to the code structure. MVC is a common pattern used in enterprise architecture to build scalable and stable software systems, the key elements are:

  • Model – A data model that manages your database and represents data as objects that can have relationships with other objects. For example, we have a model for Users and a model for Companies in the investor portal.
  • Controller – Traffic controllers that manage how data moves around your application. Controllers fetch data from the Models and send it to the Views. In Laravel, the controllers do a lot of heavy lifting in the background such as security, permissions, sorting and filtering.
  • View – Templates that render html and CSS for the end-user to see what you want to show them. Laravel uses a php and html template format with no JavaScript interactivity by default.

Adding JavaScript to Laravel

As much as I love php, we wanted to provide investors with a modern app-like experience. To do this we needed a modern JavaScript framework such as React (from Facebook), Angular (from Google) or Vue (an open-source JS framework). I chose Vue because it’s popular in the Laravel community, not owned by a giant tech company and is the fastest to learn for a non JS developer like me.

There are several approaches to getting front-end JavaScript frameworks to work with back-end applications like Laravel:

ApproachAdvantagesDisadvantages
Single Page Application with API – The traditional approach has been to build the JS front-end as a single page application and feed the data through to the app using a private API.By keeping things separate, it’s easy to focus on one thing at a time. Back-end developers can work on the back-end code and front-end developers can focus on the front-end code.My experience with SPAs was that I wasted a lot of time keeping the API and the front-end talking to each other. Frustrating points included login tokens and data-table filtering. In a small in-house tech team there’s no such thing as separate back-end and front-end teams, we’re all full-stack by necessity.
Livewire – This approach allows you to use little bits of JavaScript inside your normal php templates.It’s cool to have php everywhere and JavaScript only where you most need it. Like a modern framework approach to JQuery.The disadvantage of Livewire is that it’s still mainly using php not JavaScript, so it doesn’t have the app-like feel of an SPA. It’s also not full-on best-practice JavaScript using Vue or React so you miss out on the Vue and React templates and resources.
Inertia – This is a new way to use JavaScript inside the MVC framework of a php app. The Model and Controller are in php and the View is in JavaScript.Best of both worlds. Inertia lets php do what it does best (databases, models, relationships, security, etc) and JavaScript can do what it does best (render the front-end interface and provide interactivity).Not technically an SPA. Requires some finesse to make it feel fully app-like and the progress loader is a bit clunky. Inertia puts JS right inside your php monolith so you now have a multi-language code base that might feel weird to some developers.
Livewire is a new method for using JavaScript inside a php template.

Laravel 8 was released recently and now includes both Livewire and Inertia as options for the default Laravel user interface templates (called Jetstream). This is exciting because it will expose these two new approaches to more developers. But it’s been confusing for a few developers who are used to thinking of JavaScript as a different world from php.

Inertia allowed us to use Vue JS in our Laravel app.

On balance, we opted to use Inertia for the Investor Portal because it kept our code base all in one place and allowed us to move fast and change things quickly based on user feedback. I’ve already had dozens of moments where we wanted to make a change to the way that something is displayed in the portal. It’s a true joy to be able to make a quick change to the Company model, flow it through the Direct Investments controller and have it pop up in the investor portal Vue file all in the same code-base, with easy Laravel debugging and easy feature-testing and front-end testing. By having Vue running inside Laravel I’ve upskilled quickly on JavaScript without having to go all-in on complex JS routing and data manipulation.

Notice the simple call to Inertia from the Controller. Just like a Blade template.

We also went for Tailwind CSS instead of the more established Bootstrap CSS framework. Tailwind is a utility framework approach which means that instead of single giant templates in CSS with little HTML tags you just layer lots of little HTML tags onto an element to make it look the way that you want. It seems messy at first but once you get used to it, it’s life changingly fast. Using Tailwind, Alipne JS, Livewire and Laravel is called the TALL stack and I’m calling Vue, Inertia, Tailwind and Laravel the VITL stack. (Some people prefer the name LIT for this stack but I think Vue is a vital part of what makes this approach so awesome).

Building software in-house is an unusual move for a Venture Capital fund but Icehouse Ventures has a unique approach that combines the scale of the Ice Angels network and the depth of major funds like IVX and Tuhua. Globally, the venture capital industry is being quickly re-shaped by increased investor demands for transparency & reporting and by startup founder demands for faster decision making & streamlined capital raising processes. Technology can be a force multiplier for us and having both php and a modern JavaScript framework like Vue in our toolkit means that we can move faster while still keeping things safe, stable and secure.

Advanced Video Conferencing for Remote Work

Now that everyone is settling into remote working, we are finding that being productive requires more than just having the basics of team chat and video conferencing in place. To generate real economic output in uncertain times you need to be communicating closely with your customers, suppliers and business partners. Experience suggests that there are actually three levels of remote working:

  1. Internal communication and basic connectivity. 
  2. Client communication including meetings, events and training. 
  3. Productive deep-work including multi-party workshops and brainstorming sessions. 

Understanding the type of interaction you want to create will help guide the setup for your meetings and the tools that you use.

Internal: Your IT team will probably already have set you up with some sort of video calling platform. You should check that this video calling tool also includes team chat, calendar integration and external calling as well as internal. This means that you’ll probably want to be on a professional corporate communications platform such as Google Hangouts, Microsoft Teams or Slack. These chat plus video calling tools are great for reducing email and smoothing out daily internal communication. Hot tip: Create a lot of ad-hoc chats with small internal groups around key projects, these are where th actual work gets done (not in the big all-company threads). 

Client calls: For small group and one-to-one client calls, I advocate using whatever tool your customer is already used to using. If they use Skype, Zoom or MS Teams then find a way to use whatever they are using because it’ll be familiar and allow them to focus on the content of the conversation. If your client doesn’t have a preferred tool, then you can default to using whatever internal tool you already use because you’ll be comfortable with the tool and can share your experiences with your client giving them a chance to try it out. Hot Tip: Get yourself set up in advance with logins for all the most common video calling tools so you’re ready to go with whatever your clients use. 

Large group calls: Video calls with a large group tend to stretch the internal communications tools a bit too far because these tools are usually designed for small internal team meetings. For example, Microsoft Teams only shows four people on screen at any one time. Zoom is becoming the market leader for large group calls and it’s worth getting to know the advanced features of Zoom before you need to host a large call. These types of large group calls are a passable substitute for networking events, professional presentations and team training. Hot Tip: Have a two-person hosting team with one person focused on managing the humans (moderating Q&A etc) and one person managing the tech (such as muting and unmuting people). 

Presentations: For one-way presentations to a large audience, there is a whole range of dedicated webinar tools such as Crowdcast, Webinar Jam and Go-to-Webinar. At the Icehouse, we’ve been using the dedicated webinar tool inside Zoom for our Coronavirus Business Support Webinars. The key to good webinar presentations is a lot of practice (especially with guest speakers) and putting a lot of effort into encouraging audience interaction. Hot Tip: Nominate a ‘studio audience’ of three to five people to have their cameras turned on as an audience panel so the whole thing looks more interactive and the presenter has someone other than themselves to look to for feedback. 

Zoom Meeting (Notice that everyone is shown in an equal grid.)

Tips for webinars and large meetings

Large format meetings are a great way for people to feel connected when we’re all working remotely and uncertain about the economic outlook. It’s great to hear about other people’s experiences and see how much we all have in common no matter what industry we’re working in. At the Icehouse, our team ran webinars and large format Zoom meetings with over a thousand people in the first week of lockdown and we had to rapidly arrange dozens of private Zoom calls to pivot our coaching and advisory activities. We’ve learned a few hard lessons along the way. Here are a few quick tips that apply whatever type of call you’re running: 

  • Encourage everyone to turn their video on: Most people hate being on camera but having the video on for all participants is vital for making things interactive. Seeing everyone gives the presenter non-verbal feedback so they can see if what they are saying is landing. It also allows the participants to see each other which makes the whole thing more personal. It can also be useful for quick hand signals such as thumbs up and waving to attract attention. 
  • Look your best: The key to decent video is to have the camera at eye level (or above) so put your laptop on a cardboard box or prop your phone up somewhere. It’s also important to have good lighting. Try to have any natural light coming from in front of you rather than behind you. Sitting in front of a window will cast you as a silhouette. 
  • Clear audio: Wear headphones. Even if your computer has a decent microphone and speakers, experience suggests that laptop speakers are more likely to cause an echo and the default laptop microphone is more likely to pick up random background noise from around the house. Even a cheap iPhone headset is miles better than the laptop mic. Personally I use bluetooth airpods because I can easily switch them between my laptop and phone. 
  • Use chat: Most video calling tools also have a group chat feature. Use this for general banter, sharing links and random comments on the topic at hand.  The chat is a key part of making webinars and large format meetings seem interactive. People will only use the chat if the hosts and panellists start first so model the behaviour you want to see.
  • Facilitator: Having a strong facilitator on a video call is priceless. There’s always someone who goes on too long or doesn’t know when to let other people speak. A good facilitator can guide the conversation and keep everyone on track. 
Zoom Webinar (Notice that the presenter is spotlighted and the panelists are shown in a strip at the top.)

Advanced Zoom Tools

We’ve been using the Zoom software extensively at the Icehouse and there are a few tips that are specific to the Zoom platform:

  • Gallery View: Zoom has a button at the top right that toggles between Speaker View (seeing only the person that is speaking at the time) and Gallery View (seeing a grid of videos from all the attendees). The host can toggle between these to set them for attendees. But attendees can override the setting for themselves. Our experience is that Gallery View is more friendly and engaging because you can see everyone at once. 
  • Screenshare: Sharing a slide show is a great way to keep a presentation on track and keep the pace up but in the Zoom software the screenshare takes over the whole screen and hides everyone except the person that is speaking. There’s an advanced ‘side-by-side’ mode that allows you to see the Gallery View during a screenshare but no one ever finds that so we recommend keeping the presentations as short as possible and spending more time on Q&A.
  • Security: As Zoom has become more popular there have been a lot of press articles about privacy and security concerns about the software. Some of these sound alarming at first but most of them are just hype. My favourite example was a widely reported vulnerability that in practise required an ex-NSA hacker to have physical access to the device to exploit. If the NSA is breaking into your house to hack your laptop, then you probably have larger problems than Zoom. 
  • Privacy: There has been a rise in Zoom Bombing which is the practise of randomly logging into other people’s calls uninvited and causing trouble. The cure for this is to be careful about where you share the links to your calls and to require registration in advance for large public calls. 
  • Moderator: Having a tech person or at least an experienced power-user on each call alongside the facilitator means that one person can manage the conversation going on front-stage and the other person can manage things like chat, people waiting to join, banning any trouble makers and providing support for anyone who can’t get onto the call. 
The Zoom Host Dashboard

My final tip is to over-share the links to your calls. Send the link when people first rsvp, then send a calendar invite, then send a reminder one hour before the call. Keep these reminders super short so they don’t annoy anyone.

We will be publishing best practise guides for remote working, video calls and webinars on the Icehouse website shortly along with an updated guide to the best Zoom privacy and security settings. You can follow along with all our Covid-19 support and resources here Icehouse 2020 Covid Support for NZ Small Businesses

Why is building a website so hard?

I’ve been working in technology startups for several years now and I’ve been up close and personal with what it takes to get something designed, built and onto the internet.

During the consulting parts of my career, I helped build plenty websites for clients. But it’s a whole different ball-game when you are in-house and personally responsible for whether or not the site is delivering results. I’ve found that as soon as you’re responsible for the actual business results, your whole mindset towards building digital products changes. For example, I’ve found that all of a sudden usability and simplicity become more important than how things look for their own sake.

I’ve always been fascinated by how things that seem like a nice easy website project can gradually become complex, stressful and expensive. It’s not just the normal “things take longer than you’d expect” effect from all types of project management. Something more profound is going on when building digital products. There are several interesting issues that cause website projects to be harder than you’d expect: Continue reading Why is building a website so hard?