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.
- 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).
These are some crucial user pain points or struggles worth mentioning:
- 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.
- Quantity Over Quality | There is too much information all over the internet, but most sources share vague, superficial or inaccurate content about Product Management.
- 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.
- 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.
- 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).
- 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.
- 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
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!
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
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
Key Produck's Features:
- ToBuyList App
- ToReadList App
- BookNotes App
- ToRateList App
- Bookmarks App
Target Audience:
Crucial User Stories to Test MVP & Validate Hypothesis:
- As an Aspiring Product Manager, I want to be able to find out which are the best sources of PM information so that I can learn and apply this knowledge to get my first PM role as an intern or APM.
- As a Recent Graduate, I want to be able to track my all the PM books I will be reading this year so that I can understand what PMs actually do and figure out if this is what I really want.
- As a Entry-Level PM, I want to be able to feel confident in that all the resources I'm reading, watching or listening are sharing accurate information about PM so that I can become a great PM.
- 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 be promoted to Product Manager.
- As an Entrepreneur, I want to contact Produck's team to work on a side project so that I can show it on my portfolio at PM interviews at tech companies or other startups.
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)
- 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.
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.
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:
- Navigation Bar
- Jumbotron
- About Produck
- Our Services
- Contact Us
- Main Footer
- What Is PM?
- What PMs Do
- What PMs Know
- Key Soft Skills
Pages:
- Homepage
- PM Role
- Leaders
- Top PM Books
- ToBuyList App
- ToReadList App
- BookNotes App
- ToRateList App
- Top Resources
- Bookmarks App
Only one font was used for this project.
- Poppins, designed by Indian Type Foundry, Jonny Pinhorn, for all paragraphs.
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 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.
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.
The following technologies were used during the development and testing of this project:
- 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.
- Frameworks → Bootstrap V4.6.0
- Fonts → Google Fonts
- Icons → Font Awesome V4.7.0
- jQuery → jQuery V3.6.0
- jQuery UI → jQuery UI V1.12.1
- Git Commit Messages → Chris Beams | How to Write a Git Commit Message
- CSS Tricks → CSS Tricks
- HTML/CSS/JAVASCRIPT → W3Schools
- HTML/CSS/JAVASCRIPT → Stack Overflow
- Validate, Beautify, Format HTML/CSS/JS → Free Formatter
- Hex to RGB → RapidTables
- Rem to PX → nekoCalc
- Hover Over 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
- Validare JS → JS Hint V2.12.0
- Web Accessibility Evaluation → WAVE
- Responsive Design → Responsive Design
- Mockup → Techsini Mockup Generator
- Unicode Symbols → Cool Symbol
- Illustrations → UnDraw
- Photography → Unsplash
- Low Fidelity Wireframing → Balsamiq (*)
- Planning → Miro
- Planning → Trello
- Visuals → Canva
- Colour Scheme → Coolors
- Hex Color Codes (Variants) → Color Hex
- Shapes & Diagrams → Google Drawing
- Crop Portraits → Crop Circle
- Image Compression → TinyJPG
(*) This tool was used to create the first version of wireframes (first draft during brainstorming session). Nonetheless, the structure and the design of the website was modified afterwards to meet the project deadline.
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
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/ms2-produck
- 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
- Login to GitHub
- Insert the following GitHub Repository name in the Search Bar to locate the project: effiemanyos/ms2-produck
- 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 (ms2-produck) into your GitHub account by following these guides:
- Product School
- Mind the Product
- The PM Library
- Women in Product
- Product Buds
- Product People
- Product Hustle Stack
Predefined Code
- Preinstalled Tools (Development) → Code Institute Gitpod Full Template
Head Section
- Metadata (SEO Purposes) → W3Schools
- Favicon (Tiny Icon) → Geeks For Geeks
Navigation Bar Section
- NavBar (Responsiveness) → Bootstrap
- Hoverable Dropdown Menu (Layout) → W3Schools
- Anchors (Fixed Issue) → Stack Overflow
- Link to Section of Another Page (Internal Linking) → Stack Overflow
Hero Image Section
- Hero Image Section (Layout) → W3Schools
About Section
- About Section (Layout) → Code Opacity
Contact Section
- Contact Section (Inspiration) → True Coder
- Contact Information (Email Link) → Tutorials Point
- Email JS API → Code with Voran
- Reload Page After OK Click → Stack Overflow
Bookmarks App
- Bookmarks App (Layout) → Traversy Media by Brad Traversy
- JavaScript HTML DOM (addEventListener() method) → W3Schools
- JavaScript ES5 Features → W3Schools
- Data Structures: Objects & Arrays → Eloquent JavaScript by Marijn Haverbeke
- Local Storage: Why Only Stores String Values → PixelsTech
- Parse JSON Into String (JSON.stringify()) → W3Schools
- JavaScript Loops (For Loop) → W3Schools
- Alter HTML Code w/JavaScript → Stack Overflow
- JavaScript Form Validation → W3Schools
- URL Regular Expression (Regex) → Stack Overflow
BookNotes App
- BookNotes App (Layout) → ZinoTrust Tutorials
- JavaScript Conditionals (If/Else Statement) → MDN Web Docs
- Adding Key/Value to JS Object → Stack Overflow
- JavaScript Array (findIndex() Method) → MDN Web Docs
ToBuyList App
- ToBuyList App (Layout) → Traversy Media by Brad Traversy
- Local Storage (Array of Objects) → Stack Overflow
- Local Storage (Inspiration) → LogRocket
- Window.localStorage (Inspiration) → MDN Web Docs
- JavaScript Validation Messages (Bootstrap Alerts) → Bootstrap
- JavaScript Arrays (splice() Method) → JavaScript Tutorial
- JavaScript HTML DOM (previousElementSibling Property) → W3Schools
- JavaScript DOM traversal (Inspiration) → Zellwk
ToReadList App
- ToReadList App (Layout) → Crypters Infotech
Dark Mode Feature
- Dark Mode - Video (Inspiration) → DesignCourse by Gary Simon
- Dark Mode - Article (Inspiration) → Marcin Wichary
Resources Page
- Top Resources Section (Layout) → SoengSouy Webdesign by Soeng Souy
- Table Columns Width (Inspiration) → Site Point Community
Leaders Page
- Industry Experts Section (Layout) → Master Website Tutorials
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
- The Perfect PM Section (Inspiration) → Code Institute Love Running Mini-Project
- The Perfect PM Section (Layout) → Subrata Saha
Top PM Books Page
- Top PM Books Section (Inspiration) → Red Stapler
- Top PM Books Section (Layout) → CSS Coder
Footer Section
- 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 website.
'Hero Image' Section:
- KW: Team Work | Photo 1 by Annie Spratt taken from Unsplash
'About Produck' Section:
- KW: Diversity | Photo 2 by Zachary Nelson taken from Unsplash
'What Is PM?' Section:
- KW: Product Management | Photo 3 by Leon taken from Unsplash
'Leaders' Page:
- Suzanne Abate → Portrait Image taken from LinkedIn
- Carlos Gonzalez de Villaumbrosia Portrait Image taken from LinkedIn
- SC Moatti → Portrait Image taken from LinkedIn
- Dan Olsen → Portrait Image taken from LinkedIn
- Lewis C. Lin → Portrait Image taken from LinkedIn
- Lena Haydt → Portrait Image taken from LinkedIn
- Gibson Biddle → Portrait Image taken from LinkedIn
- Janna Bastow → Portrait Image taken from LinkedIn
- Ryan Hoover → Portrait Image taken from LinkedIn
- Mirela Mus → Portrait Image taken from LinkedIn
- Martin Eriksson → Portrait Image taken from LinkedIn
- Melissa Perri → Portrait Image taken from LinkedIn
'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:
- Hooked by Nir Eyal → Book Cover taken from Goodreads
- Escaping the Build Trap by Melissa Perri → Book Cover taken from Goodreads
- The Product Book by Carlos Gonzalez→ Book Cover taken from Goodreads
- Product Mindset by Product School → Book Cover taken from Goodreads
- Measure What Matters by John E. Doerr → Book Cover taken from Goodreads
- Crossing the Chasm by Geoffrey A. Moore → Book Cover taken from Goodreads
- Shape Up by Ryan Singer → Book Cover taken from Goodreads
- The Mom Test by Rob Fitzpatrick → Book Cover taken from Goodreads
- Inspired by Marty Cagan → Book Cover taken from Goodreads
- Range by David Epstein → Book Cover taken from Goodreads
- Cracking the PM Interview by Gayle McDowell → Book Cover taken from Goodreads
- 100 Things by Susan Weinschenk → Book Cover taken from Goodreads
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:
- Pendo → Logo and Founder(s) taken from Official Website
- Product School → Logo and Founder(s) taken from Official Website
- Product Love by Eric Boduch → Logo and Founder(s) taken from Official Website
- The Product Folks → Logo and Founder(s) taken from Official Website
- Masters of Scale → Logo and Founder(s) taken from Official Website
- Product People → Logo and Founder(s) taken from Official Website
- Rocketship FM → Logo and Founder(s) taken from Official Website
- Women in Product → Logo and Founder(s) taken from Official Website
- 100 Product Managers → Logo and Founder(s) taken from Official Website
- Productized → Logo and Founder(s) taken from Official Website
- Silicon Valley Product Group → Logo and Founder(s) taken from Official Website
- Amplitude → Logo and Founder(s) taken from Official Website
- Product Buds → Logo and Founder(s) taken from Official Website
- Product Manager HQ → Logo and Founder(s) taken from Official Website
- 280 Group → Logo and Founder(s) taken from Official Website
- Product Hunt Radio → Logo and Founder(s) taken from Official Website
- Mind the Product → Logo and Founder(s) taken from Official Website
- One Knight in Product → Logo and Founder(s) taken from Official Website
This section will contain a lot more resources for aspiring PMs to access. However, this will be implemented in the next iteration.
I would like to thank the following people for their constant support and guidance during my learning process:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent