DISRUPTING THE AGE OLD WEB DESIGN PROCESS?

THE 5 DYNAMICS OF A MOBLE WEBSITE

A rather long, and in some parts arguably tedious tale, dissecting the history of MOBLE; how the brand began, why we exist, and how MOBLE has revolutionised it's website building processes to create websites in a disruptingly dynamic way, that all designers can truly benefit from. Chronicled by none other than MOBLE Co-Founder, chief troublemaker, and sender of ravens, Mr Paul Davenport. Paul has been building websites for over 15 years and has worked on well over 2,000 website projects in Sydney, Australia.



"We no longer design themes or web pages, we design Dynamic Layouts that can easily be dragged, dropped and swapped. Dynamic Layouts work interchangeably with each other, they are granular building blocks that automatically pick up a websites CSS, ensuring they work seamlessly together regardless of who designed them or when. The result is highly customised web pages that save serious amounts of design time."

 


A Story of Web Design

In 2012 MOBLE, Co-Founder Danny Liang and I began talking about the current state of Website Builders and Content Management Systems (CMS) and how they might evolve. We talked about the challenges they faced at the time, a time when we were really only at the dawn of a new technological journey into an all-new mobile world.

Both Danny and I began working on websites and CMS systems in the early days of 2002. So ten years on we were both well-versed on the topic and had built countless websites on countless CMS's and website builders. It's remarkable to think that it was only five years ago, back in 2012, when adaptive design was prevalent with design agencies creating an arduous two-site solution, with one website for mobile and another for desktop. We also witnessed a key trend at this time, of many proprietary Agency CMS's struggling to keep pace with the mobile wave and faced with the decision to either rapidly commit to serious redevelopment or to redefine their processes and move to Open Source technology, such a WordPress or Drupal.

After ten years in the industry, we had a sense that this could be the time to spread our wings and build a new CMS; purposely built for the way that we like to build websites, with new efficiencies that would save production time and allow us more time to be creative.

At the time, we pondered the writings of Luke Wroblewski* and knew that something extraordinary was in store for the mobile web. We began conceptualising how the CMS of the future might look. A CMS of responsive design and a CMS that would one day allow websites to be built by machines.

Inspired by these discussions, MOBLE was born in 2013, we began building the solution that we'd earlier conceptualised, alongside a business model that meant we could rapidly develop like a startup, yet be 100% self-funded, without taking early stage investment.

 

MOBLE now offer unlimited design revisions to all of our clients, yet we design in the MOBLE UI without Wireframes, or core HTML and are rarely asked to do a design revision.


A look back at the age old web design process

In this episode, we look at the five dynamic processes Danny and I originally conceptualised that inspired us to build MOBLE. You’ll get to see how these ideas have not only evolved into the software that we use to build websites today, but also form the fundamental process that we follow to create new custom websites.

In this article you will discover how you can use you MOBLE to:

  • Waste no more time with external wireframe or prototype tools.
  • Offer unlimited design revisions for custom website designs.
  • Optimise the traditional custom website production period, often to under a day.
  • Design on the spot, face to face with your clients.
  • Build customised websites that deliver tangible results.


Firstly, let's take a look at where we have come from...

For years, the age old web design process has been unshaken. With companies following a process that aims to control the risk of 'blow out' and potentially spiralling project cost. However, the end result is often static websites that are said to be complete once the website goes live.

As designers, we know that a website is a living, breathing thing. Websites should not be designed for "completion", they should be designed forever. Websites can be designed in a way that aims to learn and grow, while factoring in ongoing creative contribution with the freedom to make changes on demand as required, long after they are initially born.

So, let's look at the age old web design process, a process that was intentionally designed to mitigate risk and reach a completion, or 'go live' date. Does this look familiar and can you spot any problems with this process?

  1. Workshop
  2. Information Architecture & Site Map
  3. Wireframes
  4. Prototype
  5. User Testing
  6. Visual Design
  7. Backend Development
  8. Frontend Development
  9. Content Loading
  10. Testing & QA
  11. User Testing or Soft Launch
  12. Live


Looks ok right? Sure, it's not that there is anything wrong with the process as such, it's just that things can be done in a far superior way.


Try our method with your new MOBLE website, and smash your current production times

 

With MOBLE, there is no distinction between a Wireframe, Visual Design Layout and the Code, our Dynamic Layouts simply flip between Wireframe and Visual Design modes on the fly. As you make changes to your design in the Visual Editor, code is automatically written for you.


The age old process was invented at a time when designers could rarely code and coders often had little knowledge of design. It was also at a time when designers would sketch out wireframes and do visual design layouts in programs like Photoshop.

Coders would often not see web designs until after they were approved. In such cases, particular aspects of the design had the potential to blow the budget, or worse: could not be coded at all. Designers might have to go back to the drawing board and present revised concepts to the client.

The whole process seemed to drag on into laborious website builds. While aiming to reduce risk for the design agency, this process often risked losing the clients energy and inspiration for the project. 

Removing such distinct progress phases can save huge chunks of project time. We find that the MOBLE methodology has many knock-on benefits, not least resolving such designer and developer alignment issues of the past.

In recent times, particularly with CSS boilerplates and frameworks, thankfully things have got a whole lot better in regards to designer and developer alignment. Design practices as a whole have certainly become much more streamlined, however, it seems that we have simply got much better at the streamlining the age old process. What if the process itself were to change completely, how could we as designers improve?


The Dynamics Methodology


STEP 1:
Dynamic Workshops

STEP 2: Dynamic Styles

STEP 3: Dynamic Layouts

STEP 4: Dynamic Widgets

STEP 5: Dynamic Growth


The vision of MOBLE is to create the product that we want to use ourselves, and to share these tools with other designers. The core aim here is to maximise the clients budget, by allowing more time to have fun in design and play with the latest technology and trends.

"Why should developers be wasting time coding core HTML, when they could be researching and installing the latest JS effects and animations from GitHub? Why should designers be wasting time mocking up Wireframes for Desktop, Tablet, and Mobile, when they could be designing beautiful brand assets or applying more love to individual pages?"


Below are the five fundamental things Danny and I originally set out to develop for MOBLE. The knock-on benefits are far beyond what we originally anticipated. It’s been quite a ride!

 

Dynamic Workshops
Dynamic Styles
Dynamic Layouts
Dynamic Widgets
Dynamic Growth

Step 1. Dynamic Workshops

 

S1. Episode 3: Dynamic Workshops


Unquestionably, it's best practice to start a project with a team workshop, this will no doubt never change.

The feedback we get from our clients is that MOBLE's Dynamic Workshops are a critical component in fast-tracking the website build process. The workshop findings underpin development and are an essential point of reference during the build.

Participating in a Dynamic Workshop is an enjoyable and rewarding event that helps remove design subjectivity of taste and opinions, by uniting the vision of all team members before design begins. We do this by explicating a business objectively in metrics and numbers.

At the time of our initial discussions in 2012, Danny and I found that workshopping was a loose concept at many design agencies. For some, the concept began with the handover of the sales rep to the design team, where the salesperson had built a rapport that would suddenly come to an abrupt end. There was a lack of dissemination of information and a disregard for the relationships that had been built.

It also seemed that as the website build progressed to the design phase, new ideas would frequently come to light, often with new decision makers taking an interest. These late-term role players introduced new needs, thoughts, and tastes.

Most annoyingly of all, we'd see designers creating many beautiful initial concepts, then systematically going back to the drawing board to create new ones, as they hoped to appease everyone in the project team. This led to designers laughably creating two designs, one for the client and one for their portfolio!

"This laughably led to designers creating two designs, one for the client and one for their own portfolio!"

 

What’s wrong with the old approach to workshops?

The old workshop process would look something like this:

  • Clients would be asked to talk about their business and operations. Hopefully in person, though unfortunately sometimes via an online onboarding document.
  • Goals would be defined with the client, problems that they have experienced in the past would be uncovered and understood.
  • Clients would be asked to provide a list of website designs that they liked and why.
  • Clients would be asked to send a site map of their preferred website pages.


We spotted 3 distinct issues with the old process:

  1. Reading a submission form sent by a client missed an opportunity to witness the client and they considered the questions. Emotions are hard to read, extrapolations are hard to write.
  2. Listening to a client and taking notes can be as subjective as design. What people attempt to articulate can often be interpreted differently from what they actually mean.
  3. By asking the client to set the design standard, you are not raising the bar. Sure, you must receive client feedback, but you as the designer must provide the inspiration.

