OCTOBER 19, 2014

VS.

WEBSITE DEVELOPMENT PLATFORMS

A COMPARISON BASED ON USABILITY TEST FINDINGS

INTRODUCTION:
This white paper details findings from a usability test evaluating two website development
platforms: Doodlekit and Weebly. Both are websites offering free webpage customization and
publishing. The test determined the ease of use to the average person. The test was constructed
by me, an average university student. The user demographic would be university students in their
mid-20s, designing a website as part of a class project. The users have basic knowledge of word
processing, operating system and internet use, but no experience creating websites.
METHODS:
The test was conducted at my apartment on 11 October, 2014. I used an Asus laptop with basic
computing specifications including: a 2.16 gigahertz processor, 4 gigabytes of random access
memory (RAM), and one 500 gigabyte hard drive. The laptop was running the Windows 8.1
operating system and Internet Explore was the web browser used. I employed a Likert scale to
help detail my findings. The scale ranges from one to three. One means a given task was
difficult to accomplish. Three means the task was easy to accomplish. A total Likert scale rating
will appear in the recommendations section to determine which platform was easier to use. The
test criteria and Likert scale are shown below.
Test Criteria:
1. Account creation
2. Choosing a template
3. Navigating the toolbar
4. Adding a second page
5. Changing website font
6. Adding an image
7. Choosing a domain name
8. Publishing the website
9. Accessing code
10. Deleting the website
Likert Scale:
This simple Likert scale allows the user to rank their experience performing each task. Users are
asked to take two things into account when performing a task: Ease of use of the platform and
how intuitive the design is. The score of each task is a combination of these two factors.
1
Difficult

2
Average

3
Easy

RESULTS
Task 1: Account Creation
Doodlekit: Score: 3
To create a website users navigate to the homepage
and scroll down to find a button labeled Sign up
free now. After clicking the button the user is
confronted with a box asking for the users full
name, email, and a password. After clicking Create
my website now the user is directed to the editor
page. A sample of the sign up button and create
account box is shown in Figure 1.
Fig. 1

Weebly: Score: 3
Weebly asks for a full name, email, and password. After clicking Get Started Weebly asks
what package the user wants to sign up for. There are options for 0, 4, 10, & 25 dollar per month
packages. Each package adds certain tools and features the previous option lacked. It then asks
if the site will be a personal website, a blog, or a store webpage. After this the user is directed to
the theme page. Figures 2 and 2-1 show the sign up and website focus boxes

Fig. 2-1

Fig. 2

Task 2: Choosing a template

Doodlekit: Score: 2
To change the template a user clicks the
Template button located at the top of the
sample website page. A box then opens
showing different color and style templates
from which the user can choose. A user can
also edit their template by clicking the green
template wizard button or the red edit
current template button. The template
wizard streamlines the editing process while
the Edit current template command allows
for more in depth customization. Figure 3
shows the template box and editing buttons.

Fig. 3

Weebly: Score: 3
A template in Weebly is also
called a theme. Theme
selection happens during
account creation. A window is
shown asking the user to
choose a theme. There are
multiple pages showing
different styles and colors. To
choose a theme the user clicks
the choose button located at the
bottom of the template. Figure
4 shows an example of theme selection.

Fig. 4

Task 3: Navigating the toolbar

Doodlekit: Score: 1
To reach the editor page the user clicks the Admin Tools button at the top of their webpage
example. This takes the user to a page where they can change anything regarding their site. If
the user would like to change something specific red edit buttons are found at the top of all
features of the website. This will take the user to a box showing multiple options for the chosen
feature. Figure 5 and 5-1 show the different editing options for Doodlekit.

Fig. 5

Fig. 5-1

Weebly: Score: 3
Toolbars are fairly intuitive. There are five tabs at the top of the editing page providing tools to
enhance the website. The tabs include Build, Design, Page, Store, and Settings. These
tabs each open a different page that contain a sidebars. These sidebars display tools users will
use to customize their website. Different tools are located on a single page within the sidebar
with a slider to scroll through the different sections. The arrows in Figure 6 show the location of
tabs and toolbars.

Task 4: Adding a second page

Doodlekit: Score: 2
The user must click the Admin Tools button located at the top of their website example. As
shown in figure 7, the user then clicks a Pages/Menus tab and is shown the Pages/Menus
Administration section. A button marked +Page is clicked and a box is shown with basic
editing information. The user can choose a page title, page subtitle, and can insert their desired
page content.

Fig. 6
Fig. 7

Weebly: Score: 2
To add a page the user navigates to the Pages section of the editor. In
this section the user clicks an orange button labeled Add page. A box
opens asking the user what type of page they are adding. If a standard page
is selected, a new page appears on the list of pages. The user then chooses
the page name, page layout, or chooses to edit more advanced settings of
the page. The add page options are illustrated in Figure 8.
Fig. 8

Task 5: Changing website font

Doodlekit: Score: 1
The title font for all sections can be changed by clicking Admin Tools and clicking the
Change Title Font link on the left hand side of the page. The box in Figure 9 is shown
displaying different fonts the user can select. Title fonts are automatically changed but the user
must visit the website example page to ensure the change has been implemented. The user can
also click a red Quick Edit button on the website example page. This will bring up the box
shown in Figure 9-1. A simple font tool bar is given. The font size and color can be changed but
not the font type.

Fig. 9

Fig. 9-1

