Skip to content
/ encore Public

FRONT: an event management application made with Outsystem.

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

dijonsauce/encore

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
images
images
 
 
README.md
README.md
 
 
jssc_cart.html
jssc_cart.html
 
 
jssc_index.html
jssc_index.html
 
 
jssc_main.js
jssc_main.js
 
 
jssc_styles.css
jssc_styles.css
 
 

Repository files navigation

ENCORE

View the live project here.

Welcome to ENCORE, buy tickets to latest events & merch to show your love.

This is the website for ENCORE. It is designed to be responsive and accessible, making it easy to navigate for potential customers & partners.

features to consider:

  • Marketplace
  • SMS/Email service
  • Search bar/filter

User Experience (UX)

  • User stories

    • First Time Visitor Goals

      1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
      2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
      3. As a First Time Visitor, I want to locate their social media links to see their followings on social media to determine how trusted and known they are.

    • Returning Visitor Goals

      1. As a Returning Visitor, I want to find information about ENCORE products.
      2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.
      3. As a Returning Visitor, I want to find community links.

    • Frequent User Goals

      1. As a Frequent User, I want to check to see if there are any new posts.
      2. As a Frequent User, I want to follow on social media so I am notified of any major updates and/or changes to the website or organisation.

  • Design

    • Colour Scheme

    • Typography

      • The ### font is the main font used throughout the whole website as its simplicity is both attractive and clear to read.
      • Komika Title for the food prducts on Menu Page.

    • Imagery

      • The large images of food is designed to be striking and catch the user's attention. The food in the images are photographed and posed in a way to be more appealing and bigger than its actual size, marketing tactics.

  • Wireframe

    • Basis of all pages follow this design.
    • View

Features

  • Responsive on all device sizes.

  • Interactive elements.

  • Navigation:

    There are five (5) pages, all of them are accessible via the navigation bar at the top as well as hyperlinks at the footer. It's a simple bar that resides at the top of the screen therefore when the user scrolls down they won't need to fully scroll back up to navigate to other pages, it will always be available at the top of their screen. At the bottom of the page, the footer is set up, there are several links to the pages as well as additional links to social media accounts for users to follow.

  • Index Page

    This is the frontpage that welcomes the users when they first arrive, it includes a slideshow that presents what is available in McCLUCKIN' which is alot of chicken products. There is a banner that leads to the Official Mobile App for users to use to receive offers and points however, the App has not been made therefore it will direct them to the Google Store instead.

  • Menu Page

    The Menu Page hosts information and images on the current available items sold by McCLUCKIN'. They are designed to look similar to the ordering boards/screens within actual fast food restaurants. There is also a slideshow which shows the current campaign (limited edition products sold in selected stores).

  • Careers Page

    Through this Page, users who are interested in joining the company can submit their application as there is a form which enables them to upload their CV & resumes.

  • Contact Page

    The Contact Page allows users to see more about the McCLUCKIN' Company and how to reach the Customer Service via mail (Location Address). Much of the paragraphs such as the "Legal Disclaimer" and "Our Promise To You" are from and/or inspired by the ficitional Cluckin Bell's website (linked in the Inspiration section).

  • About Us Page

    This Page is to include the information about the McCLUCKIN' Company, by allowing users to click on one of the images which links to the information sections, the images are not actually hyperlinked to anything and are only made to look like it is.

  • Merchandise Page

    This page contains images of the Official McCLUCKIN' merchandise such as T-shirts and stickers, by clicking on the images this connect the user to the Redbubble website where the merchandise can be purchased.

  • Social Media

    All pages include social media links in the form of icons at the bottom of the page, they connect the users to the company's official social accounts. No social accounts have been made for this project therefore the icons will direct the users to the frontpage of the respective social media platform.

Technologies Used

Languages Used

Frameworks, Libraries & Programs Used

  1. Font Awesome:
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
  2. GitHub:
    • GitHub is used to store the projects code after being pushed from Git.
  3. MediBang:
    • MediBang was used to create the logo, resizing images and editing photos for the website.
  4. FontGenerator:
    • This website was used to create menu titles for the items available at McCLUCKIN', the chosen font is called Komika Title by Vigilante Typeface Corporation.
  5. Am I Responsive?:
    • This website was used to create the preview image of the project on various devices.
  6. Coolors:
    • This website was used to create the colour scheme used by the project. 1.Bootstrap
    • For responsive images.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no major syntax errors in the project. BeautifyTools was used to validate the JavaScript for slideshow. Prettier.io helped format the HTML & Lighthouse was used for improving the quality of web pages, performing audits for performance, accessibility, progressive web apps, SEO and more.

