Skip to content

Milestone Project Nº2 for the Ful-Stack Software Development Professional Diploma @ Code Institute. Interactive website built with HTML, CSS, Bootstrap, Vanilla JavaScript, jQuery, API, and jQuery UI.

Notifications You must be signed in to change notification settings

effiemanyos/ms2-produck

Repository files navigation

the webpage on different devices

VIEW WEBSITE LIVE

Interactive Front-End Development Milestone Project 2

Project Overview

This project consists of a interactive front-end platform built to help aspiring PMs break into Product Management despite having a non-technical background, by providing them with professionally selected external resources and Produck's productivity tools so that they can land their first PM job and properly excel in the role. From a business perspective, this project's main purpose is to strategically build a strong community of product professionals within Ireland, a way to network and build relationships with international industry experts, promote and sell Produck's membership, workshops, and online courses, become an important Irish thought leader.

This is the second milestone project in obtaining a Full-Stack Web Development University-Rated Professional Diploma from Code Institute. Regarding the technologies used, HTML, CSS, and JavaScript were required for this project (jQuery, jQuery UI, Bootstrap, and APIs were optional); however, as observed, other technologies were also slightly used to improve the overall quality and user experience.


CONTENT


UX DESIGN

Strategy Plane


Target Audience

  • Recent Graduates (Tech/Non-Tech Background)
  • Product Enthusiasts (Curious & Passionate)
  • Aspiring Product Managers
  • Entry-Level Product Managers
  • APMs (Associate Product Managers)
  • Non-Tech Background Professionals
  • Entrepreneurs (Founders & Co-Founders)
  • Professionals Transitioning Into PM

Produck is targeting professionals passionate about Technology, Products, Innovation; people constantly looking to solve customers' pain-points and struggles by leveraging the use of technology.

Targeted Countries: Ireland & UK (Main Markets)

Targeted Age: Not Specified

All under the constraints of a tight/no budget to spend on expensive bootcamps (e.g. Product School or Kellogg School of Management).

User Needs

These are some crucial user pain points or struggles worth mentioning:

  1. Lack of Trust | Users do not know how to differentiate between high-quality content and poor or fake PM content on the internet, as they do not have previus professional experience in the field.
  2. Quantity Over Quality | There is too much information all over the internet, but most sources share vague, superficial or inaccurate content about Product Management.
  3. Overwhelming & Exhausting | It is overwhelming and exhausting for users to navigate through all those online resources (too many options to choose from), while also trying to find the right information from the right source without having to consult friends or colleagues.
  4. Lack of Time | There is too much going on in users' lives at the moment (esp. during the global pandemic) that they do not have the time to search for the information themselves because it is proven that it takes a lot of time to do the research every time.
  5. Fear of Missing Out (FOMO) | Users have also shared during the user research that they constantly feel that they are missing out on great tips and valuable content from high-quality resources (esp. from Fortune 100 companies, book authors, mentors, industry experts).
  6. Lack of Official Studies | There is a lack of official Product Management studies offered by universities and colleges. Users are looking for cost-effective bootcamps, workshops, cohorts, mentors, and online courses to learn more about this relatively new field in the tech industry.

Business Opportunity

  • Growth demand for Product Managers
  • Golden age of Product Management
  • Tech gap in the Irish market
  • Boom in the tech industry worldwide
  • Product economy is increasing

What Are Users Looking For?

Users are looking for ONE THING (their main goal):

  • Break Into Product Management, which means getting their first PM role and start their PM career from there!

User Goals

Produck's Services & User Goals From Their POV:

  • Use the mentoring and coaching programmes to break into Product Managemen, which means getting my first PM role in a tech company.
  • Access the up-to-date directory of the best Product Management online resources (professionally selected by Produck) and thought leaders (international industry experts) to learn from the best.
  • Attend to Produck's networking events to meet other aspiring Product Managers, as well as people already in the industry to learn from their past experiences.
  • Join Produck's PM community to share my passion and strong interest for Product Management and Technology with other product enthusiasts.
  • Attend Produck's group workshops and take their online courses to develop key PM skills and gain some practical knowledge by working on small side projects, not just by reading, listening, or watching content.
  • Stay up-to-date with bite-sized news and information on the latest trends, methods, frameworkds, tools, products, technology by clicking on the website's Social Media icons to follow Produck's social channels.
  • Constantly check Produck's job board with entry-level PM roles based in Ireland (or remote worldwide) to start applying to the ones I like the most.(**)
  • Watch Produck's weekly live interviews with Q&As at the end to learn from other PMs working at Fortune 100 companies in Ireland or other countries.
  • Locate the best and most useful PM mock interviews recommended by Produck to ace mine and get my dream job in Product Management.

