• All-Devices
  

• Desktop 1
  
• Desktop 2
  
• Desktop 3
  

• Ipad 1
  
• Ipad 2
  
• Ipad 3
  

• Phone 1
  
• Phone 2
  
• Phone 3
  

• Desktop
  
• Ipad
  
• Phone
  

• All-Devices
  

• Desktop
  
• Ipad
  
• Phone
  

• Desktop 1
  
• Desktop 2
  
• Ipad 1
  
• Ipad 2
  
• Phone 1
  
• Phone 2
  

• Desktop
  
• Ipad
  
• Phone
  

• Desktop
  
• Ipad
  
• Phone
  

The client wants a simple and engaging website that is easy to use and will result in users returning to the site.

• Sleek yet simple UX design.
• Easy to use functionality.
• Responsive for any device size to encourage mobile use as well as desktop use.
• Links to the client's social network accounts to enhance their online presence.
• Provide a base site to later introduce future partnerships relating to travel and accommodation bookings.

The visitor should have a clear understanding of what the website purpose is and the site functions should encourage regular use.

• Immediately engaged by the UX design.
• Understand the purpose of the site.
• Simple intuitive menu navigation.
• Intuitive content and links.
• Ability to view site updates, enhancements and news.
• Opportunity to feedback on site updates to drive future improvments to tailor site to user expectations.
• Easy to access information about countries.
• Access to a diary to record travel experiences.
• Access to a task-manager/to-lists to manage travel activities.
• Readable and aesthetically pleasing on all devices.

• As an Administrator I can login in and out of my superuser account so that I can manage the site.
• As an Administrator I can add or delete user accounts so that I can manage the site.
• As an Administrator I can update user account information so that I can assist users where required.
• As a user I can register an account so that I can log in with my password.
• As a user I can login in and out of my account so that I can use the site.
• As a user I can reset my password so that I can still use the site if I have forgotten it or if it needs changing due to a security breach.
• As a Site Owner I can host the site on a cloud platform so that it can be accessed by user be scaled up as appropriate.

• As an Administrator I can post site updates so that users can be informed about latest features/updates.
• As a user I can check site updates so that I understand site changes and improvements.
• As a user I can comment on site updates so that I can influence future site enhancements.
• As a user I can update my comments on site updates so that I can correct or improve posts if necessary.
• As a user I can delete my comments on site updates so that I can remove comments that are no longer relevant.
• As an administrator I can update comments so that I can detail actions taken to resolve issues raised.

• As a user I can select countries from a map or dropdown so that I can access information about them.
• As a user I can mark a country to visited so that I can see at a glance where I have been.
• As a user I can access basic country info so that I can decide if it is somewhere I might be interested in visiting.

• As a user I can see my profile information so that I can confirm if it is correct.
• As a user I can update my profile info so that it reflects any changes to my circumstances.

• As a user I can create a diary linked to a country I have visited so that I can record my experiences.
• As a user I can update my diary posts so that I can fix mistakes or add info.
• As a user I can delete diary posts so that I can remove unwanted information.
• As a user I can view a list of all the tags added to my diary posts related to the country I am in so that I can search via the tags.

• As a user I can view all the to-do lists I have for a country so that i can plan and track my travel and holiday activities.
• As a user I can add new to-do lists so that I can create specific task managers.
• As a user I can delete to-do lists so that I can remove lists that are no longer required.
• As a user I can update my to-do lists so that I can fix mistakes or add info.

• As a user I can view all items in a to-do list so that I can see what specific activities are required.
• As a user I can add new to-do items to a list so that I can manage new tasks I consider.
• As a user I can toggle to-do items to open or closed so that I can see which tasks are outstanding.
• As a user I can delete to-do items so that I can remove tasks that are no longer required.

• As a user I am restricted from specific site updates, map and countries without first logging in so that I can do not try to submit a comment or visited with no user to assign to the object and generate an error.
• As a user I am restricted from accessing updates and deletion comments created by other users so that no one can update the comment but the author.
• As a user I am sent to an instructive page when I am unable to access a web page for any reason so that I understand why I am unable to access the page requested.