Our dynamic workshop solution

A Dynamic Workshop brings together the key players of a web design team. These often include business owners, the head of marketing or sales, designers and the project lead. We discuss the key influencing areas of the client’s business and website requirements, then rank granular elements in a 10-1 score of importance and profitability.

MOBLE's Dynamic Workshop tools help guide conversations through every aspect of website building. It helps iron out differences of opinion between team members so everyone is on the same page when design work begins.

A CEO and marketing manager might have differences of opinion about brand direction or which products are the biggest influencers. These opinions are measured in metrics at the Dynamic Workshop. The results are used to create a better design and help the team get there faster without procrastination.

How Dynamic Workshops work for designers

Imagine everyone in the team agreed that a certain product was a 10 for importance and profitability, then the next three products were all awarded 7s.

As a designer, you might use this data to design a layout so that there was one full-width banner for the high ranking product, with a three-column row for the products that scored 7. If asked why you laid out the page in a certain way, you could be confident it was designed from metrics supplied by the team.

In this example, the team had defined the direction of the page layout and the entire team could feel some level of ownership. We find this approach achieves a rapid sign-off with little margin for subjective debate. When this process is combined with MOBLE's dynamic layouts, you can easily drag and drop these ideas as layouts, then present them on-screen live during the workshop session. You can even get sign-off instantly there and then.

Imagine you were presenting five menu navigation options from the best websites around the world. Everybody would be asked to rank the options as a team to reach a ranking consensus. Once everyone agreed, you could then design something very similar, perhaps combining features of the different options that scored highly. You would have clear design direction, again a decision led by the team, giving you rapid sign-off.

By putting numbers against subjective things, you are able to quantify opinions and assess them accurately. This allows you to prioritise ideas for web page design.

Often we express words in ways that might seem to give more prominence to certain things, when actually it might not be so important at all. MOBLE's Dynamic Workshops creates a dashboard of metrics that is the joint consensus of the entire project team. This allows you to design and build accurately, with a consistent reference point throughout the build.

For a step-by-step guide for running a dynamic workshop and to discover exactly what questions MOBLE asks and what data we capture, jump to the next Episode and be one of the first to use our new dynamic workshop software. 

Episode 4. How to execute a website workshop like a pro.
 

MOBLE offers unlimited design revisions to all clients because the Dynamic Workshop process is so solid. As of February 2018, all MOBLE websites come with MOBLE's Dynamic Workshop Widget, which is a step by step, easy to follow, practical guide to recording metrics of the entire workshop process.

Step 2. Dynamic Styles
 

Series 2: Dynamic Styles


Great, you’ve done the workshop! Now you’ll want to bring your client’s brand onto the website user interface.

You’ll note we’re not moving into wireframes. To MOBLE there is no distinction between a wireframe, visual design layout and code. We’ll explain why when we move on to Step 3: Dynamic Layouts.

Before playing with layouts, we must input the websites' colours, fonts, header and granular elements like buttons and hover-over effects. For newbies, this is the website CSS (Cascading Styles Sheet) and is fundamental to User Interface (UI) design.

Think of CSS like your website's master control sheet of styles. In CSS you could control a colour. When you update it, that colour will update in every instance around the entire website. This saves huge amounts of time. Before CSS you might have had to go back and change that colour in every location where it existed.

This would have taken a huge amount of time.

Even worse: Imagine if you were doing a visual design in a programme like Photoshop. You would have to change this in every location of every screen mock-up. Programs like Sketch and its symbols function go a long way to improving this process, though it still struggles with mass updating elements like padding and alignment.

Other elements that can be mass updated in CSS are things like buttons, fonts and effects.

MOBLE's dynamic styles brings CSS into a User Interface (UI), so even a beginner can design easily without code. There’s no reason you wouldn't start a design with the website styles, playing with colours and fonts and previewing concepts of what the website might look like.

Dynamic styles let you control the main elements of your website CSS. We’ve introduced more and more elements to the UI as our clients have asked to control more granular elements.

You can now pick and choose from a range of button options, as well as hover-over effects that can be used on images and grids. As CSS advances, we’ll no doubt continue to release more elements to the Dynamic Styles area, so if you see something missing that you’d like to control, please do let us know. MOBLE is an open CMS, meaning any designer or developer can access the core website CSS and JS. If you’re a front-end developer, you have access to create your own styles.

MOBLE doesn’t lock you in like old propriety CMS software

When creating MOBLE, we didn't want to design a system that controlled the design economy, where clients would have to come to MOBLE to make changes. We’re open-source advocates. It's important to us that teams can write their own code without steep barriers for new developers.

We also wanted a system that follows a consistent coding framework, meaning one developer may pick up another’s code. We provide maintenance to help websites stay up to date and bug-free.

This approach is the best of both worlds: A CMS that doesn’t lock you in and one that assists in the ongoing maintenance, with no hidden fees or surprises along the way. You can read more about this in the final episode of this series that debates open source and proprietary software and where MOBLE sits between the two.

Series 2 is an entire 'How to' video guide of the Styles area. It’s also fairly intuitive just to get your hands dirty and have a play. It is important that we mention styles here, as it’s an essential prerequisite to dynamic layouts – alongside dynamic widgets arguably the most enjoyable features of a MOBLE website.

Now let's move on to understand dynamic layouts, why this feature completely transforms the old web design process to deliver a faster, more creative and dynamic website building process.


3. Dynamic Layouts
 

Series 3: Dynamic Layouts

Responsive layouts. No more wireframes. 

Ok, so now your styles are set and via the workshop, you intermittently know you your business and what you must include on each page. You're now ready to head to the canvas to start pixel shifting and create your website layouts.

A MOBLE website has no distinction between a Wireframe, Visual Design Layout, and Code. There is simply no need to use programs like Photoshop or Sketch to mock up website screens when you can do it just as easily straight into the website.

Whats more, when designing within the website CMS the Layouts are instantly responsive, so you don't have to mock both Wireframes and Visual Designs in mobile, tablet and desktop.

Just think about that, if you were designing a website Home page in the old process you would:

  1. Create Wireframes for Mobile, Tablet, and Desktop
  2. Go through a revisions process and get them signed off
  3. Create Visual design for Mobile, Tablet, and Desktop
  4. Go through a revisions process and get them signed off
  5. Code the designs to make them responsive on Mobile, Tablet, and Desktop


So for the home page, you would previously create six different mockups before coding. Then, you would have to do this for the other website screens as well.

Hang on, does anybody still go to all that effort? Or, do you find yourself convincing your team, or client, that you have a good conceptual idea after a mockup or two, and the rest can be done in the code phase?

If you do skip mocks, are you just moving the process along, or are you still leaving yourself open to later unknowns? This was a big discussion for Danny and I when we first started out. Standing at the whiteboard of creating a brand new CMS, a solution to this would be front and centre. If we were to remove these apparent time-wasting processes, we could move towards our goals; having more time to be creative with the client budget and more time to focus on their website's goals and KPIs.

We wanted an interface that allowed anyone to design a layout directly within the web page. This meant the layouts would be instantly responsive and pre-viewable on mobile, tablet and desktop. There would be no need to mock up variants.

Next, we realised if you could toggle between wireframe and visual design mode, there would be no need to design two phases of mocks that were ultimately the same markup. Finally, we realised that if the layouts could pull the CSS from the Styles area, the layouts would instantly take on the client’s branding.

100's of CSS friendly base layouts

We didn't want all layouts to look the same, so we started developing familiar tools that designers would use in Photoshop and Sketch and bring these into the User Interface, so anybody could design without code. Common features such as overlay opacity, padding, alignment, background images, background videos, background colours were all added. The list goes on.

To make things even easier, we set about designing hundreds of base layouts that could be dragged onto a page to get you started. These were the common layouts that we'd use time and again. When creating a new design, we'd simply drag these onto the page, configure them and the job was done.

Customise and save your own Layouts. No old school limitations Page Templates and Themes

To empower clients, we'd save their custom layouts, fully configured with their branding. So when their content teams wanted to create new pages in the future, they could simply drag in the layouts and place them in any combination on the page. The end result would be that each page could take on a new look.

It wouldn't look like it was a purchased theme that had limited page layouts. Or worse, where every page had to be built from scratch to meet its unique objectives. When you save a layout on MOBLE, a copy and screenshots are instantly taken and the layout is instantly available to be dragged anywhere onto any page. The time saving both during the build and in ongoing management is outrageously high.

What's more, the website design becomes amazingly flexible, in being able to create pages specifically in line with the results from the Dynamic Workshop. At the same time, the website retains consistent branding, pulling consistent styles from the dynamic styles editor.

Social Layouts. Design, Share and Sell your Layouts

We are now about to release our favourite layouts of the month and have this available in a section of our website called Inspire, but also available in the editor so you can use the very best layouts of all time on your designs. You can simply drag them onto your page in any combination and it will instantly pull your branding from your CSS. In forthcoming releases, all layouts can be uploaded and shared with the community. Designers will be able to charge a fee for their favourite Layouts, or simply use the platform to attract attention and generate new leads.

Practice what you preach

When we realised what was possible with Dynamic Layouts, we were feeling pretty good. We just had to build it! Naturally, this would take some time. To do this we planned a clear roadmap allowing us to get new clients onboard while introducing new features to them. To keep iterating the product, we would test with paying website customers and get valuable real-world feedback. 

We were all in then as we are today. We hope to continue this logic as we move forward. We built a tool for ourselves to build better websites and share these tools with the design community. To achieve this long into the future, MOBLE will perhaps always continue design for a select bunch of direct clients and design agencies, to help us deeply understand both client and designer requirements. Not least, helping sustain positive cash flow in these formative years to pay the bills along the way!


Episode 5 of this Series we look deeper at MOBLE's Dynamic Layouts. When writing this article I started to list out the benefits but the list just goes on too long. So jump ahead to that article to get a deeper understanding. So jump ahead to that article to get a deeper understanding. Series 3 is a 'How to' guide on MOBLE's Dynamic Layouts

However, I recommend that you have a quick read of Dynamic Widgets and Dynamic Growth below, as this system really will step you up a notch in truly becoming a Website Design Pro.


Step 4. Dynamic Widgets

 

Series 4: Dynamic Widgets

Powering large websites with 100's of pages

You’ve now carried out a Dynamic Workshop to define your website pages, your navigation, and your most important content. You've used Dynamic Styles to bring your brand identity on to your website and you've created a series of Dynamic Layouts to give you the flexibility to create new pages rapidly on the fly.

At this point, small website owners might consider going live. If yours is a large site with many pages, images and videos, you might want to have feeds of content for things like news, blogs, events and galleries. You might wish to display them in dynamic ways using grids, lists, masonry block or carousels. You might even wish to apply hover over animations to your feeds to make them more interactive and deliver a premium user experience.

You’re now ready for Dynamic Widgets. You’re going to turn your website into a content-publishing machine to create dynamic feeds of large volumes of content, that automatically keep your website up to date without you even having to edit a page.

Having worked in the Enterprise level CMS space, I was privy to features that large organisations deemed valuable for saving time when producing sizable volumes of content. It never escaped my thinking that these features could be used by the startup, the SME and the mid-market, where my passion in business truly lies.

At the drawing board, Danny and I wondered if it was possible to create one 'super' widget that could sit anywhere on any page. We thought if a widget was treated just like any other page component, like an image, within the page editor, it could be placed anywhere on the page in any dimension. It could be full width, it could sit in two-thirds of the page with text to the right; any size could be possible. So you could have a news feed that sat in one column, or a photo gallery, or image slider that occupied three-quarters of the page.

There would be no restrictions on what anybody could do with a widget right from within the page editor. This was going to get interesting!

Next, we broke down the different types of content that could be displayed in a widget and then the different modes in which content could be displayed. It ended up looking something like this:
 

PAGE TYPES:

  • Pages
  • Landing Pages
  • Blogs
  • Events
  • Products
  • Sections (Pages that don't have a URL, that are Editable like any other page. E.g. A footer, or a Slide In Call to Action)

FILE TYPES:

  • Images
  • Documents
  • Videos
  • Audios
  • Ads

WIDGET TYPES:

  • Grid
  • Portfolio
  • Masonry
  • Mix
  • Blog
  • Event
  • Product
  • Gallery
  • Slider
  • Multi-Slider (Carousel)
  • Testimonial
  • List


We knew that if you could apply a tag to any page or file type, you could group similar content together. For example, you could tag certain images with 'Sydney' if they were relevant to Sydney. Then, in the widget, you could decide to show images in a gallery that were tagged with 'Sydney'. At this point, you would instantly have an image gallery showing photos of Sydney.

Now let's say you wanted to add 'Melbourne' to the gallery, or all of 'Australia'. You'd simply add these tags to your widget and it would pull all of these images instantly into the feed.

We then realised we could apply granular controls to the widget so that the following could be controlled:

  • Tag Matching Combinations (must show items with all tags, or show any items that have any of the tags)
  • Date Range
  • Author
  • Sort Order
  • Number of Columns (for Grids, Masonry etc)
  • Hover Over Effect
  • Image Aspect Ratio
  • Gutter Width
  • Widget Height


This means many widgets could be used on the same page. Think of large news websites like BBC.com or SBS.com: Each has many widgets on its home page. Some feeds pull content like News, Culture, Sport, Rugby and Rugby NSW. Some feeds are multimedia, pulling images, pages and videos for events, e.g. Vivid Festival.

What you display, when you display it, and how it looks are all controllable without any database work or coding. It just works.

Next, we started using the widget for our client projects and the power of tagging content in this way became strikingly evident. We were revolutionising the speed at which we work internally and seeing an amazing adoption rate from the clients in helping to upload content.

Clients just found it so easy! A mundane content-loading task was actually becoming fun.

We then set about enhancing the speed of which content could be uploaded and tagged, introducing the following:

  • A compression engine to automatically resize images as they were uploaded, to keep the page loading fast and zippy.
  • To reduce load time in the backend editor we wrote a script to that the same image could be used in any widget with any aspect ratio. We effectively automatically create a square, 16x9, 4x3 and 3x4 versions of the image as soon as it's uploaded. The client doesn't have to upload duplicate size variants of the image or worry about how an image looks when it is presented at different aspect ratios.
  • A bulk upload feature allowing images to be tagged on upload in large bulk batches
  • A Tag Manager so that all items across the entire website, whether Pages or Files could be tagged in Bulk from a User Interface. The Tag Manager means you can control all Widgets across your website from one area, without even having to edit a single Page.
  • We finally made sure that wherever you are in the CMS, you could Tag a content item, you wouldn't necessarily have to go back to the Tag Manager or the Files, or Pages area, you can just tag on the fly.


As we developed later applications in MOBLE, tags really became a core feature of everything we do, whether it was tagging new enquiries as they came in, creating permission groups for admin users, or grouping tasks in the Road Map. We'd use tags to make light work of content management and keep a large amount of data organised and dynamically publishable.

If you want to know more, check out Episode 9 of this Series which is a Q&A style interview about Dynamic Widgets.

For a full 'How to' of using Dynamic Widgets like a Pro, jump ahead to Series 3.


Step 5. Dynamic Growth

Most likely your website will serve as more than just an online presence. Business websites are made to grow the business, whether that is generating new leads, making sales, online bookings, growing your customer database or just make you look damn hot.

Before starting MOBLE, I grew business websites for well over five years. I've personally worked on over 2,000 websites and have run a few of my own businesses to varying success. One thing I've always been passionate about is business models and sales.

I suppose it's not the normal situation for a designer to be a salesperson, but then again, neither was a career focus of mine after graduating in biological science. Business, sales and design have always been a holistic thing to me. In hindsight, I think this is because when I started selling websites, I had to explain to customers what an email address was. Back then it was less about aesthetics and conversion optimisation, so as web design trends evolved, my design skills naturally evolved with it.

MOBLE v's the Pirates. AARRR!

At the time when MOBLE launched, traditional email marketing was in swift transition to marketing automation. Silicon Valley megastars were talking about the shift from Nurturing, Acquisition, and Retention to the Pirate Metrics (AARRR!), of Acquisition, Activation, Retention, Renewal, Referral.

These inspiring talks can be found on YouTube and set the foundation of how to start a startup for a software application. I too was inspired by these talks, though after years in sales, I knew these techniques only focused on the application itself and how it onboarded and retained users for mobile and web applications.

The techniques might have had merit for MOBLE as a SaaS provider, though it was unlikely that they could be adopted by our clients, especially the SMEs of Australia.

The reason for this really comes down to numbers, population size, and statistical significance. It’s hard to use techniques built for scaling SaaS startups via subscriptions models for a regular business that focuses on a core product sale.

Example:
AARRR would be suitable for Netflix or the $1 Shaving Club.
AARRR would not be suitable for an Australian-based construction company.


Nevertheless, I was truly inspired by what came out of Silicon Valley and remain an absolute advocate of these principles for the right type of business. So with this in mind, I set about creating a new model that could work more generically for all businesses. It would use 15 years of my own sales experience, alongside a dedicated six months of extensive research on business models and talking to successful business owners and team members.

Later, we introduced the system to MOBLE clients and it's gone on to become a key part of how we design and build websites and, more recently, structure strategy workshops, for clients looking to utilise our expertise to get their own business website off on the right foot.

So let's have a look at the M.O.B.L.E. philosophy for Dynamic Growth

The M.O.B.L.E. philosophy is about growing your customer database, then using traditional sales and marketing techniques to acquire sales from that database.

In a world with spiraling advertising costs, more online competition, a low population of 24 million, with a high volume of small businesses, it's perhaps true to say that generating a strong ROI from Digital Marketing in Australia is becoming ever more difficult. Certainly, spend does need to go up from where it was in the past, even if ROI is the same.

With this in mind, building your own relevant customer base remains one of the most powerful forms of security that your business can have.

THE M.O.B.L.E. PHILOSOPHY

Motivate: Grow your customer database

Onboard: Win a small sale that proves your service

Build: Sell your core product

Loyalty: Keep customers coming back

Expose: Push your business virally


Today a MOBLE website is built with these principals in mind and this Philosophy has become key to everything we do. In developing MOBLE we've introduced the following website features:

  • Call to actions in sticky headers
  • A Form Builder to take payments to onboard clients
  • Integrations with the worlds leading Marketing Automation software
  • Page content that can be quickly modified as you learn from the results of your campaigns

In forthcoming releases within the next few months we will be releasing:

  • Dedicated 'Motivate' and 'Onboard' Dynamic Layouts
  • A/B testing
  • Personalisation
  • Business Intelligence Dashboards


We’re super-excited about the progress of these features, coming soon! These will add substantial weight to your low-cost CMS subscription.

Episode 10 of this series covers our philosophy for growth in much more detail and talks about easy to follow techniques that you can apply to your website. There is a downloadable infographic of the M.O.B.L.E. growth funnel and also access to our free campaign ideation tool, loaded with 50 tips and tricks you can use for customer database success.

So, if you're still reading, well done, you made it to the end of this episode without falling asleep! You’re my hero ‒ now go and get free stuff. You're on your way to becoming a website design pro.

The outcome of a MOBLE Strategy session is your own Marketing Funnel. Once your funnel is created it is applied to your MOBLE website enquiries, CRM, user management and payment system. We then automatically integrate it with your Marketing Automation software such as Autopilot. Here we share MOBLE's actual growth funnel and how we use it to Motivate, Onboard and Build our community.

S1. Episode 10: Dynamic Growth

What do you think?

Do you agree with MOBLE's 5 Dynamics? Do you see a design conflict or issues in the commercial environment? Have your say below!


Not signed up to MOBLE yet?

Create your website now www.moble.com.
The first 1,000 subscribers will get their first 24 pages for only $9 per month, for life. If you hadn't guessed it, that's our 'Onboard' strategy! 

Let us know your thoughts?

 

Recommended Reading

* Luke Wroblewski. https://www.lukew.com 
Since his early musings that inspired MOBLE, Luke has remained a thought leader for digital product design and responsive website design at large. Now a Product Director at Google, previously he was the CEO and Co-founder of Polar (acquired by Google in 2014) and the Chief Product Officer and Co-Founder of Bagcheck (acquired by Twitter in 2011).