(*) Currently, books are one of the most reliable (cost-effective) source of information about Product Management. This is the main reason why Produck's owner has decided to create various web-based applications using Vanilla JavaScript, jQuery, and Local Storage to help Produck users set their own objectives and track their reading milestones in the same platform where they can also learn more about Product Management through other carefully selected external resources.
(**) This is not part of the MVP features but Produck will do have a job board.

All these are assumptions from insights gathered during previus user research. However, they still need to be validated once the MVP is launched.

In summary, the users' main goals are the following:

  • Get my first PM role
  • Learn from the best
  • Network with other PMs
  • Save time and money
  • Build relationships
  • Be part of a community
  • Get involved in Ireland
  • Develop key PM skills
  • Gain PM experience
  • Always be up-to-date

Business Goals

Site Owner's Goals:

  • Create an active Irish Product Management community
  • Incentivate women based in Ireland to pursue tech roles
  • Increase Produck's client base for mentoring & training
  • Build an audience of passionate PMs
  • Help aspiring PMs land their first PM role
  • Build brand awareness in Ireland & UK
  • Expand networking opportunities
  • Connect with industry experts & leaders
  • Become thought leaders in Ireland & UK
  • Promote Produck's core services
  • Develop a professional online presence
  • Increase collaborations & partnerships
  • Make team's knowledge & experience profitable
  • Reduce the tech gap in Ireland (lack of tech professionals)
  • Reduce the gender gap in the tech industry (lack of women in tech)
  • Support the Irish economy by helping boost great building and innovation

User Stories

Key Produck's Features:

  • ToBuyList App
  • ToReadList App
  • BookNotes App
  • ToRateList App
  • Bookmarks App

Target Audience:

  • Recent Graduates (Tech/Non-Tech Background)
  • Product Enthusiasts (Curious/Passionate)
  • Aspiring Product Managers
  • Entry-Level Product Managers
  • APMs (Associate Product Managers)
  • Non-Tech Background Professionals
  • Entrepreneurs (Founders & Co-Founders)
  • Professionals Transitioning Into Product

Crucial User Stories to Test MVP & Validate Hypothesis:

  1. As a Product Enthusiast, I want to easily understand what this web-based platform is all about and what kind of services it offers to aspiring Product Managers, so that I can decide to stay or leave.
  2. As an Associate Product Manager, I want to subscribe to Produck's newsletter to receive weekly or monthly up-to-date information, so that I can use it wisely to get promoted to Product Manager.
  3. As an Entrepreneur, I want to contact Produck's team or the founders directly to get to know them in person, so that I can propose them a strategic partnership to build great products together.
  4. As a Non-Tech Background Professional, I want to know what are the main tasks PMs usually do or are responsible for, so that I can prepare myself for the role by practicing in advance.
  5. As a Professional Transitioning Into PM, I want to know what soft and hard skills are required to be a great Product Manager, so that I figure out if theres's anything I need to work on or develop.
  6. As an Aspiring Product Manager, I want to be able to easily find the best sources of product-related information, so that I can learn and apply this knowledge to get my first PM role as APM.
  7. As an Aspiring Product Manager, I want to be able to easily save my favourite sources of product-related information, so that I can revit them whenever and wherever I want to until I excel the topic.
  8. As a Recent Graduate, I want to be able to track and rate all product-related books I will be reading this year, so that I can learn as much as possible to help me find a great opportunity as intern.
  9. As an Entry-Level Product Manager, I want to be able to take notes of key concepts/frameworks from the PM book I'm reading, so that I can use that valuable information later on when I'm at work.

Unique Selling Proposition

USPs or Core Differentiators:

Service Principles:

  • Bite-Sized Content
  • High-Quality Content
  • Carefully Selected Content
  • Up-To-Date Content
  • Free Content & Resources
  • Recommended PM Content
  • Connecting Professionals
  • Exclusive PM Content
  • Irish-Oriented (Irish Recruiting Info)
  • Mentoring & Coaching

