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.
- 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)
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.
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.
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
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
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.
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
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
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.
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 | 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.
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 (*) | Recommend Resources (^) | Contact Me | ||
| About Me | What I Do (**) | Footer | ||||
| How Can I Help (*) | Work Experience | Digital Marketing | ||||
| What I Do (**) | Qualifications | Product Management | ||||
| Testimonials | Top Skills | |||||
| Communities | Footer | |||||
| Contact Me | Contact Me | Contact Me | ||||
| 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.
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.
- Dektop
- Tablet
- Mobile
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;
}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:
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):
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.
The following technology was used during the development and testing of this project:
- HTML5 to structure each page.
- CSS3 to style the elements within each page.
- Frameworks → Bootstrap V4.6.0
- Fonts → Google Fonts
- Icons → Font Awesome V4.7.0
- Git Commit Messages → Chris Beams | How to Write a Git Commit Message
- CSS Tricks → CSS Tricks
- HTML/CSS → W3Schools
- HTML/CSS → Stack Overflow
- Beautify HTML → Web Formatter
- Beautify CSS → Free Formatter
- Hex to RGB → RapidTables
- Rem to PX → nekoCalc
- Hover Effects → Hover.css
- Website Icon → Geeks For Geeks
- Favicon → W3C
- Test/Fix Code → Chrome DevTools
- Website Responsiveness → Responsive Viewer
- Website Performance → Google Lighthouse
- Validate HTML → W3C HTML Validator
- Validate CSS → W3C CSS Validator
- Mockup → Responsive Design
- Mockup → Techsini Mockup Generator
- Unicode Symbols → Cool Symbol
- Illustrations → UnDraw
- Photography → Unsplash
- Wireframing → Balsamiq (*)
- Planning → Miro
- Visuals → Canva
- Colour Scheme → Coolors
- Shapes & Diagrams → Google Drawing
- Crop Portraits → Crop Circle
- Image Compression → TinyJPG
(*) 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.
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
This project was deployed to GitHub Pages following these steps:
- Login to GitHub
- Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/milestone-project-one
- Click on that repository to view more details
- Click on Settings, which is located right above the Gitpod green button
- Scroll all the way down to the GitHub Pages section
- Under Source, select Master in the dropdown menu
- Select /(root) in the tab which is right next to Branch
- Click Save (Note: the page will automatically refresh)
- Scroll all the way down again to the GitHub Pages section
- Finally, you can see the link where the site is published highlited with a light green/blue background
Follow these visual steps here.
- Login to GitHub
- Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/milestone-project-one
- Select Code and click on Download ZIP File
- You can extract the file and use it in your local environment once it is downloaded
Additionally, you can either Clone or Fork this repository (Milestone-Project-One) into your GitHub account by following these guides:
- Preinstalled Tools (Development) → Code Institute Gitpod Full Template
- Favicon (UX) → Geeks For Geeks
- Spacing (Responsiveness) → Boostrap
- Anchors (Fix Issue) → Stack Overflow
- Metadata (SEO Purposes) → W3Schools
- NavBar (Social Media Icons) → CodeTime by Peter Medina and Trevor Greenleaf
- NavBar (Responsiveness) → Bootstrap
- Scrollspy → Bootstrap
- Hero Image → W3Schools
- About Me Section (Grid System) → Boostrap
- Work Eperience Section (Effect) → How 2 Create
- Qualifications Section (Inspiration) → Code Institute Resume Mini-Project
- Qualifications Section (Timeline) → DevPen
- How Can I Help Section (Inspiration) → Code Institute Love Running Mini-Project
- How Can I Help Section (Layout) → Subrata Saha
- What I Do Section (Layout) → Easy Tutorials by Vikash and Avinash Kumar
- Testimonials Section (Layout) → DarkCode
- Contact Me Section (Inspiration) → True Coder
- Contact Information (Email Link) → Tutorials Point
- Footer Section (Layout) → Divinector
All these snippets of code have been fully customized for this project's requirements and to match the look and feel of the brand.
'Hero Image' Section:
- New York, USA by James Ting taken from Unsplash
'About Me' Section:
'Work Experience' Section:
Company Logos:
- ArchHyve Logo taken from Official Website
- Ardagh Agencies Logo taken from Official Website
- ISG Contract Logo taken from Official Website
- PeggyRain Logo taken from Official Website
- Translit Logo taken from Official Website
- Keysight Technologies Logo taken from Official Website
- inbestMe Logo taken from Official Website
- The Crêpe Kitchen Logo taken from Official Website
- Citigroup Logo taken from Official Website
- Banco de Credito BCP Logo taken from Official Website
- SocMark Logo taken from Official Website
- Publicidad Causa Logo taken from Google Images
Location Images:
- Barcelona, Spain by Shai Pal taken from Unsplash
- Toronto, Canada by Matthew Henry taken from Unsplash
- Lima, Peru by Willian Justen de Vasconcellos taken from Unsplash
- New Jersey, USA by Gautam Krishnan taken from Unsplash
- New York, USA by Patrick Tomasso taken from Unsplash
- Cork City, Ireland by Mark de Jong taken from Unsplash
'Qualifications' Section:
- Universitat de Barcelona Logo taken from Official Website
- Wharton School | University of Pennsylvania Logo taken from Official Website
- University of Alberta Logo taken from Official Website
- Digital Marketing Institute Logo taken from Official Website
- Universidad de Lima Logo taken from Official Website
'How Can I Help' Section:
- Illustration taken from UnDraw and modified to match the brand and website color scheme.
'Communities' Section:
- JCI Ireland Logo taken from Official Website
- ThePowerMBA Logo taken from Official Website
- Growth Hacking Course Logo taken from Official Website
- Sian Horn | The Club Logo taken from Official Website
- IPMG Logo taken from Official Website
- Product School Logo taken from Official Website
- Product Buds Logo taken from Official Website
- Code Institute Logo taken from Official Website
- Women in Tech Logo taken from Official Website
- Up She Rises Logo taken from Official Website
'Testimonials' Section:
- Portrait 1 by ThisisEngineering RAEng taken from Unsplash
- Portrait 2 by Joseph Gonzalez taken from Unsplash
- Portrait 3 by Jack Finnigan taken from Unsplash
I would like to thank the following people for the constant support and guidance during my learning process: