Welcome to the foundation of what is to be Ionvale's website and e-commerce platform. Ionvale is a startup clothing brand I am building. Although the scope of this project is to show competiencies in HTML, CSS and Bootstrap, this website will later be built out to have e-commerce capabilites as my development skills progress with the course. In the context of this assignment this webiste aims to represent the initial stage of the business. I hope for the user to get a small sense of the brand and have them subscribe so that we can notify them when the Ionvale brand is trading.

Find a link to the live website here

• User Journey

  • Instagram Re-directed visitors

    1. I want to gain a basic understanding of what the brand Ionvale does.

    2. I want to meet the team, learning basic information about the founders, their mission and their qualifications.

    3. I want the user to recognise the handmade nature of Ionvales products from the home landing image.

    4. I want to easily follow Ionvales other social media platforms

    5. I want to sign up to more news from Ionvale on their launch.

       In the context of the development stage of the business, this user persona is what the website is built for. Our social media content creation begins in the coming weeks. From this we hope to drive traffic to this website. The ultimate goal is to give them a further insight into what we do and to have them sign up to be notified of our first stock launch.

• Design

  • Color Scheme

    • When deciding on the colour scheme of website I used my gained knowlege of both marketing and web development to draw the conclusion that a basic colour scheme was best suited to the website.

    1. Nav Bar & Footer: For my nav bar and footer I used a basic light grey background. This was to avoid any major color or theme clashes throughout the website. The light grey added a level of depth without affecting the visibility of my nav bar options.

    2. Main Body: For the main body of the website I used a white background to ensure that the content being delivered was as legible as possible. Similiar to the grey navbar, white allowed for less theme clashes and helped draw attention to my main landing image.

    3. Social Icons: For the social media Icons I decided on a blue color. My rational for this is that my submit button on my sign-up form was also blue. My hope was that users would recognise another opportunity to click on an item for more interaction with Ionvale's brand. Further to this Facebooks brand color is blue and market research shows users think blue when they think of social media platforms.

  • Typography

    • When decising on the typography I wanted for my website, I drew learnings from my advertising and marketing modules from my time in University College Cork. Here I researched the effectiveness of different font types in delivering a message to a consumer/user. I wanted to use a font that was similiar to 'Helvetica' but I also felt this lacked some personality. I decided to settle on 'Roboto' which is very similiar to 'Helvetica'. 'Sans-serif' was set as my backup font.

  • Imagery

    • Home Section Image: Deciding on my home section image was quintessential to the user experience in my website. I wanted it to highlight to the user that the nature of our business was handmade clothing. It was important to me that the bespoke designer element of the business was the first scene set for the user.
    • Meet the Team Section Images: The images used in the 'Meet the Team' section of the website were all selected due to their common theme. It was important that they were relatively uniform and didn't distract too much from the other important content around them.

  • Mockups

    • To create my wireframes I purchased a premium subcription on Moqups. I initially started with sketches and then decided to design my Wireframes with UX in mind.

    1. Mobile Version Mockup

    2. Home Page Mockup

    Features

    • Ionvale's website is responsive on all devices.
    • This website uses external links which are embedded under clickable images.
    • The website uses an email form so that users can sign up to be on our email subscription list
    • The fixed nav bar which has spy scroll bootstrapped allows for the user to conveniently navigate their way through the one page scroller.

    Technologies Used

    Languages Used

    • HTML5
    • CSS3

    Frameworks, Libraries & Programs Used

    1. Bootstrap 4.5.3:

       • I used Bootstrap4 to help with the responsiveness of my website. It's grid structures and pre-made layouts helped a lot with this website.

    2. Google Fonts:

       • I used google fonts to emmbed my 'Roboto' font throughout my website.

    3. Font Awesome:

       • Font Awesome came in very useful when searching for icons that matched the aesthetic of the website and improved user experience.

    4. jQuery:

       • jQuery came as part of the Bootstrap4 package. It added stylistic and functional elements to my website.

    5. Git:

       • This was the version control tool I used throughout my development of this project. It allowed me to version control so to go back to previous itterations of my code.

    6. GitHub:

       • This was the repository where I pushed all of my stored code.

    7. Canva:

       • I used canva to source some of my images with my pro version of the software. I also used this to crop and resize the images to meet the websites requirements.

    8. Moqups

       • I used Moqups to generate my Mockups for both the Mobile and Full sized webite pages. This tool was very useful as a guiding framework for the remainder of the project.

    9. Notepad++:

       • I used this free source code editor for expirementation and just to generally gain more experience with other web development tools.

    Testing

    Functionality Testing

    • All social media links were retested and the code was changed to open all social media links in a new tab.
    • The collapsable nav bar was changed so that when each link was clicked the dropdown would disappear.

    Validators

    • HTML5 Validator
    • CSS3 Validator

    Results:

    • Both validators have passed with full marks. There are no errors in the code.

    Testing User Journey

    • To avoid bias, I asked a number of Trinity College Dublin classmates to test the user experience of the website and collected their feedback. It was as follows:

    1. When a user comes onto the website they get a good sense of what the brand does without being greeted with a barrage of content.

    2. They also felt that from their use of the website they felt there was more accountability of who was running Ionvale, what their mission was and what experience they had to achieve this mission.

    3. These users said that they also found it easy to identify where to follow Ionvale on other social media platforms.

    4. In keeping with their peaked interest in the context of landing on Ionvales site from Instagram adverts, they felt inclinded to move to the call to action to subscibe to be notitified of Ionvales first stock drop. This gave me the validation that the website served it's purpose and all feedback indicated a positive user experience.

    Testing Demographics

    • In keeping with Ionvale's target markets I predominantly asked users in a 19-25 age category to test the website. I also shared it with 2 tech savy users in their 50's and my 80 year old granny also navigated the website on her iPad.

    More Extensive Testing

    • To ensure no errors I conducted further testing on the following web browsers successfully:

    1. Chrome

    2. Safari

    3. Firefox

    4. Microsoft Edge

    • To ensure compatability across all devices I tested the webesite on Lenovo IdeaPad S540, iPhone 8 Plus, iPhone 11, iPhone 12, iPad Pro, iPad and Samsung S9.

    Bugs

    • An initial bug that was recognised was that when the website was being used on a lg to medium size screen, the Font awesome icons in the 'How it Works' section were not fitting and would shift the middle h2 downwards with the font awesome icon on top. I added further display properties to rectify this issue.

    Deployment

    How to use GitHub Pages to Deploy the website:

    1. Log into the Github website.

    2. WIthin the repository section at the top you find the "Settings" button on the menu.

    3. Find the section labelled "Github Pages" within the settings section.

    4. Under the "Source" you click the dropdown which is called "None" and you select "Master Branch".

    5. The page will then refresh itself.

    6. You can then go and find your link which is published in the "Github Pages" section.

    How to Clone this website:

    1. Log into the GitHub website and go to the 'Github Repository'

    2. Locate the repository used for this project and click 'Clone/Download'

    3. You can alternatively clone this project by using the 'Clone with HTTPS'.

    4. You copy the HTTPS link and open 'Git Bash'

    5. Alter the working directory to the new location you want the cloned directory to be.

    6. Type 'git clone' in your 'Git Bash' and then past the https .

    7. Then to create this cloned directory hit enter.

  Credits

  Code

  • The code frameworks from 'Bootstrap 4' played a major role in me putting this website together.

  • I took inspiration from the tutorials on 'w3schools' which was instrumental in me ovecoming errors in my code throughout.

  • A video tutorial on Youtube from creator 'Pro Web' whos channel is linked was helpful in getting my head around the structure of my teams section.

  • There was some useful forums on Stackflow which helped me with responsive image design.

  Content

  • All Content was written my I Tiernan Mc Dermott, the developer.
  • All market research references were with reference to 1.1 graded postgraduate research activivites conducted behalf of the Tangent Dept of Trinity College Dublin.
  • I found inspiration from other slack participants Milestone 1 projects.

  Media

  • My images were sourced from Canva and Pixabay.

  Acknowledgements

  • I would like to give particular thanks to my previous mentor Marathana and a very special thanks to my new mentor Medale Oluwafemi who was instrumental in guiding me through this process.

  • I would like to say a big thank you to all at Code Institute for helping me along the way.

  • I want to say a massive thank you to the Slack community. I hope that in the coming months I can pass on the knowledge I have gained in HTML and CSS over this project.