Skip to content

effiemanyos/first-personal-website

BranchesTags

Repository files navigation

LOGO + Effie Manyos' Personal Website

ADD LOGO + INTRODUCTION ABOUT PROJECT

PROJECT DESCRIPTION & INTRODUCTION:

  • Briefly introduce the project
  • What's the motivation behind creating it
  • What does it aim to solve and for whom

Static website to promote my services, increase my online presence and build a solid personal branding. This project is the first milestone in obtaining a Full Stack Web Development diploma from Code Institute.

Demo

View Live Website

the webpage on different devices

UX Design

1.1. Strategy Plane

Target Audience:

  • Entrepreneurs/Solopreneurs
  • Tech Startups (Budget: Low/None)
  • SMEs (Budget: Tight/Low)
  • Non-Profits
  • Mentees
  • Entry-Level Professionals
  • Recent Graduates

Countries: Ireland (Residence), Spain (Nationality), 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.

Assumptions: What Are They Looking For?

  • Consulting
  • Training
  • Strategy
  • Management
  • Guidance
  • Clarity
  • Structure
  • Mentoring
  • Speaking
  • Knowledge (Develop Technical Skills)
  • Collaboration
  • Partnership
  • Free Resources (+Recommendations)
  • Networking

This list sums up to → GROW or LAUNCH their businesses or even GROW professionally. These are just assumptions that still need to be validated.

Site Owner's Goals (Biz 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

User Stories:

"As a (type of user), I want to (perfom some task) so that I can (achieve some goal)."

Target Audience:

  • As an Entrepreneur/Solopreneur, I want to register to Effie's online workshop so that I can boost my business' monthly sales (achieve some goal).
  • As a Tech Startup, I want to use Effie's free 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 my business' online presence and engagement.
  • As a Non-Profits, I want to contact Effie for a collaboration and consulting so that we can grow the organization organically.
  • As a Mentee, I want to apply to her mentorship program so that I can get the proper guidance for my professional career.
  • As an Entry-Level Professional, I want to join her 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 training resources so that I can launch my business idea.

Type of Visitors:

  • As a First Time Visitor, I want to know who she is and what she does so that I can evaluate if I need her to grow my business.

  • As a First Time Visitor, I want to make sure this site is not a scam so that I can use these resources and services to increase my client base.

  • As a Returning Visitor, I want to contact Effie...

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.

Unique Selling Proposition (USP) | 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

1.2. Scope Plane

Existing Features (MVP):

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.

1.3. Structure Plane

Website Structure

At the moment, the website consists in only one page containing various 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
Communities What I Do
Work Experience
Qualifications

Besides the 'Footer' section, which goes after the 'Contact Me' section.

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 X Contact Me √
About Me √ Expertise # What I Do (**) √ Workshops & Webinars X Books & eBooks X Join Huasi X Footer √
How Can I Help (*) √ Work Experience √ Digital Marketing √ Online Courses X Blogs & Newsletters X Join NetCork X
What I Do (**) √ Qualifications √ Product Management √ 1:1 & Group Sessions X Podcasts & Clubhouse X P&C X
Testimonials √ Top Skills √ Entrepreneurship X Podcast & YouTube X PPL/SM/YT Channels X Contact Me √
Key Figures X Communities √ Recommended Partners X Blog & Newsletter X Free/Cheap Tools X Footer √
Contact Me √ Contact Me √ Contact Me √ Virtual Meetups X Other Resources X
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.

1.4. Skeleton Plane

Wireframes

  • Mobile
  • Tablet
  • Desktop

1.5. 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 Sizes:

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 */
.paragraphs {
    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.

Imagery

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

Professional photographies from Unsplash have been used to represent the owner's origins. All the selected images, except for the hero image, were taken in Peru, South America.

When ready, professional photos will be added to the website in various sections. Some of the images 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.

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

Coding Consultations

Testing

Other Technologies

Testing

Issues Solved Duringe Development

Testing User Stories

Testing Accessibility

Testing Performance (Google Lighthouse)

HTML & CSS Validation

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

Credits

Inspiration

Code

Media

'Hero Image' Section:

'About Me' Section:

'How Can I Help' Section:

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

'Work Experience' Section:

'Qualifications' Section:

'Communities' Section:

'Testimonials' Section:

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages