Skip to content

Milestone Project Nº1 for the Ful-Stack Software Development Professional Diploma @ Code Institute. Static website built with HTML, CSS, and Bootstrap.

Notifications You must be signed in to change notification settings

effiemanyos/milestone-project-one

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

the webpage on different devices

VIEW WEBSITE LIVE

the logo of the website

User Centric Front-End Development Milestone Project 1

Project Overview

This project consists of a static front-end website built to help Entrepreneurs, Tech Startups, Small Businesses, Non-Profits, Entry-Level Professionals, Recent Graduates, Professional Expats achieve their professional goals by providing them with the right tools. From a business perspective, this project is to build a strategic professional online presence for the owner, promote and sell her services and online courses, build a community around the fields of interest, become an Irish thought leader, and build a solid personal branding resulting in a profitable business.

This project is the first milestone in obtaining a Full-Stack Web Development University-Rated Professional Diploma from Code Institute. Only HTML and CSS were required for this project (Bootstrap was optional); however, other technologies were slightly used to improve the overall quality and user experience.


CONTENT


UX DESIGN

Strategy Plane


Target Audience

  • Entrepreneurs/Solopreneurs
  • Tech Startups
  • SMEs
  • Non-Profits
  • Mentees
  • Entry-Level Professionals
  • Recent Graduates
  • Professional Expats

All working under the constraints of a tight/no budget.

Countries: Ireland (Residence), Spain (Origin), Peru (Origin)

Age: Not Specified (Yet)

User Needs

These are some crucial user pain points worth mentioning:

  • Lack of in-house professionals with enough experience or knowledge in an specific field.
  • Lack of strategic knowledge in an specific field.
  • Lack of budget to outsource certain tasks.
  • Lack of time to invest in the managment of certain tasks.
  • Lack of clarity in the overall strategy or even the ultimate goal of certain field.
  • Lack of ideas on how to grow a business under a tight budget.
  • Lack of structure in our processes which lead us to negative outcomes.

What Are These Users Looking For? | Assumptions

Consulting, Training, Strategy, Management, Guidance, Clarity, Structure, Mentoring, Speaking, Knowledge, Collaboration, Partnership, Free Resources, Networking, Development, Empowerment, Confidence.

This list leads to GROW/LAUNCH their businesses or GROW professionally. These are just assumptions that still need to be validated once we launch the MVP.

Business Goals

Site Owner's Goals:

  • Build my personal branding
  • Develop a professional online presence
  • Expand my networking opportunities
  • Promote my services
  • Showcase my work (portfolio)
  • Get more interesting side projects
  • Increase collaborations and partnerships
  • Make my knowledge profitable (sell my courses/workshops)
  • Increase my client base
  • Become thought leader in Cork, then Ireland
  • Help people grow their businesses
  • Support Irish economy by helping boost the # of Irish startups
  • Gain more professional experience in Ireland

User Goals

External User's Goals:

  • Find resources to learn and implement
  • Find help to grow my business
  • Find help to ideate and execute my business idea
  • Get more customers without investing too much money
  • Increase monthly sales and annual profit
  • Improve my ROI and reduce churn
  • Look for guidance and clarity for professional purposes
  • Stay up to date with the latest trends and resources

User Stories

Target Audience:

  • As an Entrepreneur/Solopreneur, I want to register to Effie's online workshop so that I can boost my business' monthly sales.
  • As a Tech Startup, I want to use Effie's free online resources so that we can create a robust Digital Marketing strategy.
  • As a SME, I want to book a free consultaiton with Effie so that we can increase our business' online presence and engagement.
  • As a Non-Profit, I want to contact Effie for a collaboration and consulting session so that we can grow the organization organically.
  • As a Mentee, I want to apply to Effie's mentorship program so that I can get the proper guidance to build my professional career.
  • As an Entry-Level Professional, I want to join Effie's networking community so that I can land my first full-time job faster through contacts.
  • As a Recent Graduate, I want to consume Effie's free courses and resources so that I can launch my business idea.
  • As a Professional Expat,I want to learn from Effie's successful journey so that I know where to start mine as a new international professional in Ireland.

Visitor Types:

First-Time Visitor:

  • As a First Time Visitor, I want to know who Effie is and what she does so that I can evaluate if I need her expertise to scale my business (SMEs)
  • As a First Time Visitor, I want to know what qualifications Effie has so that I can use the resources she offers to increase my client base and profit (Entry-Level Professionals)
  • As a First Time Visitor, I want to know what kind of services Effie offers so that I can come back whenever I need them to launch my business idea (Entrepreneurs)
  • As a First Time Visitor, I want to Know what other people say about Effie so that I can hire her to manage my social media accounts (Solopreneurs)
  • As a First Time Visitor, I want to know about Effie's work experience so that I can get in touch with her once I finish my studies (Recent Graduates)

