- The-Aunans
- User Experience
- Strategy
- Scope
- Structure
- Technologies Used
- Validation
- Testing of User Stories
- Bugs
- Deployment
- Credits
- Acknowledgements
- Disclaimer
You can find the deployed website HERE
The app is designed to consolidate all relevant information related to the community and it's activities in a mobile-friendly user interface.
- Showcase the Aunans Guild to the World of Warcraft community.
- Showcase Guild achievements.
- Increase recruitment.
- Centralize resources and information into a single portal for current members.
- Find information about the Aunans.
- Find information about the targeted activities.
- Find information about the current roster.
- Find information about the current progress.
- Find the current event time-table.
- Ability to submit an application to join.
- Find guides and useful links used by current members.
New Users:
- As a new user, I want to know more about the Aunans and their history.
- As a new user, I want to know what the community's focus is.
- As a new user, I want to see the community's progress and statistics.
- As a new user, I want to get familiar with the community's members.
- As a new user, I want to see when certain activities take place.
- As a new user, I want to see what the recruitment process is.
- As a new user, I want to access their social media platforms.
Regular Users:
- As a regular user, I want to see what are the newest community updates.
- As a regular user, I want to access game guides suggested by community leaders.
- As a regular user, I want to see any community plans and activities I can be a part of.
Site Owner:
- As a site owner, I want to attract new members to the community.
- As a site owner, I want new members to be able to submit an application to join the community.
- As a site owner, I want to convey accurate information to attract the right candidates for our roster.
- As a site owner, I want members to have access to activity information and maximize involvement.
The design of the app is consistent with other major apps that a World of Warcraft player might be already familiar with. It provides synergy with web apps like World of Warcraft Armory, WoWProgress, Raider IO and Warcraft Logs while funneling information relevant to the site owner's to the user. The dark tone with high contrasts was chosen to cater to gamers who by default will gravitate to "night-mode" options on apps as they will usually avoid bright areas due to reflections in their displays while gaming.
The app is fully responsive to different devices and information is contextualized based on screen sizes. On small devices, overload of visual data is avoided by hiding some extra details and information while keeping only the most important features. Landing Page displays only heroic achievement, Leadership Section only displays the guild leader and History Section provides brief history of the guild's early days. Secondary achievements on Guild Info Page are reduced from 6+2 achievements on large screens to 4+3 on medium screens to 2 on small screens. On larger devices additional content populates it's features like a comic strip on Landing Page and additional Achievement banners; Guild Info Page shows First Officer's avatar also and History Section will have further breakdown of the guild's past for every game expansion.
Sections on all pages were implemented using BootStrap grid thus columns re-arrange based on the width of the device the user is using to maximize the use of screen realty and provide a better user experience.
The colour scheme is based on The Aunans' banner colours and the colours representative of the faction they belong to.
#0E174F #163E88 #BA0C0C #D79717 #FFC107
Open Sans and Roboto sans-serif based font families were used to maintain the tone of the game's website.
- Responsive website for all devices.
- Navigation bar that collapses on small devices
- A Landing Page that will provide the main target information to the user trough suggestive images and cross-connections to other World of Warcraft content.
- A Call to Arms to incentivize users to apply for membership.
- A modal for the application form.
- Display of the team's achievements.
- An activity schedule.
- Guild's Leadership and History presentation.
- Member's roster presentation.
- Links and references to game guides tailored to guild's focus.
- Gallery of images and videos submitted by current members.
- A customized 404 Error Page to enable the user to turn back without leaving our domain.
- Favicon icons.
(expand) 1. Hero Image with call to action for applicants.
Is composed of the Alliance banner to convey to the user what faction the guild is a part of. On small devices the call to arms button is present under the guild's title which moves in the navigation bar on devices medium and up and is being replaced by a cartoon strip which suggests the main focus of the community's activities (raiding).
User stories solved by this feature:
6- As a new user, I want to see what the recruitment process is. 12- As a site owner, I want new members to be able to submit an application to join the community.
The user stories are being satisfied by the presence of the Join Us! call to arms and the application form.
(expand) 2. Most important community achievement so far.
In this section the user can find an official rank banner provided by WoWProgress and clicking on it will open the ranking site in a new window. On small displays the heroic raid clear achievement is being presented also in a condensed form whereas on large displays and up, the normal raid clear achievement is being displayed also with additional information on the bosses that were killed.
User stories solved by this feature:
2- As a new user, I want to know what the community's focus is. 3- As a new user, I want to see the community's progress and statistics. 11- As a site owner, I want to attract new members to the community. 13- As a site owner, I want to convey accurate information to attract the right candidates for our roster.
The user stories are being satisfied by the guild's most important achievements presented in this section. The user will be able to determine that the guild's focus is progressing in the latest raids on higher difficulties and those with similar interests can make an informed decision and apply to join the community.
(expand) 3. Statistics.
In this section the roster breakdown by class and role provides the user with a way to see the guild' composition and if their class/role is needed by the team.
User stories solved by this feature:
4- As a new user, I want to get familiar with the community's members. 11- As a site owner, I want to attract new members to the community.
(expand) 4. Activities schedule and requirements for joining.
Users can find what the attendance requirements for raids are and the days/hours they would be able to raid with the if they wish to join. This information serves as an incentive for the right demographic of players to apply to join the guild's roster.
User stories solved by this feature:
5- As a new user, I want to see when certain activities take place. 6- As a new user, I want to see what the recruitment process is. 10- As a regular user, I want to see any community plans and activities I can be a part of. 11- As a site owner, I want to attract new members to the community. 14- As a site owner, I want members to have access to activity information and maximize involvement.
(expand) 1. Leadership.
On small display devices users are presented with the guild leader's character sheet. On medium displays and up the first officer's character sheet is being displayed also along with more details on their equipment.
User stories solved by this feature:
1- As a new user, I want to know more about the Aunans and their history. 4- As a new user, I want to get familiar with the community's members. 13- As a site owner, I want to convey accurate information to attract the right candidates for our roster.
Getting to know the leaders of the community is an important feature for the users as they are able to compare with their own characters and decide what they will gain by joining.
(expand) 2. History.
The History section provides information about the guild's past. On small screens the information is restricted to the community's inception. On larger screens additional details related to each expansion become available to the user. Members and visitors are able to see that the guild has a long history in the game and it persevered trough multiple expansions which is a crucial selling point for those that seek stability in an ever changing environment.
User stories solved by this feature:
1- As a new user, I want to know more about the Aunans and their history.
(expand) 3. Members roster.
This section includes a table with guild members and provides race, class, role and level information on each one. The information conveyed here allows the user to get to know the other members of the community and get a general idea of the team's composition.
User stories solved by this feature:
1- As a new user, I want to know more about the Aunans and their history. 4- As a new user, I want to get familiar with the community's members.
(expand) 4. Other notable achievements.
In this section the user will find further achievement badges earned by the guild to expand on the main achievements presented on the landing page. This provides valuable information to what type of content the team is focusing on and their progress. Other gamers that share the same interests within the game will be more inclined to join the guild.
User stories solved by this feature:
2- As a new user, I want to know what the community's focus is. 3- As a new user, I want to see the communities progress and statistics. 13- As a site owner, I want to convey accurate information to attract the right candidates for our roster.
(expand) 1. Strategy guides.
The user is presented with strategy video guides to the encounters the team is progressing on provided by FatBossTV and detailed breakdown of the latest fight logs from those encounters provided by WarcraftLogs. This information is useful to the user as it presents the activities the team is currently focusing on and the latest performance data. Using the data suggested by the guild's leaders, the user is able to prepare for upcoming activities and keep pase with the team to progress in these encounters.
User stories solved by this feature:
2- As a new user, I want to know what the community's focus is. 8- As a regular user, I want to see what are the newest community updates. 9- As a regular user, I want to access game guides suggested by community leaders. 10- As a regular user, I want to see any community plans and activities I can be a part of.
(expand) 2. Useful Resources.
This section provides additional resources suggested by the team's leadership to help them in improving their game performance. The WoWHead and Icy Veins logos open detailed class guides in new tabs and the member's Mythic Plus Dungeon progression table let's the user know the level at which the team is performing.
User stories solved by this feature:
8- As a regular user, I want to see what are the newest community updates. 9- As a regular user, I want to access game guides suggested by community leaders.
(expand) 1. Community images carousel.
The section includes an image carousel build with Bootstrap and customized to fit the apps' purpose and style. The carousel presents real life pictures submitted by the users which adds another layer to the user getting familiar with the team not just in game.
User stories solved by this feature:
1- As a new user, I want to know more about the Aunans and their history. 2- As a new user, I want to know what the community's focus is. 8- As a regular user, I want to see what are the newest community updates.
(expand) 2. Community videos and screenshots.
The user is presented with videos from the team's past encounters embedded from Youtube and is able to get a sense of what the team's activities are as well as get a sense of their current and past performance. After the videos this section includes a gallery of in-game screenshot submitted by members. The gallery's design was inspired by the Code Institute practical lesson Love Running.
User stories solved by this feature:
1- As a new user, I want to know more about the Aunans and their history. 2- As a new user, I want to know what the community's focus is.
(expand) Responsive navigation.
The navigation bar was built with Bootstrap and customized for the app's purpose. It is fully responsive to different screen widths and fixed to the top of the page to enable users to quickly navigate trough the pages. On medium size screens and higher, the Call to Arms button is displayed enabling users to access the guild' application form.
User stories solved by this feature:
6- As a new user, I want to see what the recruitment process is. 11- As a site owner, I want to attract new members to the community.
(expand) Simple Footer.
The footer is consistent on all pages and provides links which open in new tabs to social media platforms used by the team.
User stories solved by this feature:
7- As a new user, I want to access their social media platforms.
(expand) 404 Error
The 404 Error Page let's the user know he has wondered down the wrong path and provides a way to get back to quickly go back to the main website.
- HTML5
- CSS3
- Bootstrap v4.6 Components for the navbar, modal, image carousel, grid system were taken from the Bootstrap library.
- Github For storing my repository.
- Github Desktop For managing synchronizations between local and cloud-stored repositories.
- Git For version control.
- VSCode IDE for writing code.
- Font Awesome Provided the icons for social media links.
- Google Fonts Roboto and Open Sans were used as default fonts for the web application.
- Optimizilla To optimise images for web applications.
- WoW Hunter For logo design.
- Favicon.io For creating the favicon.
- Colormind Color scheme generator.
(expand) Home Page HTML Validation found no errors:
(expand) Guild Info Page HTML Validation found no errors:
(expand) Resources Page HTML Validation found no errors:
(expand) Gallery Page HTML Validation found no errors:
(expand) 404 Page HTML Validation found no errors:
(expand) css.style Jigsaw Validation found no errors:
(expand) Home Page Accessibility Evaluation found no errors:
>
(expand) Guild Info Page Accessibility Evaluation found no errors:
(expand) Resources Page Accessibility Evaluation found no errors:
(expand) Gallery Page Accessibility Evaluation found no errors:
(expand) 404 Page Accessibility Evaluation found no errors:
(expand) Home Page Lighthouse Test
(expand) Guild Info Page Lighthouse Test
(expand) Resources Page Lighthouse Test
(expand) Gallery Page Lighthouse Test
(expand) 404 Page Lighthouse Test
- Samsung Galaxy S8,
- Samsung Tab A 9.7-inch tablet,
- 17-inch 1080p Laptop (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers),
- 24-inch 1080p Display (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers),
- 32-inch 2040p Display (Google Chrome, Mozilla Firefox, Opera, Microsoft Edge browsers).
Application performs as intended on all devices.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Guild Info, History, Members Roster sections on Guild Info page | Click on Guild Info link in the navigation menu. Scroll down trough the sections | To find information about the guild and it's history | Works as expected |
| Image Gallery and Community Videos sections on Gallery page | Click on Gallery link in the navigation menu. Scroll trough the sections | To find images and videos from the community | Works as expected |
Expand to see testing process.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Important achievements and rankings section on Homepage outline the PVE focus of the Guild | Scroll to the ranking and achievement presented on Homepage | To find content related to the community's main focus | Works as expected |
| Other achievements section on Guild Info page offer more information related to past activities | Click on Guild Info link in navigation menu. Scroll to the bottom to the last section | To find content related to the guild's past activities | Works as expected |
| Strategy guides section in Resources page outlines the objective the team is focusing on | Click on the Resources link in navigation menu. Watch the strategy guides for the current content the guild is exploring | To find information regarding the main activity focus of the community | Works as expected |
| Community images and videos sections on the Gallery Page offer more context to the past activities of the members | Click on the Gallery link in the navigation menu. Watch the boss kill videos and the images posted by members | To see what type of activities the members took part in | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Important achievements and rankings section on Homepage shows current progress | Scroll down to the achievements section | To see achievements and rankings | Works as expected |
| Roster overviews provide statistics about the guild's composition | Scroll down to the statistics section | To find statistics about the guild | Works as expected |
| Members Roster on the Guild Info page provides additional statistics about the guild's composition | Click on the Guild Info link in the navigation menu. Scroll down to the members roster | To find more context for the statistics of the guild | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Leadership section on Guild Info page presents the guild master and first officer | Click on the Guild Info link in the navigation menu | To find out who the guild's leader are | Works as expected |
| Members Roster section in the Guild Info page list the members of the guild, their class, level and specializations | Scroll down to the Members Roster section | To find information about other members | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Raiding Schedule at the bottom of Homepage | Scroll down to the activities schedule | To see what days and time the guild is organizing raids | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| The call to action button on the Landing Page (on small screens) and on the navigation menu (medium screens and up) linking to the application modal provides a way for the user to apply for recruitment | Click on the call to action button, fill in information in the modal | To be able to apply to join the guild | Works as expected |
| The raiding schedule and attendance requirements provide information about the recruitment process | Scroll down to view the raiding schedule and attendance requirements | To find more information about the recruitment requirements | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| The footer on each page contains links to guild social media | Scroll to the bottom of any page and click on the social media icons | To be able to access the guild's social media | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Strategy guides section on Resources page provides the latest strategy the raid team is pursuing | Click on the link to the Resources page in the navigation menu | To find info the raid leader wishes his team to know about the kill strategies | Works as expected |
| Battle logs on the Resources page provides latest combat breakdowns | Click on the link to the Resources page in the navigation menu. Scroll down to useful resources section | To find latest combat logs | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Strategy guides section on Resources page provides the latest strategy the raid team is pursuing | Click on the link to the Resources page in the navigation menu | To find info the raid leader wishes his team to know about the kill strategies | Works as expected |
| Class guides on the Resources page provides links to useful class guides | Click on the link to the Resources page in the navigation menu. Scroll down to useful resources section | To find class guides | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Raiding schedule on Landing page provides info about organized events member can join | Scroll down to the activities schedule | To see when organized events take place | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Rankings and most important achievements on the Homepage serve to attract new members that share the guild's interest | Scroll down to view the latest achievements and the guild's rank in PVE progression | To showcase the guild's progress and achievements | Works as expected |
Expand to see testing process
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Inspiring faction Hero Image and call to arms button serve in attracting new members | Click on the call to arms button and fill up the application form | To be able to apply to the guild | Works as expected |
Expand to see testing process
13. As a site owner, I want to convey accurate information to attract the right candidates for our roster.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Achievements section on Home Page showcases the level at which the guild is operating and implying certain performance requirements in PVE content | Scroll down to the achievements section | To showcase current skill-level of the raid team | Works as expected |
| Leadership section on the Guild Info page | Click on the Guild Info link in the navigation menu | To showcase the leadership's gear | Works as expected |
| Other achievements section on the Guild Info page | Click on the Guild Info link in the navigation menu. Scroll to the bottom of the page | To showcase other in-game achievements | Works as expected |
Expand to see testing process
14. As a site owner, I want members to have access to activity information and maximize involvement.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Raiding schedule on Landing page provides info about organized events member can join | Scroll down to the activities schedule | To present when organized events take place | Works as expected |
Expand to see testing process
- Bug: Custom CSS for Bootstrap components wasn't being loaded correctly.
- Fix: Move the CSS stylesheet link below the Bootstrap stylesheet link in headers.
- Bug: Low performance score in Lighthouse tests.
- Fix: Compress and optimise all images for web application.
- Bug: HTML Validation flag inline styling on iframe components.
- Fix: Move iframe styling to CSS stylesheet.
- Bug: HTML Validation flag the use of forward slashes on image paths.
- Fix: Replace all forward slashes with backslashes.
- Bug: HTML Validation flag white spaces in the names of some images.
- Fix: Reformat image names.
- Bug: CSS Validation flag redundant code in image styling.
- Fix: Remove the code from the stylesheet.
- Bug: CSS Validation flag missing unit in iframe style.
- Fix: Add the correct unit of measure in iframe style.
- Bug: Low Best Practices Lighthouse score due to low resolution image being displayed on medium screens.
- Fix: Improve score by setting the image to only be displayed on small screens and replaced by higher resolution image on medium screens sizes and up.
- Bug: Application form doesn't post data to https://formdump.codeinstitute.net/.
- Fix: Add "name="..." to input fields.
- Bug: Table on Guild Info page is too wide for small displays.
- Fix: Hide last column on small displays and lower.
- Bug: Colors of class links headers on Resources Page report low contrast on WAVE Accessibility testing.
- Fix: First try: make text bold and retest. Second try: outline text in a different color and maintain the original text colors as to not break continuity of the overall design. -webkit-stroke and shadow style elements did not achieve acceptable outcomes. Final fix: increase color contrast of text.
The website is hosted and deployed from Github. The steps taken for deployment were:
- Logged into my Github account,
- Selected the Repository,
- Go to Settings,tab on the horizontal menu,
- Go to Pages tab on the vertical sub-menu,
- Selected the Main Branch from the drop-down menu under Source,
- Selected the /(root) folder where my index.html was located,
- Clicked Save,
- Once the page was refreshed I was presented with the link to the live website as seen in the image below:
Steps to follow for cloning this repository:
- Log into your Github account,
- Select the Repository,
- Click on the drop-down menu title Code on the top right of the repository file tree,
- Copy the HTTPS address,
- In your Git Bash Terminal type "git clone" then paste the address.
Alternatively you can download the repository as ZIP or use Github Desktop to ge the repository on you local machine
- Readme table of contents generated with MarkdDown TOC.
- Hero image was taken from Wallpaper Flare.
- Landing page GIF was taken from DarkLegacyComics issue #635.
- Achievements widget provided by WoWProgress.
- Achievements banners, role breakdown graphs, members roster icons and player profile pictures sourced from World of Warcraft Armory.
- Progression rankings provided by RaiderIO.
- Embedded videos from FatbossTV Youtube Channel.
- Boss logs provided by Warcraft Logs.
- Solution to change hamburger toggler color from StackOverflow.
- Solution to for variable size images in carousel from StackOverflow.
- Credits for the 404 page background image go to Blizzard Entertainment.
- Special thanks to my mentor Mo Shami for keeping me on the right path during the development of this project.
- The Code Institute team (Matt Rudge, Anna Greaves, Brian O'Grady) for all the effort and energy they put into the HTML, CSS and User Centric Front End Development lessons.
This project is for educational use only and was created for the Code Institute Module of User Centric front end development
Developed by Cristian Buca