• Main colours:
  • #064467 (Dark Blue)
  • #cacaca (Light Grey)
  • #484848 (Dark Grey)
  • #e9e4e4 (Off White)
  • #ffffff (White)

In additon to the standard colour scheme delete buttons will be marked as red to indicate the risk assosiated with them:

• Delete colour:
  • #e2110a (Red)

• Title Font and Anchor Tags applied with backup options: 'Lora', serif;
• Paragraph Font applied with backup options: 'Merriweather', serif;

• Flags for counties taken from: https://www.iconfinder.com/flag-icons?price=free
• Header images for each country as well as home and login background images and home planner images: https://unsplash.com/
• Icons: https://fontawesome.com/
• Favicon: https://pixabay.com/vectors/departures-airport-sign-airliner-153136/

Login/Register/Reset Password:

Home:

Map:

Country Info:

List:

Diary:

Tags:

Site Updates:

Update:

Forms:

Login/Register/Reset Password:

Home:

Map:

Country Info:

List:

Diary:

Tags:

Site Updates:

Update:

Forms:

Following discussions with a focus group the following problem statement was developed alongside potential overarching features to satisfy user expectations.

If you have a LucidChart account, you can also view this Mind-Map here.

The below image provides an initial mind-map into the features which might be appropriate for the travel application based on the problem statement. This will aide in the development of User Stories.

If you have a LucidChart account, you can also view this Mind-Map here.

The below maps out the feasibility of the features considered against the user value they provide to help establish the priority they have as part of the build.

If you have a LucidChart account, you can also view this priority matrix here.

The below details the process flow for travel application.

If you have a LucidChart account, you can also view this process flow here.

The below demonstrates the site models and their attributes as well as documenting how they interact.

If you have a LucidChart account, you can also view this functions flow here.

An Agile methodology was applied to the development and implementation of this project.

The project development was run in multiple iterations/sprints each targeting a number of User Stories.

Each User Story was moved out of a backlog and assigned to the iteration with a priority label (Must Have, Should Have, Could Have, Won't Have). In addition to User Stories, bugs and enhancments were also applied within certain iterations.

To manage the Agile iterations I used the projects function within my GitHub account, pulling User Stories into a KanBan Board. (Links to each project iteration detailed in the iteration breakdown below.)

Note: It should be noted that the priority label was in relation to it's prioriry within the iteration, not the project as a whole.

The Navbar has been fixed to allow the user easy access to all key pages. (Some pages are not accessible via the nav bar as they are dependent on selections made via other pages e.g. country info).

Prior to login the user will see the following Navbar:

Note: Despite seeing the planner the user will not be able to access it until logged in. This was an intentional decision to show non registered users features they could not access to drive curiosity and engourage registration.

After login the user will see the following Navbar:

If the user is using a mobile screen they will have an expandable nav menu:

Note: This menu will show the same options to the user, depending on their logged in status, as that of the large screen nav bar.

The Footer has been fixed to allow the user easy access to all social media links.

New Users will have the option to Register an account. This page can be accessed either via the Navbar menu or by selecting the Sign Up option presented on the Login page when users first access the site (this link will be shown on the Login feature).

On valid Registration the user will be taken straight to the home page without having to re-login.

Django validation checks will be carried out on the registration form as with all future forms referenced in this Readme file.

If the user has a registered account they will be able to login to the site using the login page.

This page will also offer links to sign up and password reset. The password reset function will be covered below.

If the user tries to access site areas where login is required they will be directed to the following login page.

After completing the login they will automatically be redirected to the page they were initially trying to access.

As with registration Djago will manage the standard form validation.

The user will be given the opportunity to reset their password in case they forget it or want to change it for security purposes. The link to resetting the password is found on the login page.

On this page the user will be asked to enter their email to initiate the process. Standard Django form validation is used for confirming the email.

Once a valid email is input the user will get a confirmation that an email has been sent.

The user will then receive an email taking them to a password reset form.

After following the email link the user will be asked to input a password and confirm it. This password will have a Django password validation applied to it to ensure it is secure enough to use.

Following a successful password reset the user will recieve the following confirmation page.

The user can logout of the site by simply selecting the logout option on the Navbar menu.

The client wanted users to be able to see a summary of the most recent site updates at a glance and didn't want this to be restricted to signed in users. The logic for this is that the site updates and site news articles could be a good way of incentivising new users to register.

To this end, the 3 most recent site update posts are always presented at the bottom of the Login, Register, Password Reset and Home pages.

Non logged in users can also select the 'see all updates' button to be taken to a page with all the site updates. However only signed in users will be able to navigate to any one specific site update in order to place comments.

To create an engaging initial introduction to the site a Parallax effect was applied to the home page image. However to meet the asthetic requirements of the client this meant removing the inner scroll bar. As a result a downward facing arrow was applied to the screen to direct users to scroll down incase it was not immediately apparent. This arrow was given some simple JS flashing animation to make the page more interesting.

Further down the home page there is a little introduction to some of the features the site offers as part of the planner.

On registration a skeleton profile will be automatically generated for each user.

This page will allow users to view their site details as well as give them an opportunity to note down any travel objectives they may have.

In addition to this if the user has recorded any countries they wish to visit on the planner then links to these country info pages will be available to the user via their profile page.

Users will be able to update their details and travel objectives via the update Profile page.

They can also add an avatar or photo of themselves and update the Profile page background from a list of potential options.

From the map on the planner page the user can navigate to a country info page relating to that country. From here the user will be able to access a number of other application features which will be detailed below. One of these features will enable the user to mark the country to visited or wish list. Having done this the map will be updated to reflect the wish list and visited countries in different colours.

Note: The SVG used to show this map was taken from https://simplemaps.com/resources/svg-world and then tailored to the clients requirements. The client agreed that initial roll out should be tailored to Europe rather than the world.

Due to the size of the map it was not aesthetically pleasing to add names to each country via the svg file. However, the client wanted to ensure that users could locate the countries they were looking for and therefore JS was used to add a hover function to the map which would should the country name that the mouse is over. This country name can be seen in the top right corner.

Due to the fact that many people using this site would be on mobile devices or tablets and would not have hover functionality available to them the client also requested that a dropdown be added in alphabetical order so that users can select the country that way if they wish.

In additon to this if a user has a country marked as 'wish list' or 'visited' additional dropdown fields will appear.

To provide an easy to see visually appealing method of displaying how many countries the user has visited and wishes to visit npm Chart.js was used to present the information in a pie chart.

However, on a small screen test users indicated that this was distracting them from the key focus of the page(navigation) and therefore this is only visible on large screen sizes.

A Bootstrap Modal was used and tailored to the requirement of displaying a legend for mobile devices so as not to take up space from the map.

To create a interesting and aesthetically pleasing country info page an image (taken from unsplash) and a flag (taken from https://www.iconfinder.com/flag-icons?price=free) was added to each country object.

This was then called dependant on the country pk that was used in the url.

A Back to Map icon was also added. Following user testing the concenses was that the image was intuative enough not to require text, this was also acceptable due to the fact that a user could also select Planner from the Navbar to return to the map.

To initially set up the countries with basic information a json was obtained from https://gist.github.com/keeguon/2310008?permalink_comment_id=4255990#gistcomment-4255990.

From here unwanted data/countries were removed and any required additional fields were added. This was then looped through to generate all the required country objects.

Users can mark the countries they have visited or countries they wish to visit via the form on the Country Info page.

As stated in the map section above this will update the svg map to show the visited and wish list countries. In addition to this any wish list countries will also appear in the users profile page.

Users can use this feature to create, update or delete task lists. These lists are not the tasks themselves but rather a list of tasks that the user can add.

After discussions with the client and test users it was decided that the delete function would not require confirmation due to the simplicity of the lists. Therefore it deletes the list immediatly on selection.

To access the list itself to add and manage task items the user can select the list anchor. This will be detailed in the task manager feature section.

Users can access their personal diaries related to the country they are on via the diary link available.

Users can create tasks within the selected list via the form available to them.

Once tasks have been completed users can mark them as closed. These will change colour and move them below the open tasks.

If a user wishes they can delete a task entirely. As with the lists the test users and client opted for no confirmation for this deletion.

Users will have the ability to re-open closed tasks if they wish. These tasks will return to their original styling and move back above the closed items.

Once users have navigated to their specific country diary they will be able to add diary posts via the 'Add Diary Post' button.

Each post will allow the user to enter:

• Content: Detailing their travel experiences
• Image: This is an optional field the user can input if they wish. The image will be resized and stored to the client/site owner's AWS account.
• Tags: The user can add multiple tags to a post if they wish which can later be used to help filter searches. If no Tag is added a 'NO TAGS' tag will be applied automatically. The user does not have to be case sensitive with the tag enteries as these are all converted to uppercase.
• Experience: The user can select from a range of experience options. These will display on the post as emojis and can be selected to filter posts to that experience rating. This field is not manadatory and can be left 'Not Rated'.

If the user wishes to amend a post they have made they can select the update diary option.

Note: The diary post date will not be effected by this update. Due to the nature of a diary it is more critical to show the date of post over the amendment date.

If the user wishes to delete a post they are not happy with they can select delete. Unlike the Task Manager this will required a delete confirmation as more detail is added to diary posts and therefore the impact of accidental deletion is higher.

Pagination is set to only show 2 posts per page. This was experimented with test users and they felt this was a good amount per page due to the large amount of content that cound be added to each post.

Users will be able to filter the posts they wish to see using a range of options.

They can type into the search bar and it will return any posts where the content or tags include what they have typed.

The user can select the tags on the post itself to filter to the tag they have selected. Or they can navigate to the tag page via the 'Search Tags' button. This will list out all the tags that have been created and list them in order of their populatity. These can be selected and it will filter the posts to the tag selected.

The user can select the experience emoji on the post itself to filter to the experience they have selected.

The user can refresh the page to remove all filtering via the refresh page button next to the search posts field.

Note: The pagination has been built to work on the filtered searches. Therefore, if there are more than 2 returned posts pagination will be applied.

When the user navigates to the site updates page the header will return the total number of posts added.

The posts detailed on this screen are added by the site administrator. Users will not be able to add, update or delete any of these posts. However, logged in users will be able to select the post and add comments if they wish. This will be detailed later in this document.

The number of comments users have added to a post is shown at the bottom of the post next to a little comment icon.

Pagination is set to only show 5 posts per page. This was experimented with test users and they felt this was a good amount per page.

The site update posts can be filtered using 2 different methods.

The user can type a string into the search field and the page will return any posts where the title, content or topic contains that string.

The user can also open the filter tab built with JS to show all the topics with the number of posts assigned to each and select these to filter the posts.

Note: The pagination has been built to work on the filterd searches. Therefore, if there are more than 5 returned posts pagination will be applied.

Once a logged in user selects a post they will be directed to a page where they can add comments and view other user comments related to that post.

On a large screen the add comment form is directly on the page. This allows users to enter a title, comment and optionally an image.

If the user is using a small screen they can access the add comment form via the 'Add Comment' button.

If a user views a comment that has been added by another user thay will not be able to update or delete it and the update and delete buttons will not appear on the comment for them.

However, if they are the comment owner the update and delete buttons are available.

!Note: Once a comment has been added the administrator has the ability to respond to it. This is so that if actions are required based on the comment the administrator can update the site users.

If a user wishes they can update their own comments. This will add an updated field to the comment to show when it was last amended.

If a user wishes they can delete their own comments. This will take them to a confirmation page to check they do not delete comments in error.

Whenever a user creates, edits or deletes an object in the database they will receive a notification informing them that their action has been successful.

This notification will only show for 3 seconds so as not to negatively impact the user experience.

Success Notification:

Users will be provided with tailored pages when they experience errors.

Page not found:

Page not permitted:

Server Issue:

If an Superuser logs in to the site they will be shown an additional option on the navbar directing them to the Django administration area.

As part of the build for this project it has been useful to have access to all the models in the Admin section of the site. Following the clients approval most of these models will be removed leaving only the Site Update models and the Profile model.

These will be used by admin to add site update posts, add new or remove post categories and respond to user comments. The Profile will also allow the administrators to aide users regarding their site details once an appropriate Identification and Verifiication process is agreed.

Admin will be given the task of posting about site updates and news. This will be completed directly from the administaton area.

Summernote was installed to give the admin team more flexibility in how they posted the site updates and the specific fonts were added to the Summernote config. However, on review it was agreed that it would be more consistent to use standard inputs and formatthem using HTML and CSS via the templates.

As a result Summernote was removed from the admin.py files, settings and requirements.txt.

Each site update post will be assigned a category to help users filter results. The admin team will have the ability to add and remove categories if required.

When a user comments on an update it will assign the object a Comment Status of Review Required. This will allow the admin team to filter any comments made by the user and mark them to Reviewed once they have looked them over. These can then be filtered out on future reviews.

To this end a filter has been applied to the 'Comment Status'.

When an administrator reviews the comment they will have the ability to respond to it. This will them appear in the comment for all to see.

On testing of the website it was identified that due to BT's strict spam policies users with a BT email address did not always receive their reset password emails.

If this site was to be push commercially BT have a contact for businesses to register with them and allow emails to be sent without restriction.

All other email proviers tested received reset password emails without issue.

On testing it was identified by multiple users accross a range of devices that the parallax image on the home page was not loading correctly.

On reviewing the Lighthouse score for this it became apparent that this was due to the image size and resolution. To resolve this issue the image was converted to a webp format.

Users confirmed this resolved the issue and Lighthouse gave good performance scores to confirm.

Note: There was one instance where the image still failed to load correctly. This was run on a mac using Parallels to validate a microsoft machine usage in Edge. However, on request 2 users ran the website on seperate microsoft machines using Edge and no issue occured.

In development it was identified that certain images were rotating when they where uploaded to the AWS account.

To resolve this issue I updated the settings.py to manage the image orientation:

  DJANGORESIZED_DEFAULT_NORMALIZE_ROTATION = False

In development when reviewing the site update posts it became apparent that line breaks were not being implemented into the posts.

To resolve this a |linebreaksbr was added to the required fields. This was implemented accross the entire site:

  <p class="text-center">{{ update.content|linebreaksbr }}</p>

In testing it was identified that tags were case sensitive and that this was causing duplication of the same tags.

To resolve this issue I converted the tags to uppercase where the exclude duplication code could take effect for these instances:

  def form_valid(self, form):
     country = get_object_or_404(Country, pk=self.kwargs['pk'])
     form.instance.author = self.request.user
     form.instance.country = country

     tag_names = form.cleaned_data.get('tags')
     if tag_names:
        for i, tag_name in enumerate(tag_names):
              tag, created = Tag.objects.get_or_create(name=tag_name.upper())
              tag_names[i] = tag.name

     response = super().form_valid(form)

     tags = form.instance.tags.all()
     if not tags.exists():
        no_tags = Tag.objects.get_or_create(name='NO TAGS')[0]
        form.instance.tags.add(no_tags)

     return response

In testing it was identified that when pagination was used on a filtered page it would reset the filter. This is because it was assigned its own value to the end of the URL which was being used to define the filter criteria.

To resolve i added a variable (search_query) into the view to get the value of the search criteria (q) and then passed this back to the template as context.

This variable could then be applied to the end of the pagination href to navigate back and forth but retain the search criteria:

  <a class="page-link" href="?page={{ diary_posts.next_page_number }}&q={{search_query}}" aria-label="Next Page">

In testing it was identified that when filtering by topic in the Site Updates the spacing in the topic names was causing HTML validation errors:

To resolve this I applied |urlencode to remove URL spacing.

  <a href="{% url 'all-admin-updates' %}?q={{ topic.topic_catagory|urlencode }}" aria-label="filter to topic selected">{{ topic }}</a>

When using the Django Admin pages it was identified that CORS errors were being displayed on the console. This was due to the CORS policy I had set on my AWS account.

I updated the policy and this removed the errors.

During final testing it was identified that is a user used a extremely long username it would negatively impact the formatting for the home page, comments and profile.

A long term solution to this issue would be to override the Django User model to restrict the username character allowance. However, at this stage in the delopment I did not want to impact the existing models. As a result I insead updated the CSS with word-wrap: break-word. This stopped long usernames exceeding their containers.

Home Update:

Profile Update:

Comment Update: