March 27, 2020

Creating a functional website and StoryBrand

Your website is a place where people go to learn more about your business and how to get in touch. When built successfully, your website can spread brand awareness and attract followers, leads and customers.

Some characteristics of a functional website are:
- Great information architecture
- Responsive (mobile friendly)
- Fast page loading
- Easy navigation
- Attractive Visual identity

According to a study, the average human being now has an attention span of eight seconds. However, maybe that’s not a bad thing. We’ve never had so many sources of information, it’s only logical that our minds had to find a way to keep up! People don’t read websites, they scan them. Recent eye-tracking studies show people scan website content in the F-shape pattern. They tend to look more thoroughly at the text placed close to the top of the page, and then spend less time on information that appears low on the page.

Here are some tips on how to build a better website:

1. Your offer should be "above the fold". The fold is the part of the website visible without scrolling. It’s important that people who visit your homepage understand what you do and how you can help them. What problem can you solve for them?

2. Try to remove “noise” from your website and follow the KISS principle (Keep it simple, Stupid). “Noise” is everything that doesn’t present meaning to the people visiting your page. Visitors should be able to understand your business in a few seconds. Try replacing long boring texts about your business with intriguing stories, images or videos. Remember, your brand is not the hero of the story. Focus on the real hero - your client.

3. Place CTAs at the top left and right sides of your website. CTAs are call-to-action buttons such as “Contact us”, "Buy now". This is where the users begin and end their horizontal scanning. This momentary pause as they drop down gives them a little extra time to consider.

4. Use obvious call to action elements. Although some studies praise the F-shape pattern, Miller mentions a Z-shape pattern and two main places for a CTA. The top right of your website and the center of the screen, above the fold. I suppose both suggestions are OK. For better results, your CTAs should be a different colour from any other button on the website. You want the button to follow the user throughout the website, remember users don’t read your website, they scan it.

5. Use images that show success (depending on your business). The images on your website also tell a story. If your site presents skin products, use images that communicate a sense of well-being and satisfaction. People interacting with your product should communicate the goals you have set for your brand.

6. Don’t use a lot of words. Try to replace some of that text with an image or infographic, chart video or simply add a “Read more” button behind the first paragraph. ​​​​​​​​​​​​​​However, in some businesses you might need to display a lot of text on your website.

There are many freelancers willing to create a website design for a low budget, and there are just as many start-ups eager to develop them. Be careful when choosing a partner. Make sure they have expertise in web design and web development. Check their Work page to see what kind of clients they have collaborated with. ​​​​​​​


A StoryBrand

A StoryBrand or SB7 framework was developed by Donald Miller and explained in his book “Building a StoryBrand: Clarify your message so customers will listen”. This framework helps us organise information in such a way that people are compelled to listen.

A great story is easy to follow and comprehend, it can hold a person’s attention for hours. People don’t buy the best products, they buy the products they understand the fastest.

This framework isn’t new, it’s been used in the movie industry for decades. Think of Tarantino’s movie “Once Upon a Time in Hollywood”, it lasts for 2h and 40min! Did you feel bored while watching? I don’t think so.

SB7 framework follows this plot: ​​​​​​​

Basically, your business / brand is THE GUIDE and your customer / client is THE HERO. It’s your job to help the hero fulfil a goal, in other words, the story should end with success.

Three ways to end a story with success are:
1. Allowing the hero some sort of power or position.
2. Allowing the hero to become unified with somebody or something that makes them whole.
3. Allowing the hero experience some kind of self-realisation.

Ask yourself, what does your brand have to offer? Does it help people fulfil a goal? A great example is Dove’s Real Beauty campaign which provides “a purpose driven example of corporate social responsibility”. Instead of using beautiful supermodels, their campaigns encourage women to accept their body shape, size, colour and age.

It is also important to reflect on failure as a possible outcome. Brand’s that don’t warn their customers about what could happen if they don’t buy their product or use their service, fail to answer the “so what” question customers are secretly asking. ​​​​​​​​​​​​​​


Process of creating a website at STUDIO33

Before we start working on your project, we need to gather as much input as possible. Not familiar with web development, hosting, CMS...? Don't worry, our team will explain everything you need to know.

After accepting our offer, a list of tasks will be set up in Asana, and a profile will be created for you. Easily keep track of task status, start date, due date and comments.

