1. GLOBAL SCOPE PROGRAM SUMMER 2016
UTS TEAM 5
AHMAD KAMIL MUSTAFFA
MEGAN (Yujin) EOM
SPONSOR: FAIR CONSULTING GROUP
MENTOR: JASON DAVISON
2. 2
TABLE OF CONTENT
1.0 Current Issues. 4
1.1 No grid and unbalanced layout. 4
1.2 Photos and images 5
1.3 Text Colours. 5
2.0 Recommendation to change current issues. 6
2.1 Recommendations for grid 6
2.2 Recommendations for images. 6
3.0 Recommendation for Navigation 7
3.1 Navigation Map. 7
3.2 Primary and Sticky Navigation 7
3.3 Link the logo back to the home page. 8
3.4 Footers 8
3.5 Drop down menu 9
4. Font and text 9
5.0 Contents and Design Layout Recommendations. 10
5.1 Home 10
5.2. About us 12
5.2.1. History 12
5.2.2 Team members 13
5.2.3 Partners 13
5.2.4 Blog 13
4.5 Customers 14
4.6 Community 15
4.7 Services 16
4.8 Products 17
4.9 Career 18
4.10 Contact 19
4.11 Template proposals 19
5.0 Detailed information about Testimonials. 19
6. Service Engine Optimisation (SEO) Strategies. 20
6.1 Bucket Brigades 21
6.2 Benefit-Driven Subheaders 22
6.3 APP Formula 24
7.0 Features that should be implemented 25
8. Internet Browser Accessibility. 27
4. 4
Introduction
FAIR Consulting Group is an IT and Management consulting firm with a focus on
Customer Experience Management (CEM). The company help their clients to build an
enhanced customer experience for their customers by increasing their IT platform’s
capabilities. FAIR Consulting Group’s current website is outdated. UTS Global scope
team 5, Megan Eom and Ahmad Mustaffa worked on the project to create a report for
FAIR Consulting Group to review and update their website up to date with modern
technologies and designs. The duration of the project was three weeks. During the three
weeks, global scope team had face to face meeting with FAIR Consulting Group once
every week as well as 15 online meeting every morning. The recommendations were
made on design layout, navigation, contents, features need to be implemented and
search engine optimization. Addition to this, two best fit template to those suggestions
were proposed in the report.
5. 5
1.0 Current Issues.
Fair Consulting Group’s website has number of issues that affect the general image of the
company. Firstly the report discussed the few major issues that need attention to improve it.
1.1 No grid and unbalanced layout.
A balanced and consistently implemented design often increase user’s confidence in the
website. Currently, contents or the websites are placed randomly and this led the appearance of
the contents visually messy. The layout of the contact us and career pages are not consistent to
other pages as they have different blank space on the sides. Grids encourage alignment and
enhance the legibility of the text. Therefore users subconsciously notice that designs appear
more cluttered and organized.
Example of grid based layouts. (https://designschool.canva.com/blog/grid-design/)
1.2 Photos and images
Choosing professional photos for a website is vital for building a good website. The current
images of the website are not engaging to the image of the company and not professional
enough. The images on the product section containing too many words, therefore, it is difficult
6. 6
for visitors to scan the information quickly. In order engage visitors to the website, the solid
contents are encouraged to appear visually appealing and easy to understand.
1.3 Text Colours.
There are usually two types of colours used on contents of a website. Passive colours are the
colours that make up brand identity and image. For Fair Consulting Group will be blue as the
colour of the logo is blue. Action colours are colours that indicate people that it take an action
which means it has a link to another page or a different section. At the moment the company’s
website has no action colours. There are lots of words and sentences highlighted blue and
some of them has link and some of them don’t. The result is that the user does not know what
they can actually click and what they can not.
2.0 Recommendation to change current issues.
These recommendation is provided as a solution of current problem including the issues
on grid and images.
2.1 Recommendations for grid
In order to have a well balanced grid, it is important to have an appropriate program.
“The Grid” is a responsive Wordpress Grid Plugin which is highly recommended by
large number of users. The Grid comes with few different layouts which are matching
with the layout of the template that we are going to propose. Regular license fee is $25
and the below link shows the demo layouts and video tutorial to adopt into Wordpress.
“The Grid”
<https://codecanyon.net/item/the-grid-responsive-wordpress-grid-plugin/13306812>
2.2 Recommendations for images.
It is important for images to have consistency and similar tone of colours. Fair
Consulting Group wants to deliver the sense of warmth and community on the website.
Therefore warm filtered images and little relaxed atmosphere images will be more
engaging to the company. It is best to take a professional photos of the company’s own
however there are some website available that provide free professional images.
In produc section of the current website, it will be nice to have the writings out of the
images as dot point use of more infographic in big size image will be helpful for visitors
7. 7
to understand. The home page image is very important as it is the first image that visitor
is going to see. I propose this image to be very large and occupy almost the whole page
before scroll down. Having an office environment or photo of people working on home
page is recommended it could engage the visitor more to the website.
Website for free professional images with consistent colour tones.
1. Picjumbo
2. Stock up
3. Pexels
Useful keywords for searching images: Business, meeting, office, work, company,
Sydney
3.0 Recommendation for Navigation
Navigation is about how easy it is for visitors of a website to take and action and search around
the website. Effective navigation include a logical page hierarchy, designing clickable buttons
3.1 Navigation Map.
8. 8
3.2 Primary and Sticky Navigation
Primary navigation stands out and is consistent throughout the site. The blue coloured blocks on
the navigation map will sit along the top of the page aligned to the side of the page. This primary
navigation is designed to contrast against everything else on the page therefore easily catches
user’s attention. The order of the menus usually put most important items first and the least
important in the middle. People’s attention is highest at the points at the beginning and at the
end. Below chart shows the “serial position effect”, it is based on the principles of primacy and
recency. The typical location for contact is at the end.
22 Principles of Good Website Navigation and Usability.
(http://swimbi.com/blog/22-principles-of-good-web-navigation-and-maximum-usability/)
We suggest this primary navigation be as well as sticky navigation. Sticky navigation is a menu
that is locked into place so that it does not disappear when the user scrolls down the page.
3.3 Link the logo back to the home page.
The common convention for logo placement is the top left side and have link to the homepage.
3.4 Footers
Footer information is typically small. Therefore colour, weight and contrast between the text
elements and background is vital. Consider simple typefaces (sans serifs with mid weight are
good). Display email signup field, address, email, contact numbers and ,quick links, social
media links. The address should have a links to a google map. The footer will appears on every
pages without change in layout. Subfooter for additional layering is also a very popular practice.
The sub footer can can put additional information such as logos of clients or clients.
Example layout:
9. 9
Sub footer example:
3.5 Drop down menu
The blue menus on the navigation map are the main menu that will always visible without
putting a cursor on it. The white menus will be placed as drop down menu and will only appear
by placing a cursor. The main benefit of this is they facilitate the display of many options at once
and maintain the main page clean. Instead of clicking menu each time, all the white menus are
suggested to be shown one page and scrolled down to read. However, some sections will have
a link to another page for more detailed information. The primary menus will be remained as
sticky menus so can easily navigate back or forward to the information that user want while.
scrolling down.
4. Font and text
Richard Rutter recommended line length for maximum clarity, legibility, and proportion of his
book “Web Typography”. He suggested that paragraph on the web should be at least 13px-
18px and 16px is most commonly used. Also, the recommended to keep the paragraph length
between 45 to 76 characters and 66 characters per line is widely regarded as ideal. Setting the
text with a grid is a way to build visual hierarchy, and it’s a useful indicator of how large or small
the text should be. Sans-serif typeface are most universally used for setting texts on web. When
mixing the font for a heading and paraph, it is better to not to mix more than two fonts. If more
than 2 fonts are used, it will distract user’s attention and confuse them to define which
information is important. Another thing to remember is to try to avoid a single word or a very
short line of text at the end of a paragraph. Avoid it as possible by attempt narrowing letter
space or line break, reconsider font size or sentence. Following link provide the top 10 mist
popular Sans-Serif Fonts.
<https://www.typewolf.com/top-10-sans-serif-fonts>
Sans-Serif fonts examples.
11. 11
5.0 Contents and Design Layout Recommendations.
The contents were basically based on the contents on current website and the project brief.
However there were some changes had been made and additional informations were suggested
on the report. The designed is focused to have consistency throughout the pages, keep minimal
and delivering a credible impression to the visitors.
5.1 Home
12. 12
Example:
When a prospective clients come to the website, it is vital that the first thing they see is the
company’s value proposition. As the Which is also a competitive advantage. The short
paragraph that instantly articulates what do you do, who you do it for, and what are the
competitive advantage you have. The stronger the value proposition, the more it will speak to
the ideal prospects and potential employee. Company’s slogan or value statement is a another
option can put on the home page as well.
The offerings have to be articulated because visitors do not actually read everything on the
page when they first visit. In order to clearly communicate the values and offerings, it is
recommended to display them into different blocks or sections with image instead pool of
paragraph and text.
If possible client’s testimonial or word is recommended to put on the bottom space. Partners
information can move to partner’s page and have client’s logos instead because prospect often
seeks the credibility of the company from clients than partners.
Example:( http://synopticconsulting.com/)
13. 13
5.2. About us
About us section will have 3 sub contents; history, team members, partners. Those informations
will on same page however some of more detailed information will have a link to another page.
The brief history will be placed first as well as the company’s mission or vision statement. Then
Followed by team members and partners.
5.2.1. History
Shane Barker the consultant specializing in SEO and internet marketing advice and strategies
claims if a company want to convert visitors into long-term clients, a company have to legitimize
the consulting business to prove that the company is real and the company has the
qualifications needed. In order to build credibility, he recommended the company to show
pictures of their office's environment, provide a brief history of the company, highlights the
company’s accomplishments, displays the logos of the client company. The location and the
size of the company can be briefly described in this section as well.
14. 14
5.2.2 Team members
Using a word of “team” sounds more engaging than “employees”. In order to keep the
navigation simple, team should be put as sub-content of “About us”. Other suggestion is to
display the major staff’s photos with their title, job description, and their careers. It is important
that the photos have consistency and displayed in the same layout. As Fair Consulting Group is
a young company, presenting careers and experiences of team members will enhance the
credibility of the company. Creating a video of introducing the company and CEO is another
strong way to legitimate the company.
Example: consistent photos
5.2.3 Partners
Partner’s information can go into subpages of about us. The description paragraphs can be
placed the same page as “About us”. However, if the logos of the partners stays on the very
beginning of the page, it could stand out more than the company itself, therefore better appear
when scrolling down the page. Partner’s logos will be placed on the bottom section of “About us”
sections. The click button for detailed information will be placed underneath the logos of
partners.
5.2.4 Blog
If the company can regularly update, it is useful to create a blog. A blog can provide informative
content that is focused on offering advice, tips, and solutions for the prospects and introduce the
new project. Moreover, it can help the website boost its search engine rankings. A blog can give
15. 15
visitors an idea of the company’s personality and the overall culture of the company’s practices.
If the company agree to create a blog, the link can be placed on about us page.
4.5 Customers
If possible customer’s testimonial are useful sources to apply on the website whether it is just a
detailed interview or just a short sentence. Also as Fair Consulting Group provides a number of
different services to various types of companies, placing the logos or listing the customers will
enhance credibility and influence prospects impression of the company.
The links to case studies or references should also be on the customer’s page but instead of list
them into bullet points, it is preferred to be shown in a bold title of work with icons or photos.
This will help visitors to navigate the website and allow them to easily access to the information
they are interested in
Examples for case studies.
16. 16
4.6 Community
Community work is one of the strong value that Fair Consulting group has. Articulating these
works possibly brings the right type of potential employees and give the sense that the company
is ethical and not just work for money. However, it is important to provide the information keep
up with times to explain visitors these works are real. There are four major community works
17. 17
that the company is doing are ;4 days/year, charity work, donation of profit, customer charity
race. Internships can be seen as a part of community work but recommended to place in career
section as people who search for an internship are more likely to expect the position on a career
page. In order to keep consistency and articulate the works, those four works can be placed into
different blocks with big size photos. The detailed information of those works can be explained
through the link of each photo.
4.7 Services
18. 18
Image 1: From the company’s ppt slide Image 2: Services icons from current website
Fair Consulting Group provides four main services. When click the service page of the current
website, the detailed information of CEM directly appears and the rest of the icons stays on the
bottom. Instead, the similar form of image 1 is suggested therefore visitor can see are the
service features in a glimpse. The brief information like image2 can be placed bottom of the
large icons and allow visitors for detailed information by clicking the icons.
The contents do not need to strictly limit the services the company offer. The brief explanation of
working process into steps or use of an infographic is also added as a content on the service
page. Infographic is an effective way to communicate solid content in a way that is visually
appealing and easy to understand.
4.8 Products
The information of the product are quite complicated and if a visitor has no knowledge about it, it
will be difficult to understand. The images should not have too many writings on it and
recommended to place in large scale hence the visitor can see the information at once. Clients
often do not care about the services until they are convinced that a company has the knowledge
and skills to help. Therefore the information has to be client-focus and make it easy for them to
understand. In order to explain the difficult concepts, the contents are better divided into
sections and use more of dot points. For example
1. The benefits of the product
2. How does the product works (With large size diagram)
3. The features.
19. 19
The headings of those explanations should be highlighted to bold and larger text and keep into
short sentences or bullet points. Use of Jargons need to be kept minimal but when it is vital to
creating the link that explains the meaning of the words with action colour.
Current Product Page
For this part, it is very suitable for Products Page. FAIR Consulting Group should implement
APP Formula (will be explained later) in this section since it can attract more customers to know
the products in details. The description of the products should be in the APP form and the layout
of the paragraph should be 2-5 lines per paragraph. Since the diagram/chart is involved, it
should follow on the same align whether to put it left align or right align but it must be
consistency.
20. 20
4.9 Career
The information about the company can be on main screen as well as the employee's benefits.
The vision of the company can also be on top of the page.
On the Career page, the description of job does not need to be in too much detail on the main
screen. Job seekers generally know what kind of job they are looking for and possible to expect
the roles from the title of the job. A detailed information can show up when clicking the
positioning title. This detailed information is better to appear as pop-up rather than a link to a
brand new page. Applicants will search the information of few different jobs therefore just
clicking x to close the screen can reduce the time for them to go to backward or close the
screen every time.
Also as there is a different section of domestic and international applicants on the current
website, it would be helpful to provide the visa requirement for international applicants.
21. 21
4.10 Contact
The address, phone and fax number and email of both Sydney and Melbourne offices are
needed. And provide the best email address for inquiries. Google map is good to be linked to
the address but better not show on the page unless the visitor clicks it. That way will keep the
page cleaner.
4.11 Template proposals
1. http://preview.themeforest.net/item/consultancy-wp-consultancy-business-
theme/full_screen_preview/14096085?ref=freshdesignweb
2. http://preview.themeforest.net/item/dalton-clean-multipurpose-wordpress-
theme/full_screen_preview/10379259?ref=cirvitis
5.0 Detailed information about Testimonials.
Issue: This Company do not have testimonials
Recommendation:
-Put in in the customers and products section
-At least 3 testimonials for Customers section and 3 testimonials for Products Section
-Examples that are suitable to be used by company:
Example 1 can be put in the first page of the company website (at the home page). It is good to
put at the top of the page in order to get the good impression for the customers/users especially
for the first time user.
22. 22
Example 2 & 3 are suitable to put in customers and products section. The most suitable is to put
in bottom part in order for customer to read the description first before go to the testimonial part.
6. Service Engine Optimization (SEO) Strategies.
-To increase the tendency of users see your website. This strategies recommend having your
website in first page and top 3 list in Google search
Using 4 strategies:
1. Bucket Brigades
2. Benefit-Driven Subleaders
23. 23
3. APP Formula (useful in product section)
4. Using many synonym words that has the same meaning
6.1 Bucket Brigades
- Word or phrases that keep people on your page
-Bucket Brigades are an old school copywriting tactic that were originally designed to keep
people reading sales letters.
-The strategies are to use short sentences that end in a colon, like this:
Example: (In the red box)
25. 25
Recommendation: For Bucket-Brigades and Benefit-Driven Subheaders, both are useful to be
implement in customer page just like below:
Picture 6.2.1: The original Customers page from FAIR website.
Issues: The number of line of the sentence in one paragraph are too long and need to re-
arranged. Some of the keywords that are being bold are good to maintain the impression of the
reader but the number of line can reduce the probability of the reader to stay longer in your
website. The location of the picture is not suitable to put because the margin of the paragraph is
not consistent.
After Adopting Bucket-Brigades and Benefit-Driven Subheaders.
Picture 6.2.2: The customer page that implement Bucket-Brigades and Benefit-Driven
Subheaders. For the headers, it is good to be in all uppercase (Bucket-Brigades strategy) in
order to attract the eyes and impression of the reader for them to continue reading. For the
headers “YOUR SUCCESS IS OUR SUCCESS!” and “ONE SIZE DOES NOT FIT ALL!!” should
be bold with blue colour while the name of three organisation stated after the header should be
bold with black colour. Some of the important keywords are being in uppercase and being
bold with blue colour just like from the original page. The font size of the header should be
between 14-18 and the rest of the sentence is 11-12.
27. 27
7.0 Features that should be implemented
From our research, the most suitable features to be used in this website is accordion and
carousel. For carousel, this features should be implement in home page which the picture is
moving freely within 10 seconds without users need to click on:
Picture 1 shows the layout of which of the carousel should be implemented. Actually, this
company had used this features but too little content. It supposed to show many content
especially latest announcement, new product services and achievements. This part can be the
most critical part since customer/user see this part first before navigate to other part or scroll
down. To make it more attractive, the navigation button below:
should be put into the carousel part. We can replace the Picture 1 with the navigation button (if
necessary) and apply the carousel on them.
For accordion, the most suitable to apply is in services section. Example of recommendation
using Mockup tools that had been done for services section:
28. 28
The Scrolling Bar is put in each of the accordion part in order to view all the contents and
explanation. The style of writing in the accordion (as shown above) should be implemented like
that to avoid boring for people when read it and make the user stay longer of that page, hence
increase the SEO factor.
8. Internet Browser Accessibility.
When comparing with three most browser used by people, Chrome (54%), Mozilla(14%) and
Internet Explorer (IE) (15%), FAIR Consulting Group has a good access to all of three
browsers.The navigation tool to open the menu tab has no problem and the speed of browser is
almost the same. No page that can’t be open when testing using different browsers.
9. REFERENCES
30. 30
Testimonial
https://blog.hubspot.com/marketing/testimonial-page-
examples#sm.00000ri2xwhmlfd1ds338ij78pxbf
11. APPENDIXES
● Facebook
- Most popular used by people across Australia and also around the world
- Based on Social Media Statistics Australia, in January 2016, there are 15 million users
approximately had an active facebook account (It’s about 62% of total population of
Australia, 24 million).
- For recommendation, the facebook page should be updated at least ONCE a week in
order to attract more people like your page and to keep them get in touch.
- Can be used to advertised product and careers section, so people that see the
advertisement post by this company see it in the careers section in your website.
● LinkedIn
- Business and employment-oriented social networking service that operates via websites
- World's largest professional network with hundreds of millions of members, and growing
rapidly.
- Has 467 million accounts, more than 106 million are active. (As in September 2016)
- For recommendation, use LinkedIn frequently as same as Zoho Recruit because 94% of
recruiters around the world use LinkedIn to hire people and it save cost rather than
formal interview.
● Zoho Recruit
- Web-based recruiting solution for small to medium-sized businesses.
- Implementation is simple, as there is no hardware to buy and maintain.
Pros Cons
User-friendly Limited choices when building a custom
fillable form
Easy to navigate Could not migrate a large amount of data and
31. 31
update data
Availability of customer service and support
whether in online or business hours
Lack of Radius Search from a Candidate
perspective which isn't ideal when searching
for candidates near a certain location
Intuitive and customizable Some rigid functionality where you can't
remove and edit certain fields.
CV/Resume parsing No LinkedIn stripping functionality
Have a free trial for 15 days up to 1 month Mobile apps have limited functionality
Aspects Ratings (out of 5)
Overall 4.5
Ease of use 4.5
Customer service 4
Features and Functionality 5
Value for money 5
