Project Planning

The steps to planning your project successfully.

Define

...your Audience

Who is the target audience for the capstone project?

  • Who will you want to view and appreciate the web application.
  • Hint: It is NOT you!

Teachers

Mentors

Peers

Recruiters

Hiring Managers

Career Coaches

Define

...your Project

What is an appropriate capstone project?

  • Your project MUST include JavaScript
    • Why manufacture a car with an expensive paint job without an engine? Consider your audience, do they want you to build static web pages or an application that solves a problem or accomplishes a task?
  • Should display your development skills and creativity in a professional manner.
  • Can be completed in the allotted time frame you have to commit.

Determine what YOUR project will be.

Create a high level story you want tell with your project.

  • This will be your elevator speech for you capstone project and used during demo day.

allows users to ask questions via chat during a talk and add resources to videos. "

"I want to create a web APPLICATION that...

Define

...your Content

Determine what pages you need and the content of each page.

  • Don't worry about look and feel or style of the content, that comes later.
  1. Make a list of pages
  2. Write a brief description of the content for each page
    • Navigation
    • Breadcrumbs
    • Main content
    • Aside content
    • Footer

Define

...your User Flow

What interactions will the user be required to do to use your web application.

  • Focus on page flow not content of pages
  • Make sure you analyze all user flows, creating multiple flow charts if necessary.

Example:  E-commerce Application

Create

...Wireframes

Now that you think you know what you want to create.

  • The wireframes should be crude.  We are not creating comps.
  • Start with pencil and paper or whiteboard
    • Then if desired, move into a digital version.
  • Create at least one per page.
    • If a page has suffocated user interaction, multiple wireframes for a single page may be required.
  • Create wireframes for both different screen sizes.  I.E.: mobile and desktop.
  • They should be proportionally correct.
  • They should identify the content to be placed on each page but not display actual content.
  • They should annotate any user interactions.

Create

...Wireframes

Start with pencil and paper or whiteboard, then if necessary create a digital version

Create

...Wireframes

Analog Tools:

  • Pencil & Paper
  • Whiteboard & Dry Erase Markers

Digital Tools:

  • Draw.io (https://www.draw.io/)
  • Adobe XD (https://www.adobe.com/products/xd.html)
  • Inkscape (https://inkscape.org/)
  • Adobe Illustrator (https://www.adobe.com/products/illustrator.html)
  • Mockflow (https://mockflow.com/)
  • JustInMind (https://www.justinmind.com)

Create

...Documentation

Document the entire process of the planning.

  • Reference your decisions when questions arise.
  • The documentation will be included in your portfolio, so make it look nice.

Required to complete your homework!

Homework

  • Define your Audience
    • We already did this, correct?
  • Define your Project
  • Define your Content
  • Define your User Flow
  • Create Wireframes
    • ​1 wireframe per page minimum
    • Hand-drawn is acceptable

Due week 5, submit viewable link or PDF in the Slack channel

What's Next (Week 6)

  • Design your Website
    • ​Focusing on UX and UI design
  • Define a Timeline
  • Create your Kanban board using Trello
    • Stories writing
    • Tasking out stories
  • Test, Test and Testing

Basic UX/UI Design...

and Kanban Board Creation

Basic web design and creating a Kanban board with stories & tasks

Design

...your Web Application

User Experience (UX)

  • Keep it INTUITIVE
    • Navigation should be obvious
  • Make it consistent
    • Follow the "standard" for interactions a.k.a clicking a hamburger icon () should open the navigation and arrows (,) should open drawers.
    • Keep interactions the same across the application
  • Allow users to make errors by handling errors gracefully a.k.a form validation
  • Accessibility

Resources

  • https://usabilla.com/blog/fundamental-concepts-ux/
  • https://careerfoundry.com/en/blog/ux-design/5-key-principles-for-new-ux-designers/
  • https://www.mockplus.com/blog/post/interaction-design-principles

Design

...your Web Application

User Interface (UI)

  • Responsive Design or Mobile First
    • Rearrange (stack) elements on narrow screen
    • Hide and/or show different elements based on screen size
    • Adjust font sizes
    • Resources
      • https://darwindigital.com/mobile-first-versus-responsive-web-design/
      • https://www.smashingmagazine.com/2017/02/mobile-first-is-just-not-good-enough-meet-journey-driven-design/

Design

...your Web Application

User Interface (UI)

  • Fonts & Icons
    • Find alternate fonts for logos & headers
    • Use icons where appropriate
    • Resources
      • https://fonts.google.com/

      • https://material.io/tools/icons

      • https://fontawesome.com/

  • Images

    • Need to be your originals, Creative Commons or Public Domain
    • Resources
      • https://www.pexels.com/

      • https://unsplash.com/creative-commons-images

Design

...your Web Application

User Interface (UI)

  • ​Color & Contrast
    • Pick a color palette
    • Keep accessibility in mind
      • Visually impaired & colorblind
    • Resources
      • https://coolors.co
      • https://randoma11y.com/
  • Animations
    • ​Resouces
      • https://css-tricks.com/video-screencasts/97-intro-to-css-animations/
  • ​Navigation
    • ​Again... it should be Intuitive

Define

...your Timeline

How much time do you have to complete your project?

  • ​Estimate the amount of time on a daily/weekly basis
    • ​Approximately 2 hours/day, 5 days/week for 4 weeks = 40 hours
  • This number is used to estimate completion of the project on time.
  • Plan to complete your project including testing the week before demo day so you can fine tune & polish the leeway, plus it gives you some padding on your estimates.

Create

...your Kanban Board

Trello.com

  • ​Create an account on trello.com
  • Create a board
    • ​Name the board something meaningful regarding your project
  • Share your board with teachers and mentors
  • Create swim lanes
    • Back log
      • Brainstorm and story writing
    • Ready for development
      • Story writing completed, full details and acceptance criteria
    • In Progress/Development
      • Stories currently being worked (should be limited to 1 or 2)
    • Completed

Create

...your Stories

  • Create stories
    • Steps:
      • Title
        • A brief summary of changes
      • Define definition of done
        • “As a [persona], I [want to], [so that].”
      • Prioritize
      • Estimate
      • Minimum Viable Product or Optional
  • Stories are NOT tasks, they are definition of a feature
    • You should task out each story, that become development "chunks"

Resources to create

...your Stories

  • Atlassian tutorial
    • https://www.atlassian.com/agile/project-management/user-stories
  • How To Write User Stories by Robert Smith
    • Part 1: https://www.youtube.com/watch?v=eYZ8vBXL1kk
    • Part 2: https://www.youtube.com/watch?v=_iodOh-QTww
  • Example of thought process for a simple task such as create a PBJ Sandwich
    • https://youtu.be/5X58UgQpGyQ

Task out

...your Stories

  • Create tasks
    • Steps
      • Define tasks required to fulfill the definition of done
      • Prioritize
      • Estimate/Time Box
        • ​​Keep in mind your total time line estimate. Plan to finish a week early.
        • For new tasks, multiply estimate by 1.5 or 2
        • Time boxing, determine the max time to spend on an optional feature
          • ​Once that time is met, stop work on it and reevaluate
          • Resource
            • ​https://www.agilealliance.org/glossary/timebox

Develop

...your Web Application

The FUN part, and why you are here.

  • Update your kanban board as you start and complete stories and tasks.
  • You and others should be able to gauge your completeness by the board status.

Test

...your Web Application

What should be testing?

  • Make sure it behaves correctly.
  • Make sure it looks correct.​

How should you test?

  • Test as stories are completed
  • Test on many devices and resolutions
  • Test in multiple web browsers
    • ​Chrome, Safari, Microsoft Edge, if suicidal Internet Explorer
  • Have others test
    • ​You should observe them testing and listen to their feedback
    • Have teacher, mentors, peers, friend (smart & dumb), your kids, your parents
  • Audit with Lighthouse
    • ​https://developers.google.com/web/tools/lighthouse/#devtools

Test, test and more testing

Update

...Documentation

Document the entire process of design, development and testing.

  • Reference your decisions when questions arise.
  • The documentation will be included in your portfolio, so make it look nice.

Required to complete your homework!

Homework

  • Design your Web Application
    • ​Select fonts, images, color scheme, navigation, animation
  • Define your Time line
  • Create your Kanban board
    • ​Create Stories
    • Create Tasks
    • Make Estimates
  • Start Development

Due next week, share the link to the Kanban board with all details in stories and tasks