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