Returning Visitor:

  • As a Returning Visitor, I want to make sure Effie's site is not a scam so that I can pay for her services before the product launch (Tech Startups)
  • As a Returning Visitor, I want to contact Effie so that we can work together on my business growth and retention rates (SMEs)
  • As a Returning Visitor, I want to book Effie's free consultation so that I can create a solid Digital Marketing strategy for my business (Solopreneurs)
  • As a Returning Visitor, I want to call Effie directly so that I can start working with her on my personal branding to get a corporate job in Ireland (Professional Expats)
  • As a Returning Visitor, I want to send Effie a message so that I can be sure that she would be able to work on the product-market fit for my business idea (Recent Graduates)

Frequent Visitor:

  • As a Frequent Visitor, I want to register to Effie's upcoming online workshops and events so that I can learn more marketing and business skills for my entrepreurial venue (Recent Graduate)
  • As a Frequent Visitor, I want to join Effie's community for expats (Huasi) so that I can meet more connections to land my dream job faster (Professional Expats)
  • As a Frequent Visitor, I want to pay a monthly or annually subscription so that I can always be up to date with the latest methods and frameworks for my business growth (Entrepreneurs)
  • As a Frequent Visitor, I want to pay online for Effie's services so that I can reduce churn and increase product adoption and customer retention (Tech Startups)
  • As a Frequent Visitor, I want to get the freemium plan so that I can use Effie's free resources and implement them to growth my business (Solopreneurs)

These are just some of the user stories that were created for this project. However, not all of these will be met due to an important reduction of the initial scope. The MVP is now more oriented to building brand awareness, confidence, trust and social proof. The features required by the returning visitors will be implemented by the second month after the launch of the MVP.

Unique Selling Proposition

USPs or Core Differentiators:

Service:

  • International experience working at tech startups, SMEs, and multinational corporations.
  • International studies in various fields such as Marketing, Advertising, Business, Entrepreneurship, Product Management, Software Development.
  • Vast experience working in multicultural teams both in English and Spanish.
  • Experience mentoring and training individuals and small groups of people from different age ranges.
  • Speak fluently two of the most spoken languages in the world, Spanish and English.
  • Have a deep passion for helping others succeed while growing personally and professionally during that proccess.
  • Always up to date with the latest tools and methods in the mentioned fields.
  • Open-minded professional who can easily adapt to each individual or organization's way of doing things.
  • Data-driven, results-oriented, and customer-obssesed professional.
  • Always resourceful and creative, with a lovely sense of humor, loads of patience and positive energy.

Website Functionality:

  • Immediate Response (Chatbot)
  • User-friendly
  • 100% Responsive
  • Free Resources
  • Up-To-Date Content
  • Networking Opportunities
  • Recommended Partners Section
  • Connection to Slack Communities (NetCork & Huasi)
  • Notify Me by Email (Events, News, Resources, Courses)
  • Login/Logout
  • Membership Options (Monthly/Annual Subscription)
  • Exclusive Content

Back to Content

Scope Plane


Existing Features

About Me "Page":

  • About Me → Users can see a brief summary of Effie's biography and who she is. Users are also able to get in touch with her by clicking on the CTA button "Let's Talk!".
  • Work Experience → Users can see a high level description of Effie's work experience and are able to visit each company's official website by clicking on each logo. Users can also visit Effie's LinkedIn profile by clicking on the CTA button "View More".
  • Qualifications → Users can see Effie's education and are able to visit each school's official website by clicking on each logo. Users can also visit Effie's LinkedIn profile by clicking on the CTA button "View More".
  • Communities → Users can see the communities Effie is part of and are able to visit each community's official website by clicking on each logo.

Services "Page":

  • Services Types → Users can see the type of services Effie provides, and by clicking on the CTA button "Request Free Consultation", they are able to request a free consultation with her.
  • Services Fields → Users can see Effie's services fields and are able to see at least four of the services' detailed description to have an idea of what she provides.

Training "Page":

  • Learning Hub → Users can see all the ways they can learn new theory and skills provided by Effie's team.

Contact "Page":

  • Contact Me Form (*) → Users are able to fill out the form to contact Effie. However, the form is not fully functional at the moment.
  • Contact Information → Users can see Effie's location, mobile number, social media channels, and email. Users can contact her via any of those channels during the indicated opening hours.

Footer Section:

  • Footer → Users can see a brief summary of who Effie is and what she offers.
  • Social Media Links → Users can visit Effie's social media channels by clicking on each icon.
  • Newsletter Quick Sign Up Form (*) → Users can fill out a quick sign up form to receive Effie's monthly newsletter straight to their inbox.

(*) Not fully functional at the moment

Future Iterations

These are some of the features that still need to be implemented to have a fully working website as required by the owner:

