The full project has been challenging and a lot of learning has been done throughout the process. Even thought this project is concept only, a lot of time was spent on technical side in order to find out if this project is doable. WordPress is powerful tool that proven that it would be a good framework to use for customisated dashboard after users are logged in. Using WordPress for this purposes was never done before therefore this process of researching how to create back end for the project has been challenging and a lot of learning took place. Another side of the project was to find out what front end framework would be suitable for project of this size and Foundation was chosen. It is totally different framework comparing to other frameworks that I am familiar with as there are different rules in file structure and also how layout is structured. What was useful in the project is that both frameworks have a large community of practice in which membership had to take a place in order to find out solutions to occurred problems during the process.
Also community of practice was used in research stage where survey was done about what users think about functionality of forums and what changes they would make to make forums more user friendly. There were a lot of good suggestions and nearly all of them were implemented into the design. This was quite difficult to do as suggestions had to be embedded into the design but also they could not influence usability of the website and the design had to be visually appealing to users. Visual imagery was used as research showed that users are more likely to remember things by seeing rather than reading. This was done by adding hero images to the design as this is one of the designing trends at the moment.
There were a lot of planning and research put into usability and design.
Registration form was done through visual imagery and was focused more on users clicking on provided choices rather than users having to type information in. This was decided to do after doing research about designing principles of a good design where was found out that if any task on the web has a high cost of energy, users are unlikely to complete the task unless the reward for it is also high. Also Hick’s law says that the more options users have, the longer it takes to make a decision and that is why booking form was kept simple and straight to the point.
Also providing users with two choices of entering the site – enter as a guest/enter as a member, has marketing strategy as the user entering site as a member can access only limited information and to gain access to more information, registration is needed.
Looking back at proposal that was written in the beginning of the project, there is only one thing that changed during the process which is title of the social community from ‘World of Reptiles’ to ‘Vivarium’.
Everything else in the proposal has been fulfilled.
User testing was done throughout the full project mostly at university ground. This helped to create design that would be usable for anyone as all suggestions of potential users were considered and implemented into the design. The last user testing proved that this project was a success in every way as all users doing user testing were happy with the final product.
This is the final design of Vivarium social community. It was created in Marvel.
Marvel is free prototyping app that turns designs into live prototypes for better visual presentation. It turns designs into web, iPhone, iOS, Android and Apple Watch app prototypes.
To view this please click on the link: https://marvelapp.com/d0a071
Improvements that would be likely made in the future for this project are –
- finishing designing of dashboard functionality as only certain parts of dashboard has been designed due lack of time
- desingning mobile/tablet version
- bringing this project to life
User testing has been done throughout the full design and development process therefore all feedback received has been already implemented into the website.
The final user testing
The final user testing has been done and the feedback was positive.
- good use of colours/images
- simple and straightforward registration form – visual images to choose from no typing which saves time and it is trendy
- good explaining of hover effects
More and more websites these days have HTTPS:// instead of usual HTTP:// in their URL links.
Research has been done to find out what it means and what functionality it has.
HTTPS is ‘Hyper Text Transfer Protocol Secure’ which basically means that it is safer version of HTTP. This means that information that are sent between browser and the Web are encrypted and more secure. This protocol is used for online banking transactions or shopping in which data of users need to be highly secure to avoid lost of finances. HTTP is used mostly with static websites using only HTML as users cannot input any information in.
All information sent over regular HTTP is just plain text and are not encrypted therefore hackers can easily hack the website. Because all information sent over HTTPS are encrypted, hackers would not be able to encrypt sent data even if they managed to brake into the connection. Having HTTPS also speeds up the website loading time and increases SEO. Google confirmed that HTTPS website will have slightly higher ranking in search engines as they are more secure.
The major benefits of a HTTPS certificate are:
- Customer information, like credit card numbers, is encrypted and cannot be intercepted
- Visitors can verify you are a registered business and that you own the domain
- Customers are more likely to trust and complete purchases from sites that use HTTPS
How to set up HTTPS on website:
- Host with a dedicated IP address
- Buy a certificate
- Activate the certificate
- Install the certificate
- Update your site to use HTTPS
This would be needed for social community website as there would be a lot of sensitive data such as contact details and information about users, personal photos etc. HTTPS would be needed to avoid hacking and leak of data of users.
XML site maps are there for Google to easier orientate in pages of your website. This helps with SEO.
There is sitemap generator called XML-sitemap generator that automatically generates sitemap.
This is the main page of this sitemap generator. Simply add full URL of the website and click ‘Start’.
Sitemap is ready to be used –
Follow the instructions that are provided.
Download the site map and put the file in root folder. In Webmaster account open ‘Sitemaps option’ and press on ‘Add sitemap’. Then type name of the file and submit sitemap.
That is all.
At the moment there is an error message. All recommended adjustments were made however error message is still there. Luckily, the sitemap is still pending in process window therefore decision to wait 24 hours has been made to see if the sitemap works. This is because both Webmaster tool and Google Analytics accounts have just been created.
Google webmaster tools is a tool that helps to find out if the website is easy to find in Google search, check errors in the website for easier fix to make the website appears in Google search results in high place.
Google account is needed in order to access this tool.
Webmaster tools helps to check if users link to pages of the website and how often the website appears in Google search results. This way it is possible to find out what pages of website are mostly visited by users and focus on most visited ones. Good feature of Webmaster tools is that if there is any issue with website, it will automatically send an e-mail to make the admin aware of existing problems.
Click here to visit the site.
Setting up an account
As mentioned above, Google account is needed to sign in. After logging in, add website that requires to be tracked and it will ask for verification. Simple press on ‘Verify now’.
Another page will provide all information needed to verification of the website. Recommended method is safer way to go. Follow instructions and click ‘Verify’
After clicking ‘Verify’, successful verification of ownership.
This is working screen –
At the moment, dashboard is empty as it just been created. The admin automatically received e-mail providing more information on what to do next –
The next step is to add site map for easier orientation of Google in the website witch helps with SEO.
Google Analytics is a tool that monitors users’ activity is on the website which helps with improvement of SEO. It also provides information such as where users come from, what devices they use to browse the website (this is important for possible future improvements), how much time they spend on the website etc.
To use this tool, Google account is needed however in this case, Google Analytics has already been used in past therefore registration is not needed anymore. The next step to start to monitor users’ activity on the website is to add the website to the existing account. Go to Admin>Account>Add New Account –
After clicking on ‘Create new account’, add all information about the website and click ‘Get tracking ID’ –
After that, the account is set up and the next step is to copy tracking code that is generated by Google Analytics and paste it into the file. There are two options how to embed the tracking code –
- PHP –
- Use the code above to create a file named “analyticstracking.php”, and include the file on each PHP template page.
- Add the following line to each template page immediately after the opening <body> tag:
In this case, PHP implementation is going to be done.
After clicking on ‘All website data’, all information should display however, because the account just has been set up, there are no information yet. It can take up to 24 hours to receive any information. And even after that, information depends on how much users visit your website.
Example of received data from different website
To show example of what received data from Google Analytics look like, decision to use data from different website has been made. There are many different categories but for this example are only going to be used: overview of data, demographic and interest report, browser and OS.
Overview of data –
Demographic and interests report –
Browser & OS
Accessibility is important part of designing process. This is because every website must be accessible for people with different disabilities i.e. colour blindness
The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
There are rules of accessibility that should be kept in mid while designing any website and they can be find on W3C.
This is colour blindness check that was done to make sure that colour blind people would have no problem using this design.
Tool that was used is called Colour Blindness Simulator and this is the link to it – http://www.etre.com/tools/colourblindsimulator/
Process is easy; upload image, select the condition to simulate – there are three
and press ‘Simulate Colour Blindness.
The result of splashpage
This is the result for Protanopia –
This is the result for deuteranopia –
This is the result for tritanopia –
The result of dashboard
This is the result for Protanopia –
This is the result for deuteranopia –
This is the result for tritanopia –
People with these three forms of colour blindness would be able to use this design as dynamic of colour scheme was choose well.
This is the same process for HTML and CSS –