Introduction

Over the summer a project came up where it was important to communicate my ideal schedule / timeline with the team involved. My process at the time was basically a hybrid of what I learned in university and work. I worked like I cook, pulling from a few good recipes, but never actually writing anything down. Thankfully to my benefit this project did come up where it was necessary, and I now have a written process to share with those involved in future projects.

Process

  1. Inspiration - Collect reference material from relating brands and identify partner styles to adhere to.

  2. Feature requirements – Determine a full feature for the site, outline how everything will be achieved.

  3. Sitemap – Determine and test user flow navigating through page relationships.

  4. Outline – Incorporate all features into a full text outline, providing structure in relation to various feature requirements.

  5. Finalize copy – Swap out copy from the outline with finalized messaging.

  6. Confirm Outline – Present the complete outline as the sites β€œscript”. (wait for approval)

  7. Wireframe – Convert the approved (text) outline into a visual wireframe, take care of all structural / layout decisions.

  8. Motion design – Document and prototype deep interactions present in the wireframe.

  9. Identify assets needed – Build out a list of assets (ie images) needed for design.

  10. Confirm Wireframe – Present the outline and wireframe, confirming that the visual layout incorporates the entire script and that the intended messaging / weight of features is met. (wait for approval)

  11. Mood board – Collect design inspiration from related industry and any pre-established branding.

  12. Style guide – Define a coherent style to follow throughout the site, ensure that guide addresses all necessary components in the wireframe.

  13. Design – Set style guide into the wireframe, bring to pixel perfect quality swapping in real text (from outline) and final assets.

  14. Confirm Design – Have the final product approved for development. (wait for approval)

  15. Component Development – Build all reusable styling / functionality.

  16. Development – Bring in components and build out unique sections.

  17. Issue tracking – Launch staging site and invite users for feedback, resolve found issues.

  18. Content creation – Build a backlog of content to be uploaded.

  19. Launch Site

For 2018

As I get more projects under my belt, I expect the process to continue changing. Right now the plan is to continue documenting the process after significant change is made, perhaps publishing an updated version.