Home "Page":

  • Welcome Video or Hero Video
  • Featured In or Partners Section
  • Key Figures Section
  • Instagram Feed Section
  • Clients Section

About "Page":

  • Side Projects Section
  • Volunteering Section

Services "Page":

  • Entrepreneurship Section
  • Recommended Partners Section
  • Case Studies Section

Training "Page":

  • Live Workshops Section
  • Online Webinars Section
  • Online Courses Section
  • 1:1 & Group Sessions Section
  • Podcast & YouTube Section
  • Blog & Newsletter Section
  • Virtual Meetups Section

Resources "Page":

  • Books & eBooks Section
  • Blogs & Newsletters Section
  • Podcasts & Clubhouse Section
  • PPL/SM/YT Channels Section
  • Free/Cheap Tools Section
  • Other Resources Section

Join Us "Page":

  • Memberships (Plans & Pricing) Section
  • Join Huasi Section
  • Join NetCork Section
  • P&C (Partnerships & Collaborations) Section

Contact "Page":

  • Calendly Integration ("Book a Call" or "Request Free Consultation")

Other Features:

  • Blog
  • Chatbot
  • Pop Up Lead Magnet & Form
  • Login/Logout (Navigation Bar)
  • Restricted Access (Memership Plans)
  • Membership Payment (Monthly & Annually)
  • Functional Forms (Contact & Newsletter)
  • Registration Forms (Events, Courses, Workshops...)
  • Newsletter Long Form
  • News & Upcoming Events
  • Link Forms to Webserver (Data Collection)
  • GDPR Compliance Cookies Policy
  • Search (Website Content)
  • Store (Merchandising)

Eventually, integrations or links to tools like Notion, Miro, Trello, Eventbrite, Slack, Google Calendar, Teachable might be included in the website.

Back to Content

Structure Plane


Website Structure

At the moment, the website consists in only 1 page containing 11 sections, one after the other. The current structure of the website is the following:

HOME ABOUT SERVICES TRAINING TESTIMONIALS CONTACT
Hero Image About Me How Can I Help Learning Hub Testimonials Contact Me
Work Experience What I Do Communities
Qualifications

Besides the 'Navigation' and 'Footer' section, which goes on top and after the 'Contact Me' section, respectively.

Planned Structure

The intended structure of the website for the MVP was the following:

HOME ABOUT SERVICES TRAINING RESOURCES JOIN US CONTACT
Hero Image About Me How Can I Help (*) Learning Hub Recommend Resources (^) Memberships Contact Me
About Me Expertise What I Do (**) Workshops & Webinars Books & eBooks Join Huasi Footer
How Can I Help (*) Work Experience Digital Marketing Online Courses Blogs & Newsletters Join NetCork
What I Do (**) Qualifications Product Management 1:1 & Group Sessions Podcasts & Clubhouse P&C
Testimonials Top Skills Entrepreneurship Podcast & YouTube PPL/SM/YT Channels Contact Me
Key Figures Communities Recommended Partners Blog & Newsletter Free/Cheap Tools Footer
Contact Me Contact Me Contact Me Virtual Meetups Other Resources
Footer Footer Footer Footer Footer

(*) Services types
(**) Services fields
(^) Summary of all the recommended types of resources

Unfortunately, the scope had to be reduced and adjusted due to a lack of resources, which the most vital was time, and then knowledge to develop some sections and complex features.

Future Additions

The sections that will be added in the near future are the following:

HOME ABOUT SERVICES TRAINING RESOURCES JOIN US CONTACT
Welcome Video (#) Side Projects Entrepreneurship Workshops & Webinars Books & eBooks Memberships Book a Call (**)
Featured In (*) Volunteering Recommended Partners Online Courses Blogs & Newsletters Join Huasi
Key Figures Case Studies (Clients) 1:1 & Group Sessions Podcasts & Clubhouse Join NetCork
Instagram Feed Podcast & YouTube PPL/SM/YT Channels P&C
Clients Blog & Newsletter Free/Cheap Tools
Virtual Meetups Other Resources (^)

(#) Welcome Video or Hero Video
(*) 'Featured In' or 'Partners' section
(**) Calendly integration so that users can book free consultations without having to send an email or a message.
(^) Communities, White Papers, Toolkits, Guides, Templates, Frameworks, Networking, Volunteering, Cheat Sheets, Infographics, Events, etc.

Besides these sections, a login/logout feature will be implemented in the navigation bar so that users can access exclusive content provided to their chosen membership plan.

This will also require the implementation of a feature that allows users to make payments online for their prefered subscription plan on a monthly or annually basis.

Skeleton Plane


Wireframes

  • Dektop
  • Tablet
  • Mobile wireframes for desktop, tablet, and mobile

Back to Content

Surface Plane


Typography

Only two fonts were used for this project.

  • Neucha, designed by Jovanny Lemonad, for all titles and subtitles.
  • Poppins, designed by Indian Type Foundry, Jonny Pinhorn, for all paragraphs.

Font Styling:

The following styling has been used for consistency and alignment throughout the entire website:

  • Titles (h1, h2):
/* Main Titles Styling */
.titles {
    font-family: Neucha, Helvetica, sans-serif;
    font-size: 40px;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
}
  • Subtitles (h3, h4):
/* Subtitles Styling */
.subtitles {
    font-family: Neucha, Helvetica, sans-serif;
    font-size: 25px;
    letter-spacing: 1px;
}
  • Paragraphs (p):
/* Paragraphs Styling */
.paragraphs {
    font-family: Poppins, Helvetica, sans-serif;
    font-size: 16px;
}
  • CTA Buttons Text:
/* CTA Buttons Text Styling */
.cta-buttons {
    font-family: Poppins, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
}

Color Scheme

According to an article on The Science of Colour Persuasion by IDealogic® Brand Lab:

Colour establishes brand recognition amongst consumers, therefore it is crucial that the same colours are always used across all channels, such as website, social media, advertising, product packaging, merchandising, etc.

The following are the colours used for this project:

the website and brand colour palette

Primary Colours:

  • Purple → Associated with wisdom, wealth, spirituality, imaginative, and sophistication.
  • Black → Associated with sophistication, luxury, security, power, elegance, authority, and substance.
  • Green → Associated with health, tranquility, growth, freshness, prosperity, hope, balance, harmony, and nature.
  • Pink → Associated with femininity. Imaginative, passionate, caring, creativity, innovative, quirky.

At the end, only these colours were used throughout the entire website (MVP stage):

the mvp color scheme

Imagery

Illustrations were taken from UnDraw to improve the UX. These illustrations have been modified to match the website and brand colours.

Professional photographies from Unsplash have been used for the Hero Image, Work Experience and Testimonials section of the website.

When ready, professional photos and videos will be added to the website in various sections. Some of the images and videos will come from:

  • Workshops
  • Events
  • Webinars
  • Collaborations
  • Volunteering
  • Owner's Promotional Photos

At the moment, the imagery used is for academic purposes only in order to meet the project deadline. These images will be replaced before the launch of the website.

Back to Content

TECHNOLOGIES USED

The following technology was used during the development and testing of this project:

Languages

  • HTML5 to structure each page.
  • CSS3 to style the elements within each page.

Workspaces, Version Control, Respository Hosting

  • Store Repositories → GitHub
  • Main Workspace → Gitpod
  • Version Control → Git

Frameworks & Libraries

Code Consultations

Testing Process

https://wave.webaim.org/

Other Technologies

(*) This tool was used to create the first version of wireframes. However, the structure and the design of the website had to be modified to meet the project deadline.

Back to Content

TESTING

The entire testing process, issues and bugs found during development, solutions, and final results can be found here.

  • Issues Solved During Development
  • HTML-CSS Validation Testing
  • Testing Performance
  • Testing Accessibility
  • Testing User Stories
  • Code Institute Peer Code Review

Back to Content

DEPLOYMENT

GitHub Pages

This project was deployed to GitHub Pages following these steps:

  1. Login to GitHub
  2. Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/milestone-project-one
  3. Click on that repository to view more details
  4. Click on Settings, which is located right above the Gitpod green button
  5. Scroll all the way down to the GitHub Pages section
  6. Under Source, select Master in the dropdown menu
  7. Select /(root) in the tab which is right next to Branch
  8. Click Save (Note: the page will automatically refresh)
  9. Scroll all the way down again to the GitHub Pages section
  10. Finally, you can see the link where the site is published highlited with a light green/blue background

Follow these visual steps here.

Run Project Locally

  1. Login to GitHub
  2. Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/milestone-project-one
  3. Select Code and click on Download ZIP File
  4. You can extract the file and use it in your local environment once it is downloaded

Clone & Fork GitHub Repository

Additionally, you can either Clone or Fork this repository (Milestone-Project-One) into your GitHub account by following these guides:

Back to Content

CREDITS

Inspiration

Code

All these snippets of code have been fully customized for this project's requirements and to match the look and feel of the brand.

Media

'Hero Image' Section:

'About Me' Section:

'Work Experience' Section:

Company Logos:

Location Images:

'Qualifications' Section:

'How Can I Help' Section:

  • Illustration taken from UnDraw and modified to match the brand and website color scheme.

'Communities' Section:

'Testimonials' Section:

Back to Content

ACKNOWLEDGEMENTS

I would like to thank the following people for the constant support and guidance during my learning process:

Back to Content

About

Milestone Project Nº1 for the Ful-Stack Software Development Professional Diploma @ Code Institute. Static website built with HTML, CSS, and Bootstrap.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published