/
Development Process

Development Process

Owned by Alex Sokolovskiy
Last updated: Jun 27, 2019

We had several versions of a website and every the new website development was extemporaneous. It means we always rush with deploy new version to productions. As a result, we have patchy design and not very good code.

I want to prevent a situation like that in the future, and for that, I provide below my vision of the website development process in several steps:



Stage 1

Gathering Information: Purpose, Main Goals, and why we need a new website?

Our website should be perfect because of how our company can build a useful application if we have not a very good site. At first, we should investigate issues before start

develops a website and it's must be documented, because of anyone from the team should understand what we do and have a chance to investigate.

Goals which we should define before start:

  1. Why we create a new website, what's wrong with a current?
  2. What thing we can do better and what we need for that?

Choose who will manage the website development process

This part one of the most important. We need to choose a person who will lead the whole website process, will make key decisions and will be responsible for the final result. 

We need that person because without them the whole process will not have any chance for success. 

Setup team meeting standups for review progress.

We need setup meeting where we will discuss progres by every development stage.

Describe Development tools

The Team should figure out the main tools for website building:

  • Mockups software
  • Designer tools
  • The development environment and technologies

Stage 2

Website requirements

  • Create visual the website sitemap. We need to understand how many pages we should update.
  • Create new Pages mockup. Describe all details, requirements. Developers and designer should have that information for full project vision.
  • Feature requests list for a developer.

Prepare Website content

Good point to create a document with all content for future pages, it helps designer build UI better. Also, it will help the developer build

final page version from the start and save development time.

A document should have the next structure:

  • Page name
  • Page permalink
  • A section with content with media (images, video etc.)
  • Links URLs

Create pages prototypes

Designer before start creates the website design should build pages prototypes based on documents which provided marketing team in stage 1.

This step needs to prevent many iterations of design and save time because of prototypes builds faster than full page design. Also, prototypes help to

define work scope for the developer before the will be finished design and prepare website boilerplate.

Website design

When prototypes are finished and approved by the manager and marketing team, we can start developing the design.

Design should be sorted file per page and uploaded to google drive with a tablet or mobile version if they needed. Also, each file should have

sorted layers by folder with correct naming, all media (images, icon) from the file should be uploaded to google drive with correct naming.

As a final step is style guide with widgets, buttons, links, base fonts styles, etc. in a different state for main pages and one more style guide for post pages 

with the design for every WordPress post text editor class which provided in this document https://codex.wordpress.org/CSS.


Requirements for media:

  • Icons should have the same size and saved in SVG in stroke. (Check icons: https://icomoon.io/app/#/select)
  • An infographic should be in SVG
  • Images should be saved in two variants (x1 and x2 size in PNG)

Review and approve

When the design will be finished manager and marketing team review them, and the designer update all changes which marketing team will be requested.

Website boilerplate

While the marketing team and the designer work on the content and the design, the developer should create boilerplate website theme, config builder, etc.,

install and config plugins, develop modules, prepare server and deploy scripts.

Stage 3

Website Development

Website development plan:

  1. Prepare environment
  2. Create style core based on the style guide, move all base styles to variables and mixins. Icons should be moved to a font
  3. Build base templates
  4. Build main pages with wp-admin editing
  5. Build Post Pages, post style guide, integrate custom post styles to the WP WYSIWYG editor

Deploy to Stage, Testing

When website will be deployed to the stage, the designer and marketing team should check the website and create a list of issues which developer should fix and deploy to stage.

Go to Production

When all issues will be resolved and the team approved all changes we can go to production.

Website feature request, bug fix process

  1. Create a Jira ticket and set them as a child of that ticket  PPL-5930 - Getting issue details... STATUS
  2. Set assignee
  3. Write full requirements, attach a design or mockup which corresponds to the design requirements in this document Website Development Process, upload media files to google drive, attach link.
  4. Set needed priority for the ticket