Weebly: Score: 2
To change the font of any text on the website, the user navigates to the design section of the
editing page. The user clicks on a Change Font button on the tool bar and is shown all text
options displayed on the website. After choosing which text the user would like to change
another tool bar opens displaying font, size, line weight, color, and line height. Changes selected
by the user are immediately implemented and can be seen in the white space to the left of the
toolbar. Figure 10 shows a walkthrough of the toolbars.

Fig. 10

Task 6: Adding an image

Doodlekit: Score: 2
The user again navigates to the Admin Tools section of the editing page. The user clicks the
Images tab and is shown the Doodlekit image library. The user can add an existing picture,
upload a picture, or delete pictures as needed. Double clicking on an image opens an editing
box. The user can change the image name, tags, description, and has access to basic editing
tools. Figures 11 and 11-1 show the image selection and editing windows.

Fig. 11

Weebly: Score:
3
The user drags
the picture tool
on the sidebar to
the website
section at the
right of the
Fig. 11-1

toolbar. The user clicks the resulting image box and chooses the source of the picture. Options
include selecting a photo from their personal computer, searching the internet, favorite pictures,
and adding the URL of a picture. To remove the photo the user clicks the delete button at the top
right of the picture box. An example of the image selection box is shown in Figure 12.

Fig. 12

Task 7: Choosing a domain name

Doodlekit: Score: 2
In the Admin Tools section the user clicks Settings and then
Domain Name. The users website domain is shown as
illustrated in Figure 13. Clicking the box with the subdomain
allows the user to change the domain to their liking. The user also
has the option to keep using a subdomain of Doodlekit or
upgrading their website subscription and choosing their own
domain name. After clicking the Save button the domain name
automatically changed. The domain name only appears in this
section and cannot be seen on the website example page.

is

Fig. 13

Weebly: Score 3
Choosing a domain name is part of account creation but
is verified when publishing the website. Three options
are given on both occasions: Use a subdomain of
Weebly, register a new domain name, or connect to a
domain the user already owns. The user clicks the dot
next to their choice (shown in Figure 14) and clicks the
continue box. The only place the domain can be seen is
on this page or the settings tab on the website builder
page.

Fig. 14

Task 8: Publishing the website

Fig. 15: Doodlekit publishing button.

Doodlekit: Score: 3
A green Publish Site button is
located right of center on the
example website page. After the user clicks this button a box appears offering two options for
publishing the website: Free and Upgrade. The free option requires the website to be a
subdomain of Doodlekit and a credit card is required to verify you are a real person. It also

shows the URL of the users website. The upgraded version allows for a new domain name
separate from Doodlekit and will allow the user to add new options to their website.
Fig. 16: Weebly publishing button
Weebly: Score 3
An orange Publish button is located
in the upper right hand corner of the
editor page. The user clicks on this
and Weebly verifies the domain selected at startup. The user is asked if they would like to
change the domain. After clicking Continue the user is asked to type words or numbers into a
box for security purposes. After correctly entering the text the user clicks the Publish My Site
button. Weebly verifies the domain once more and the website is posted online.

Task 9: Accessing code

Doodlekit: Score: 1
The user clicks on Admin Tools and clicks the Templates tab. Under Advanced Design
Tools the user will find a button labeled Code. The user is shown a coding box as depicted in
Figure 17. CSS code is the only language that can be utilized. This box allows the user to
override the current layout code for the website. After using the coding box the user must click
the Save button located at the bottom of the page.

Weebly: Score: 2
Fig. 17: Doodlekit coding box
There are two ways to access and implement code: Adding a code box to the website and editing
the entire websites code. Adding a code box to the website is similar to adding an image. On
the side toolbar the user drags an embed code box to the webpage example to the right of the tool
bar. The use clicks the box and adds hypertext markup language (HTML) style code to their
liking (shown in Figure 18). To access the entire websites code the user clicks the Design

Tab and selects Edit HTML/CSS at the bottom of the tool bar. The screen for editing code is
shown in figure 19.

Fig. 18

Fig. 19

Task 10: Deleting the website

Doodlekit: Score: 2
The user chooses the My Account tab at the top of the website example page. They are taken
to a page that details the name of their website, the URL, their payment plan, and credit card
number. At the far right of this information is a button labeled Cancel (seen in Figure 20). If
the user clicks this button the website will be deleted.

Weebly: Score: 3
On the Weebly account page the user must click the More button found next to the Edit
button. A drop down menu appears with several options, including a Delete Site option. After

10

the option is selected, Weebly informs the user that this action is permanent and their website
will be deleted. The user clicks the Delete Site button and the website is taken offline. A
menu walkthrough is shown in Figure 21.

Fig. 21

Likert Scale Results

The Likert scale results are detailed in the table below. Doodlekit scored 19 out of 30 points,
indicating it was difficult to use. Weebly score 26 points out of 30 implying it was easy to use.
These results indicate Weebly was more user friendly and more intuitive than Doodlkit.
Platform:

Average Score:

Doodlekit:

19 of 30 points

Weebly:

26 of 30 points

Recommendations
For the average user, Weebly is a better platform than Doodlekit. Weebly is easier to use
overall, as illustrated by the Likert scores above. Weeblys webpage editor is intuitive and the
tools work flawlessly. Doodlekit is harder to navigate and the tools are not as easy to find or use.
Doodlekit is thus more intimidating and the learning curve is steep. I would suggest using
Weebly to any university aged student with little to no experience creating websites. Weebly
would allow students to create a website quickly and efficiently without any hassle.