Productivity Web-Based Apps (Key Service)

  • ToReadList App → Users are able to create a list of up to 10 books (per category) that they want to read in order of priority. They can also separte the books in categories (e.g. Product, Data Analytics, Software Development, Marketing, Business, etc.).
  • ToBuyList App → Users are able to create a list of up to 10 books they are planning to buy. Once they have already bought them, they can remove them from the list.
  • ToRateList App → Users are able to rate the top must-read PM books (already listed) depending on how much value they provided, or if they even liked them at all.
  • BookNotes App → Users are able to create short notes of what they consider the most important concepts mentioned in the books they are reading. These notes will then be useful for them when starting their first role as APM.
  • Bookmarks App → Users are able to save their favourite sources of information about PM in a simple but useful list. They just need the name and the URL of that source to save it.

Website Functionality:

  • Immediate Response (Chatbot)
  • User-friendly (Intuitive)
  • Positive User Experience
  • 100% Responsive
  • Up-To-Date Content
  • High-Quality Content
  • Networking Opportunities
  • Connection to Slack Community
  • Notify Me by Email (Events, News, Resources, Courses)
  • Login/Logout (Instead of Local Storage)
  • Membership Options (Monthly/Annual Subscription)
  • Fast Loading Platform
  • MVP w/Local Storage (Replace in Next Iteration)
  • Dark Mode (Web-Based Applications)

Back to Content

Scope Plane


Existing Features

  • Navigation Bar section containing the main menu of the website, which allows users to navigate within the platform.
  • About Produck section, which introduces the brand, its purpose, and how it can be useful for aspiring PMs.
  • Our Services section, which shows users all the services Produck is offering for them to land their dream job as PMs.
  • Contact Us section, which allows the users to contact Produck team via email or phone during business hours.
  • Footer section, which shows a summary of the platform and let users locate favourite links and subscribe to the newsletter.
  • About PM section, which introduces the role to aspiring product managers in a high-level way and let users contact Produck team.
  • What PMs Do section, which shows users a broad idea of the key responsibilities that a product manager might have in the role.
  • What PMs Know section, which shows users what kind of background knowledge PMs should have to excel in this role, but not mandatory.
  • What PMs Need section, which shows users in percentages what key soft skills they would need to have to be a great product manager.
  • Leaders page, which consists of a comprehensive directory of international thought leaders or industry experts in this domain.
  • Top PM Books page, which consists of a comprehensive directory of books related to various disciplines that help PMs excel in their role.
  • ToBuyList App, which allows users to create a list of books they are planning to buy within the next 6 months and keep track of them.
  • ToReadList App, which allows users to create a "to-do" list of all the books they are planning to read throughout the year.
  • BookNotes App, which allows users to create notes of key or most valuable concepts they find in the book they are currently reading.
  • ToRate App, which allows users to rate the recommended books by Produck for aspiring PMs and product professionals (the must-read books).
  • Top Resources page, which consists of a comprehensive directory of external resources, which had been picked by industry experts.
  • Bookmarks App, which allows users to save their favourite sources of information and resources to keep track of news in the industry.

Future Additions

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

  • Membership Plans (Monthly & Annually)
  • Payment Options (Visa, Stripe, Paypal)
  • Login Option (Account & Password)
  • Integration w/Third Party Apps
  • Replace localStorage (Shareable Content)
  • Pagination (Resources, Books, Leaders...)
  • Search Bar (Resources, Books, Leaders...)
  • Job Board (Job Listings in IE & UK)
  • Account Settings Option (Dark Mode)
  • Notifications Feature (Toggle)
  • Personal Profiles (From LinkedIn)
  • Fully Responsive Produck Applications
  • Instructions Section for Produck Apps
  • Export to PDF Feature for Produck Apps

At the moment, users have the Dark Mode option in all Produck applications; however, only some of them have Local Storage implemented due to the lack of resources such as expertise and time. These particular apps will be tested regarding how many users actually interact with them in order to work on them and improve the experience for the next iteration.

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

Back to Content

Structure Plane


Website Structure

At the moment, the platform consists of only 10 pages and 10 sections. The current structure of the website is the following:

HOME PM ROLE LEADERS PM BOOKS RESOURCES CONTACT
About Produck What Is PM? Industry Experts Top PM Books Key Resources Contact Us
Our Services What PMs Do ToBuyList App Bookmarks App Newsletter
Contact Us What PMs Know ToReadList App Social Media
Favourite Links Key Soft Skills BookNotes App
ToRateList App

Sections:

  1. Navigation Bar
  2. Jumbotron
  3. About Produck
  4. Our Services
  5. Contact Us
  6. Main Footer
  7. What Is PM?
  8. What PMs Do
  9. What PMs Know
  10. Key Soft Skills

Pages:

  1. Homepage
  2. PM Role
  3. Leaders
  4. Top PM Books
  5. ToBuyList App
  6. ToReadList App
  7. BookNotes App
  8. ToRateList App
  9. Top Resources
  10. Bookmarks App

Back to Content

Skeleton Plane


High-Fidelity Design

Informative Sections

Home Page screenshot of the home page

PM Role Page screenshot of the pm role page

Leaders Page screenshot of the leaders page

PM Books Page screenshot of the pm books page

Resources Page screenshot of the resources page

Interactive Sections

ToBuyList App screenshot of the tobuylist app

ToReadList App screenshot of the toreadlist app

ToRateList App screenshot of the toratelist app

BookNotes App screenshot of the booknotes app

Bookmarks App screenshot of the bookmarks app

Back to Content

Surface Plane


Typography

Only one font was used for this project.

  • Poppins, designed by Indian Type Foundry, Jonny Pinhorn, for all paragraphs.

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 trust, loyalty, dependability, logic, security, serenity, and stimulates productivity.
  • Black → Associated with sophistication, luxury, security, power, elegance, authority, and substance.
  • Green → Associated with health, growth, freshness, prosperity, hope, encourages balance and harmony.
  • White → Associated with innocence, purity, cleanliness, and simplistic.

Logo Variations

logo variations of the brand

Imagery

The illustration from the 'Background' section was taken from UnDraw to improve the UX. The illustration has been edited to match the website and brand colours (branded).

Professional photographies from Unsplash have been used for the 'Hero Image', 'About Produck' and 'About PM' sections 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:

  • Live Workshops
  • Networking Events
  • Online Webinars
  • PM Conferences
  • Collaborations
  • Community Activities

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 technologies were used during the development and testing of this project:

Languages

  • HTML5 to structure each page.
  • CSS3 to style the elements within each page.
  • Vanilla JavaScript to make the website interactive.
  • jQuery to make the website interactive.
  • API to allow the user to send a message or subscribe.

Workspaces, Version Control, Respository Hosting

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

Frameworks & Libraries

Code Consultations

Testing Process

Other Technologies

Back to Content

TESTING

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

  • HTML Validation Testing
  • CSS Validation Testing
  • JAVASCRIPT Validation Testing
  • Testing Performance
  • Testing Accessibility

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/ms2-produck
  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

Run Project Locally

  1. Login to GitHub
  2. Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/ms2-produck
  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 (ms2-produck) into your GitHub account by following these guides:

Back to Content

CREDITS

Inspiration

Code Snippets

Predefined Code

Head Section

Navigation Bar Section

Hero Image Section

About Section

Contact Section

Bookmarks App

BookNotes App

ToBuyList App

ToReadList App

Dark Mode Feature

Resources Page

Leaders Page

Responsibilities Section

  • What PMs Do Section (Layout) → Zen-Dev

Key Soft Skills Section

  • Soft Skills Section (Layout) → CodingNepal
  • Bootstrap Grid System (Responsive Columns) → Bootstrap
  • Bootstrap Display Property (Responsiveness) → Bootstrap

Background Section

Top PM Books Page

Footer Section

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

Media

'Hero Image' Section:

'About Produck' Section:

'What Is PM?' Section:

'Leaders' Page:

'Background (The Perfect PM)' Section:

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

'Top PM Books (Must-Read Books)' Page:

This section will contain a lot more books for aspiring PMs to read. These books will be related to various disciplines (leadership, business, technology, product management, design, analytics, among others). However, this will be implemented in the next iteration.

'Top Resources' Page:

This section will contain a lot more resources for aspiring PMs to access. However, this will be implemented in the next iteration.

Back to Content

ACKNOWLEDGEMENTS

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

Back to Content

About

Milestone Project Nº2 for the Ful-Stack Software Development Professional Diploma @ Code Institute. Interactive website built with HTML, CSS, Bootstrap, Vanilla JavaScript, jQuery, API, and jQuery UI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published