We will send you a brief for web design to help you define your project. The brief (questionnaire) may contain questions such as:
- What goals do you wish to achieve with your new website, web shop or app?
- Does your brand have a Visual identity?
- What is your target audience?
- What do you want people to feel, do or think while browsing your web solution?
- Will your web solution have multi-language?
- Do we need to connect to a third party?
- Does your solution need to be responsive?
- Do you have all texts, translations, images, graphs...?
- Do you have a domain, server and hosting?

SIMPLE WEB SOLUTIONS. Once you have approved the designs, the web development phase will begin. Development will be divided into smaller chunks. We will set a goal for every 1 or 2 weeks, track progress of tasks and evaluate the developed solution which will be located on a staging domain. The entire solution will be pushed live after the QA (Quality Assurance) has approved the solution and content has been entered into the CMS (Custom Management System).

COMPLEX WEB SOLUTIONS. Defining every component and functionality is going to be time (and money) consuming and difficult. It could take an entire year before you see your solution up and running. Instead of trying to define EVERYTHING, we will focus on functionalities that are a “must have”. For example, a section of your website (app or custom system) that generates the most leads or the ability to sell your product online. These priorities should be developed first and pushed live asap. Everything else can be added to your web solution later on, encouraging continuous growth. Every week you will be able to present a cool new functionality to your followers and users! This approach is also called Growth Driven Design.

Many IT firms offer design as part of their services, and there’s nothing wrong with that, but often their designers lack experience when it comes to developing a Visual identity or designing a website that can support your StoryBrand. ​​​​​​​


Website launch checklist

Here is a short questionnaire you can run through before launching your WordPress website.

  1. Have I tested the contact form? Have all of the verification messages been translated? We usually use Contact form 7.
  2. Have I entered meta descriptions in every page? Try Yoast SEO.
  3. Have I inserted the Google Analytics snippet? Is the Google Analytics profile collecting website data?
  4. Have I implemented a plugin for security? VaultPress should do the trick.
  5. Have I tested sharing a page on Facebook? If you don’t see the featured image or meta description, try Facebook Sharing Debugger.
  6. Have I implemented a plugin for cache? Try W3 Total Cache plugin.
  7. Have I created a 404 page? Funny how we sometimes forget the obvious.
  8. Have I optimised images? Large images will slow down your website. Squoosh is a great tool. You can test your website with GTmetrix and other online tools to check if images are optimised.

Need more help? Visit and


Project documentation

I used to manage projects without a document, relying solely on tasks that have been setup and approved design screens. As development moved on, things quickly got out of hand! Project management became challenging and I would often go through dozens of tasks and emails searching for change requests, reminding myself how a certain functionality should be developed.

I found that writing a documentation helps define functionalities and keep track of change requests.

Here are a few pointers I hope you find useful:

  • Create the document on Google Drive at the beginning of the project and share it with everyone involved in the project.
  • Only the Project manager should have permission to edit, everyone else can leave comments.
  • Everyone should be able to understand the document since it isn't technical and complex.
  • If you are adding a new functionality to a solution, you can add it to the document and ask the client (or team members) to review and approve.
  • Instead of describing a functionality in (Asana) tasks, you can post a screenshot of the documentation (or link).
  • Describe the approved design in detail and insert screenshots. Even the most simple functionalities should be explained.
  • Every change in the design should be documented. I find it best to erase the “old” and leave the “new” - that way people reading the document won’t get confused and will know what is expected.
  • Download a PDF after several changes have been made, insert the date into the document title (example "ProjectName - Documentation - 31.3.20." and save a copy.
  • The document is very useful while testing since it is basically a checklist for your QA team. You can leave comments for your team, drawing their attention to certain sections of the document.


Thanks for reading!
Author: Odinea Sudic, project manager

STUDIO 33 d.o.o.


+385 95 511 8848
+385 99 789 7899

STUDIO 33 d.o.o.


+385 95 511 8848
+385 99 789 7899

STUDIO 33 d.o.o.


+385 95 511 8848
+385 99 789 7899

STUDIO 33 d.o.o.


+385 95 511 8848
+385 99 789 7899

©2020 STUDIO 33® All Rights Reserved.

©2020 STUDIO 33® All Rights Reserved.

©2020 STUDIO 33® All Rights Reserved.