Testing User Stories from User Experience (UX) Section

  • First Time Visitor Goals

    1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

      1. Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go to the page of their choice.
      2. The main points are made immediately with the hero image.

    2. As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

      1. The site has been designed to be fluid and never to entrap the user. At the top of each page there is a clean navigation bar, each link describes what the page they will end up at clearly.

    3. As a First Time Visitor, I want to look for testimonials to understand what their users think of them and see if they are trusted. I also want to locate their social media links to see their following on social media to determine how trusted and known they are.

      1. The user can also scroll to the bottom of any page on the site to locate social media links in the footer.

  • Returning Visitor Goals

    1. As a Returning Visitor, I want to find the new products and campaigns.

      1. These are clearly shown in the banner message.
      2. They will be directed to a page with another hero image and call to action.

    2. As a Returning Visitor, I want to find the best way to get in contact with the organisation with any questions I may have.

      1. The navigation bar includes a "Contact" Page.
      2. Here they can fill out the form on the page or are told that alternatively they can message the organisation on social media.
      3. The footer contains links to the organisations Facebook, Twitter and Instagram page.
      4. Whichever link they click, it will be open up in a new tab to ensure the user can easily get back to the website.

    3. As a Returning Visitor, I want to find the Facebook Group link so that I can join and interact with others in the community.

      1. The Facebook Page can be found at the footer of every page and will open a new tab for the user and more information can be found on the Facebook page.
      2. Alternatively, the user can scroll to the bottom of the Home page to find the Facebook Group redirect card and can easily join by clicking the "Join Now!" button which like any external link, will open in a new tab to ensure they can get back to the website easily.
      3. If the user is on the "Our Favourites" page they will also be greeted with a call to action button to invite the user to the Facebook group. The user is incentivized as they are told there is a weekly favourite product posted in the group.

  • Frequent User Goals

    1. As a Frequent User, I want to check to see if there are any new offers and meal deals.

      1. The user would already be comfortable with the website layout and can easily click the banner message.

    2. As a Frequent User, I want to check to see if there are any new posts and events regarding the restaurant.

    3. As a Frequent User, I want to follow the brand on social media so that I am notified of any major updates and/or changes to the website or organisation.

      1. At the bottom of every page there is a footer which contains the social media links.

    4. As a Freuent User, I want to bbe able to enjkoy the reference to Gaming & Pop Culture references on the website.

Testing

  • The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.

  • A large amount of testing was done to ensure that all pages were linking correctly.

  • Friends and colleagues were invited to review the site and documentation to point out any bugs and/or user experience issues.

  • Images not showing: from incorrecting pathway setting just using the name rather than assets/image/"name.jpg".

Known Bugs

  • On some mobile devices the Hero Image pushes the size of screen out more than any of the other content on the page.

    • A white gap can be seen to the right of the footer and navigation bar as a result.

  • On Microsoft Edge and Internet Explorer Browsers, all links in Navigation bar are pushed upwards when hovering over them.

  • Slideshow in menu.html & index.html may show and then disappear, just refresh and it will come back.

  • The assets/images/slideshow2-box-sale.png appears stretched.

  • Menu images always aligning to the left.

  • Slideshow extends past the rest of the page.

Solved Bugs

  • Navigation bar is now fixed to the top of the screen.

  • Menu images align to the centre.

  • Image scaling with the device screen size.

  • Slideshow images all reduced to same size to prevent changing sizes.

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
    • Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
  3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
  4. Under "Source", click the dropdown called "None" and select "Master Branch".
  5. The page will automatically refresh.
  6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

Credits

Code

  • W3 Schools here: Code modified to create a 3 image slideshow on Index page.

  • Interneting is Hard here: Code modified to create a stationary navigation bar without further changes to the visuals.

Content

  • Psychological properties of colours text in the README.md was found here.

  • README templated from Code Institute here.

Inspiration

  • KFC here: Index page takes inspiration from the Homepage such as the title and the mobile app link.

  • Chick-Fil-A here: For the contact page content.

  • Cluckin Bell here: The website no longer exists and the URL will redirect to the Rockstar Games' official websites but you can see that much of the text is heavily inspired by the sarcastic fictional brand.

Media

About

FRONT: an event management application made with Outsystem.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages