An all in one web design tool kit. Design in the editor without code, or get under the hood to write HTML, CSS & JS. Be the designer every business loves and make beautiful drag and drop layouts for your clients to enjoy.
Watch as 1000's of Drag and Drop layouts are instantly tailored to your Brand. Manage content in moments with a beautiful visual editor, supported by powerful dynamic widgets to serve news, galleries, media, docs and more.
With the Frame Tools you can create any combination of content types that you desire. Once you have layouts that you like you can save them to reuse them on any page in the future. Just click the Layouts tab at the top left of this page to view your saved Custom Layouts.
VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW
SPEND 20 MINS IN THIS EPISODE, SAVE 10 DAYS IN DESIGN
Such is the power of MOBLE workshops, we've had clients come into our workshop sessions with the intention of giving their project brief, and actually walk away with a finished website! When we first started MOBLE our average production time was 11 days; now it is not uncommon for us to complete a website in under a day. This rapid production has gone on to spur the creation of our 'Website in a Day' product that is open to 10 clients each and every month.
If you're a business about to build your new website, or, if you're a design agency looking to enhance your processes and profitability, then we highly recommend you take 20 minutes to read this tutorial on how to execute a website workshop. By the end of the session, we will have removed all guesswork and subjectivity in your design process to rapidly create an outstandingly accurate website.
WHERE IS THE WORKSHOP TOOL?
All MOBLE websites come with our Workshop Tool. This is a simple application that helps guide the Workshop process and store your workshop metrics inside your website for reference during the build.
To access the Workshop Tool, go to the Main Menu and select 'Workshop'.
Open your MOBLE Workshop Tool via the Main Menu
WHY DO WEBSITE PROJECTS GO WRONG?
Ok, so now you know where the Workshop Tool lives, before we dive in let's take a moment to understand why website projects can often go dramatically wrong. We can then apply this understanding during the Workshop and be confident of making strong and accurate decisions without any room for subjectivity.
When a website design runs over time and over budget, it's rarely because of unforeseen design or development delays, but more often due to the unaccounted time, cost and quality of Project Management, causing insecurities and scope creep.
The issue of Project Management in website design can largely be attributed to the time spent in speaking with the client and Team around the undefined subjectivities.
These are almost always regarding:
Design look and feel,
Insecurities in producing content that you can be proud of, or content that you know will convert, causing lengthy project delays,
Gaining web industry knowledge during the later stages of the build, causing initial opinions to change,
New Team members being adding to the project during the later stages of the build, such as the CEO, or other key influencers.
A combination of these factors can cause significant delays, stresses and can even result in a once amiable client-agency relationship becoming fractured over the course of the project.
HOW DO MOBLE WORKSHOPS SOLVE THESE PROBLEMS?
Having deeply analysed hundreds of web design projects MOBLE set about designing a system that could:
Rapidly increase the production time of website design projects,
Accurately predict the cost of production,
Offer unlimited design revisions to clients at a fixed cost.
Let's break it down...
DESIGN WITH METRICS, WITHOUT SUBJECTIVITY
If somebody says they "like" your design, that it is "beautiful", they think your work is "great", what does this mean?
Such adjectives are not quantifiable, nor do they have any context.
At MOBLE we have banned the use of adjectives when talking about design and business.
At MOBLE we have banned the use of adjectives when talking about design and business. They are not helpful since they do not accurately quantify the level of "great". One person might say two things are "great" but like one more than the other.
In a workshop situation, let's imagine the client Team consists of a CEO, the Head of Marketing, and the Head of Sales. Our objective is to make all three constituents agree before we start crafting any design layouts.
We first show the Team an example of a menu navigation that slides-in from the right, and here are their results:
CEO - "Love it."
Marketing - "I agree, I like the multi-level drop downs."
Sales - "Yes, the animation is good."
Now, as the designer you show them another example, this time a menu navigation that slides in from the top:
CEO - "Love this one too."
Marketing - "I wonder what would happen when we add more pages."
Sales - "Wow I didn't know you could put forms in menus, that's epic."
The goal of the workshop is to get the client Team to make a decision in the Workshop. We do not want them to leave without a decision being made. If everybody can agree before we start, technically we can get sign off before we begin.
At the moment we are close to an agreement, but there is still too much subjectivity in the answers above to be confident of starting the design of the menu navigation.
So, let's lock this down...
Imagine now if we asked each Team Member to place a 10-1 ranking to quantify how much they liked the functionality. 10 being high, and 1 being extremely dissatisfactory. Let's look at their results:
You can see the adjectives are now absolutely insignificant. Before we introduced metrics we might have been satisfied despite there being an issue in consensus, that might have come back to haunt you later.
In analysing the results, you need not try to define the metrics on behalf of the Team. As the designer, it's important that you say very little. You can politely smile and ask the Team to make a decision, as their answers are essential. If the Team has questions, let them ask.
In this example, both the CEO and Head of Sales like the menu that slides in from the top. The Head of Sales particularly loved that a form could be added inside a Menu, because you would be asking for a conversion, every time the user navigated to a new page.
However, the Head Marketing spotted a potential issue; this particular example of a Top Drawer didn't have multi-level dropdowns. If they were to grow pages in the future, where would the new pages live in the Top Drawer menu navigation?
So, there was a discrepancy, one side focused on conversions, and the other on pragmatism. To handle this situation, MOBLE would explain to the client, that larger sections of the website, such as the Blog, and Services sections, may have new menus to sit on the page. A MOBLE website has unlimited menus and they can be designed anywhere on a page, such as a sidebar with a menu for blogs and category pages.
In this example, the Head of Marketing was satisfied with having category menus for services and blogs and agreed that a streamlined main navigation would be better for conversions. The Head of Marketing then awarded the Top Draw Menu a score of 9, allowing everybody to agree that they would like a Top Draw for their new website design.
Now over in MOBLE, in the Headers area, you would simply select 'Top Draw' in the Header and your entire header menu navigation mark-up would be defined and coded, literally before you've even started.
With this in mind, you can see why MOBLE is confident in offering unlimited design revisions to all of our clients. With this process, the client is empowered to be in control of the design decisions, while also making accurate decisions and all being accountable as a Team. We like to log the Workshop metrics inside your MOBLE website so that you can refer back to it at any time. If there are uncertainties along the way, you can refer back to the metrics to show the client why something was built and why it is right for the project.
So now you understand the philosophy of designing with metrics, let's break the workshop down into key Sectors and let's look at what metrics we like to record, to explicitly define the design direction.
DirtyFeet Menu Section design from scratch in the Visual Editor, that slides in from the Top. The Navigation uses 3 Menus, Links, and Buttons. Notice the menu even includes a 2-step payment form, with secure credit card payments. All built-in MOBLE, without any need for writing code.
THE 8 SECTORS OF A MOBLE WORKSHOPS
At MOBLE we like to break our workshops down into 8 core Sectors. Though depending on the project we might add a few more, or even change the names to suit the client's marketing Team. E.g. we say, 'Customer Segments', other companies say 'Personas', or 'Archetypes'.
Often clients like to break Products and Services into two separate Sectors. You can simply delete any Sectors that you don't require and add new ones via the 'Add Sector' button at the top of the screen.
Or, when you click the 'Edit' button to manage each Sector, you can drag and drop your items inside each other to create a folder of items. So, you could create a separate folder for Products and a separate folder for Services, and keep them both in the same Products and Services tab (see screenshot below).
In the Workshop Area, the 8 core Sectors are already made up for you to start right away. These are:
Products & Services
Call to Actions
We cover specifics for each below.
1. PRODUCT & SERVICES
We ask you to list all of your products and services. You might do this before arriving at the Workshop to save time and ensure you don't miss anything on the day.
We then ask you to score each product and service from 10-1 based on Profitability and Importance. We like to watch you do this, as often it’s not the result of the final score, it's how you get the results that lets the designer truly understand the nuances of your business.
You can see this from the example above with the Head of Sales and Head of Marketing just how critical it would be for the designer to hear those conversions in articulating the design, all the time learning and being inspired, by fully understanding your business.
This framework is critical to design and helps to first understand your products and services. We ask for both Profitability and Importance since often key influencing items are significantly important yet they are not profit related.
We then prioritise the findings by using the Drag feature to present a final list of the most important to least important Products and Services.
Once we know the most important Products, this will influence the design decision. For example, it makes obvious sense to list the items in the product menu by importance and not via alphabetical order. Now everybody agrees on the order.
However, and moreover significantly, it can also determine the design layouts of a page. Let's imagine the results were as follows:
Product 1: 10 | 10
Product 2: 7 | 6
Product 3: 7 | 6
Product 4: 7 | 6
Given that one product was clearly the most important, you might decide to design your page in line with the metrics. In this example, you might have Product 1 as the top row, then products 2, 3 and 4 equally in the next row. If you design the page in this way, you can make very quick decisions without any subjectivity. Your design is based on the absolute metrics of the Team. Who could argue with that?
Let's see how this might look...
MOBLE Products laid out here based on Workshop Metrics. Notice that even if you’re on a mobile device, we elected not to stack the 3 columns to articulate the scenario. Designers out there will know this is truly responsive. We’ll get to this in Series 3.
MOBLE Products laid out here based on Workshop Metrics. Notice that even if you’re on a mobile device, we elected not to stack the 3 columns to articulate the scenario. Designers out there will know this is truly responsive. We’ll get to this in Series 3.
The DirtyFeet Workshop in progress. Each item is draggable and can be dropped into expandable folders, as seen here for 'Revenue Generating Services' and 'Other Services'.
4 HOUSE RULES
Ok, you're starting to get the picture. Before we go further and address content and design, perhaps it's time to introduce the 4 house rules:
1. All Influencers must attend
If you have a marketing person that wants to present the final design to the CEO, you might consider this a red flag. If the CEO is going to influence or sign off decisions, then it is critical that they participate and have ownership in the design process. If they are too busy now, then they certainly won't be wanting to waste time later. Make sure they attend; go to them if you have to.
2. The Designer must attend
It can be tempting for Teams to race ahead and complete the workshop without a designer present, though that removes the very purpose of the exercise. If somebody submits the results in advance, you're going to have to jump in and delete the metrics before the workshop starts.
3. Only one '10'
Often a business owner will say that everything is important and give everything a 10. This is not helpful!! So there is a rule. You can only have one 10, and only two '9's. Great workshops will aim to scale it down through a pyramid, particularly where there are lots of categories.
4. One Team Metric
The objective is to come to a decision as a team. The team must fight it out and all agree on the final metrics per item before you start the design. If everybody agrees now, then there will be no deliberations later. The designer can go ahead and confidently do their job, and everybody can go back to business. This is the most important point, to get everything out in the open. Do be prepared for the occasional argument, and let the team fight it out; this is surprisingly frequent in business. The feedback we get from our clients is that the Workshops are an incredible refresher session for the business, giving everybody a renewed clarity of their business goals and objectives. There might be some tussles, but it always ends in a whole lot of love, a clear direction, and a natural boost in productivity.
'Pages' is a very similar process to Products and Services. List out all of the remaining Pages. For the Products and Services Category Page, give this one label (don’t copy all the Products again!) e.g. call the page 'Products and Services', then give it a score just like any other page.
Pages are typically things like About, Contact etc, however, it's still very important that these have a score. For example, we often see clients putting emphasis on a Contact Page to drive conversions. This will lead us to design a special MOBLE call-to-action (known as 'Action Sections', see Episode 5) in the Header. This is a contact form that sits in the Header and therefore slides-in on every page of your website. MOBLE Action Sections convert incredibility well. Click 'Let's Begin' at the top of this page, for an example of how an Action Sections might work.
Often such discussions lead us to design very special Landing Pages for different campaigns so that we can test the pages and content based on ideas and suggestions in the Workshops.
Each business is different, and being diligent enough to score items that might seem obvious, can bring unexpected rewards that often drive highly personalised aspects of the design. These are invariably the aspects that the Team become proud of and can take ownership for. And there lies the absolute benefit of this approach; the Team is actually designing, and they can feel it. Your role as the designer is the conduit between the Team and your creative skills. Embrace their ownership and everybody will be aligned.
Content is without a doubt the most challenging Sector in the Workshop, for both the Website Designer and the Business. Often projects can be complete with designs signed off and ready to go, all except for the fact the Team is struggling to get the final copy together.
We find the copywriting often falls upon one person, typically the business owners or the Head of Marketing. It is a challenging exercise, that is for some unknown reason not treated with the same esteem as the visual design. For some reason, we all think we can write copy until we actually try. Often the elected person feels immense pressure, more than they ever expected, as they are worried about conversion rates, worried about how copy might sound, or unsure of where the tone of voice meets brand identity.
In the Workshop, keep this Sector simple and find a way for the Team to help. We're not suggesting that you write the copy in the Workshop, though please do dedicate some time to it, to at least list the key points for each key Page.
Add and score content suggestions for each page as follows:
Click 'Edit' next to the 'Content' Sector.
Now you want to set each Page up as a Folder. First, add a new Item for each Page.
Click on a Page so that it highlights, then click 'Add' item button in the top bar.
Drag the new Item over the Page and a dropdown Folder is instantly created.
Create 2-3 (or more) items for each Page.
Perhaps make a quick note to describe the Item.
Score each Item.
Hand the results over to the copywriter.
The copywriter now has a clear framework for the copy that is most important for each page.
In the Folder notes fields, we find it helpful to make a guess at how many words will be required for this Page. This will help the designer get started, while the copy is being written.
At MOBLE we really understand this problem and thankfully we have a process to make it a little easier for all concerned. At MOBLE we believe that copywriting has become as every bit important to the design creative, as the look and feel. In Episode 9, Copywriting Tips for Website Designers we look at why copywriting has evolved with technological enhancements, why it is especially important with the current media-driven world that we live in - a world with tiny screens, tiny attention spans and of course, micro-blogging. We give away detailed tips to copywriting for web designers that help get you from 0-1 at least. We can worry about 10-1, when the website goes live and we use analytics to let us know what copy actually converts.
There is clearly too much to discuss in this Episode, so if you're the copywriter, jump over to Episode 9 and get yourself prepared.
Dirtyfeet.com Content Workshop in progress. Notice the 'Collapse' button can also collapse all items for neat navigation. Items can be dragged in to position of importance.
Click the image above to popup the final DirtyFeet 'About' page.
Prior to the Project Workshop, the MOBLE Team have an internal meeting to start the planning process for your website project. We then go away and research the best websites from around the world that are within your sector, or relevant to your business and brand. We classify these websites in terms of both the design and the functionality, then add them to the Workshop 'Design' sector.
During the workshop we present each design to you and ask the Team to rate each design from 10-1, drawing out your tastes and design preferences into a logical format of understanding.
If you're the Designer, then this is your homework. You must find the very best design example that you can. Often your Team will have lower design expectations than you, so it's important that you choose the references to inspire them and raise the bar as to what it possible. Do encourage and consider any designs that the Team sends to you, though, do not feel these designs should make the final workshop shortlist. It's ok to be a little ruthless, after all, this is an expensive meeting and you're saving everybody time and energy from having to discuss poor quality designs.
To help with your design inspiration in preparing your research, jump ahead to Episode 8, Design Inspiration, Am I A Fraud?We'll show you some of the resources that MOBLE like to refer to for inspiration and discuss how MOBLE can be used to quickly replicate the design ideas that the Team decides upon.
Sometimes MOBLE will have two designers in a Workshop. One of the designers will be mostly silent and be working in the background to recreate the concepts that are being discussed, which means we can often get the designs signed off right there on the spot.
Pondering Pricing with Picasso
Designing at this speed makes some designers and clients feel uncomfortable. It might feel that the designs happen too quickly, or that the client isn't getting value for money when they've paid you a lot of money for something that seems to take only 10 minutes. However, this way of thinking is a false economy. The quicker you get signed off the better for everybody. You are saving the clients time too; they are paying you for this quality of design and quality of service. Much like how the MOBLE software can be used to design in moments, the software is very much our life's work.
You're no doubt aware of this legendary anecdote...
“It’s you—Picasso, the great artist! Oh, you must sketch my portrait! I insist.”
So Picasso agreed to sketch her. After studying her for a moment, he used a single pencil stroke to create her portrait. He handed the women his work of art.
“It’s perfect!” she gushed. “You managed to capture my essence with one stroke, in one moment. Thank you! How much do I owe you?”
“Five thousand dollars” Picasso replied.
“But, what?” the woman sputtered. “How could you want so much money for this picture? It only took you a second to draw it!”
To which Picasso responded, “Madame, it took me my entire life.”
More on pricing in later Episodes...
Visual design is an unquestionably subjective process; each person involved in the Workshop will inevitably have a slightly different interpretation and emotional response to the design research that is presented. Rather than just asking the Team to send the designs that you like, MOBLE encourages designers to show an array of styles that open up the Team up to possibilities that they might not have known existed. Set the expectations very high, show the latest trends and techniques and the end design will be better for it.
The ranking process will reveal similarities of preferences across websites and you will correlate the metrics without subjectivity. After the session, MOBLE will sometimes take a couple of days breathing space before booking a 15-minute refresher meeting over the phone, to confirm the decisions, ensuring a solid platform before the design commences.
DID YOU KNOW?
MOBLE likes to work with Design Agencies to take requests for new features and components that we build into MOBLE to make generic for all users. At the time of writing MOBLE is speaking with leading Australian designers as part of our 'Team Sites' campaign, which is an 'app-store like' section of MOBLE full of styles, components, effects, and animations. Speak to MOBLE today if your project requires custom design and styling that could be made generic for all users.
In a similar fashion as above, now is the time to group your Customer Segments and prioritise them from 10-1 based on profitability and overall importance.
Not every business is the same. This exercise lets us understand from a high level exactly who your customers are and what they buy from you. Often the workshop uncovers Segments that are not even clients, that are key influencers in your customer funnel that are fundamental to your conversion rates.
Often, we're asked to design specific Landing Pages for specific customers; this allows the marketing Team to run ads and campaigns to these pages.
If you're a Marketing Manager or if you have hired a Marketing Team, you will go into much more detail on Customer Segments and may well require a separate marketing workshop. This workshop session is really intended for the Web Designer, so let's stay on track and make sure that this one doesn't flow over into a Marketing Strategy session; there’s time for that later.
MOBLE is an advocate of Marketing Automation and MOBLE Forms automatically integrate with leading marketing automation and email marketing platforms.
If you require technical marketing assistance to set up your website with your marketing automation or business intelligence platform, please do let our Team know. While we are expanding and enhancing our integrations with the best platforms, we currently have a service to build your Marketing Automation campaigns for you. We ensure that you're tracking customer activity to identify the best customer opportunities and automatically send these as leads directly to your Sales Team.
In Episode 10, we reveal MOBLE's 5 Steps to Growth and how we have prepared our own marketing strategy and execution.
In every workshop, there are always unexpected 'magic moments' when somebody says something that makes so much sense it seems to define everything you are trying to achieve in the simplest possible way.
We don't run a Workshop exercise specifically for Call to Actions (we always run out of time), though this is something that we do progressively throughout the Workshop session and continue on it throughout the build.
At the end of the Workshop, we ask everybody to Score each Call to Action that has been conjured up in the session. Now the Website Designer has fantastic pithy maxims to work with during the design.
The Team might have a follow-up ideation session on Call-to-Actions at a later date.
We call this an Ideation Session and it runs like this:
Pick a Team for the Call-to-Action Ideation session (not just managers, invite the wittiest people in the company)
Ask everybody to send 2 ideas for Call-to-Actions
In the session you have 15 minutes. It is a stand-up meeting; this means there is no time to sit down, which keeps everybody focused and in the right creative frame of mind.
Now Score each idea form 10-1
Pass the results to the Copywriter and the Website Designer
More on this in the Copywriting Tips Episode.
Keep a log of Call-to-Actions progressively as ideas come to mind. It will capture those magic moments, and help you during the build.
One of the roles of the Web Designer is to keep a log of Form ideas throughout the session.
Your MOBLE website comes with many Forms out-of-the-box, all of which can be customised and you can add as many new forms as you like.
Again, keep a log progressively. You will be thankful for this list during the build.
It's always good to know who the competitors are, and how they might have solved similar problems that you will embark upon. Often, we ask clients to complete the Competitors Sector before the session. This is because we don't need the scores of competitors so much, but sometimes it is beneficial to reference competitors during certain discussion points. You can learn from your competitors and they can help you bring more context to your Scores.
By asking the Team to list Competitors before the Workshop, you can also Score the relevant designs and functionality during the Design Sector. This offers invaluable extra websites to review, on top of the ones that your designer has selected.
The aim of the designer is to create a website that is 'best in class', which perhaps never was said better than in the words of General Tzu:
"If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle."
Whatever the size of your website, all MOBLE Plans come complete all the features!
MOBLE plans are based on the number of website pages, whatever the size of your website, you can be sure it will be packed with all the features from Dynamic Layouts, to Payment Forms, Integrations, Contact Manager and of course, Web School!
MOBLE. A WEB BUILDER FOR DESIGN. A CMS FOR BUSINESS.
Do it yourself or Hire a Pro! We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.