Category: Digitech

  • Requirements

    Home page

    Section

    Status

    Header

     

    Hero Section

    Screenshot

    • Animate in text/characters

     

    • ASCII logomark should animate out with the rocket by the text randomizing and building it while it launches from the bottom right of where the D is and move to its final position. While the rocket is moving, the blast animates out (randomized characters coming in and then finishing on the characters what we have in the design) and then around the bottom and left side circling around to the tip of the rocket area.

     

    • The scroll line animates on a loop and is clickable to scroll down.

     

    • The text has a highlight text that appear red.

     

    • The eye image is a background image or video. A lightbox video can optionally be attached to it.

     

    Transition to the next section

    • Can set the transition background color based on the block below the hero. In this case, it’s the Featured Work block which is white, so you’d set the hero transition color to white.

     

    • Animation:

      • When scrolling down, the hero contents don’t move (Can be done with GSAP ScrollTrigger’s pin)

      • Have a cover div wrapper, it should be full viewport with two 50% width divs with the backgrounds set to the hero transition color. These should stagger translate up from the bottom of the viewport when scrolling.

     

    • ASCII logomark should animate out with the rocket by the text randomizing and building it while it launches from the bottom right of where the D is and move to its final position. While the rocket is moving, the blast animates out (randomized characters coming in and then finishing on the characters what we have in the design) and then around the bottom and left side circling around to the tip of the rocket area.

    Screenshot

    • The section title should be centered according to the screen height (om PC, devices and tablets)

    Work section

    Screenshot

    • Text in top bar is on a looping marquee.

     

    • By default, there is no media (image/video). When hovering a work item, that item’s media then appears and is attached to the to cursor movement but pinned right.

     

    • The cursor changes to a View icon

     

    Services section

    Screenshot

    • Rocket Headline Shift
      Above is the stating position. While the user scrolls, the contents should translate left until the right rocket is in view and the left is half off screen.

     

    When scrolled to, the red frame animates in following each inner piece animating in.

     

    • Top left text is a looping marquee

     

    • ASCII text in the top right is a bunch of ASCII text that types out and moves up like a terminal. This is a loop.

     

    • Top left pane of the ASCII man should be a video that uses some frontend magic to render text characters based on the video. Alternatively, this can also be just a normal media component (image/video).

     

    • The pane with “Websites & Digital Products” and text bellow:

      • This is connected to the round numbered navigatIon right above it.

      • The title is a mask and each section can have a media item. This media item will appear in the masked title on hover and follow the mouse.

        • A secondary circle is in front of the text giving a subtle circle outline. Both this circle and the media circle in the mask should be aligned with each other and with the mouse positioning.

     

    • The entire HUD is designed to fit in the viewport. On some smaller screens, some panes can be hidden.

     

    • The HUD should be pinned to the viewport. As you scroll, the sections (e.g. Websites & Digital Products) change. Clicking the numbered navigation changes the section as well; it scrolls the browser to that section, animating it in.

     

    Brand slider

    Screenshot

    • ed background with the rocket starts as a circle and then animates in when scrolled to.

      • Background goes from a circle to the width of the available space while the rocket translating right. The final position is how the design is.

     

    • Logos are a marquee

     

    Accordeon

    Screenshot

    • Cursor changes to the + when hovering an unopened item.

     

    • Cursor changes to the – when hovering an opened item’s title.

     

    • Animating in each section should be a smooth transition.

      • The right vents should stagger load in when an item is opened. Similar on closing an item.

     

    Call to action

    Screenshot

    • Rocket is animated

      • Shoots up when scrolled to

      • Hovering slightly on repeat

      • Blast animated (opacity changes, text constantly changin)

     

    • Matrix raining code like in the loader

     

    • Dots are a mask to the media (picture/video)

     

    Footer

    Screenshot

    • Only the Home page in the designs is using the final footer. The notable difference includes the address.

     

    Work page

    Top section

    https://prnt.sc/d-nnMG-BuKBX

    • Need to be made and adapted according to the design

     

    Projects section

    https://prnt.sc/RZvpHstCr4n-

    • Need to be made and adapted according to the design

     

  • Bug report instructions

    Rule

    Example

    Title should be self-descriptive ("What?" "How behaves?" "While what conditions?").

    [Home page] The links are not added to the social icons in the Footer.

    Bug specific should be stated on first place (ex.: reproducible only on some device type, intermittent issue, environment specific, any other unique attribute).

    [Tablet] [Mobile]. The team images are not adapting to the new layout after rotating the device.

    Avoid using not exact phrases such as "working not appropriately", "not proper way","not per design". Try to be as specific as possible.

    The price is not fixed at the bottom of the card.

    Description

    • Steps should be as specific as possible;

    • Examples of pages, profiles, vacancies, etc. that could be used for easier bug reproducing should be provided in any suitable form (URL, ID, etc.);

    • Actual and Expected results should be provided with appropriate screenshots, whenever applicable;

    • During bug creation, separate critical/major/minor bugs and create a separate bug for each issue;
      You can combine the bugs if they have the same priority. But if the priority is different – please create 2 or more bugs.

    • If during retesting the bug, the issues described initially are fixed, close the bug, and for all new issues that appeared after the fix and weren’t described in the bug initially create a NEW bug.

    Bug template

    Filed

    What to fill

    Project

    Digitech

    Issue type

    Bug

    Summary

    A brief one-line summary of the issue.
    Summary field name should be filled according template:
    [Area name] <Problem short and concrete description>

    Description

    Description field should be filled as in following template:

    Preconditions:

    1….

    2…

    Steps to reproduce:

    1. Step_1.

    2. Step_2.

    3. Step_3.

    Actual result:

    Clear description of what actually happened.

    See attached screenshot for more details.

    <Screenshot>

    Expected result:

    Clear description of what should have been happened.

    See attached design for more details.

    <Screenshot> / <link to the design>

    Additional information:

    REPLACE the TEXT with Additional information, if applicable.

    Priority

    The degree of importance for the business to resolve the defect. It is driven
    by business value and indicates how soon the defect should be fixed.

    Attachment

    If you can supplement your bug report with a picture that shows the
    problem, or a score that helps others reproduce, fix and verify the problem
    quickly, attach these files to the bug report. The attached files can be as
    follows: pictures, video-recording, other files types, if needed.

    Linked Issues

    <link to the related issue>

    Assignee

    The person whom the bug is assigned to (backend issues – BE/Dev Lead,
    Frontend issues – FE Lead)

    QA Scope

    <testing scope>

    Verification statuses templates

     

     

     

    Passed

    Verification status: (синяя звезда) Passed

    Device/Browser: Win10 + Chrome (the latest) – if actual

    Comment: describe the actual result

    Screenshot(s): <screenshot>

     

     

     Reopened

    Verification status: (синяя звезда) Reopened

    Device/Browser: iPhone 13 Pro Max (the latest iOS + Safari)

    Actual result: <Actual result>

    Screenshot(s): <screenshot>

    Expected result: <Expected result>

     

     

    Blocked

    Verification status: (синяя звезда) Blocked

    Device/Browser: Samsung Galaxy S22 Ultra (the latest Android + Chrome)

    Screenshot(s): <screenshot>

    Comment: <Additional info about blocking issue>

  • Browsers and Devices Scope

    Mobile:

    Tablet:

    Desktop (macOS):

    Desktop (Windows):

    Android:

    Android:

    • 2560px (Chrome, Firefox)

    • 1920 x 1080 (Chrome, Firefox)

    • 1536 x 864 (Chrome, Firefox)

    • 1440 x 900 (Chrome, Firefox)

    • 1024 x 768 (Chrome, Firefox)

    • 2560px (Chrome, Firefox)

    • 1920 x 1080 (Chrome, Firefox)

    • 1536 x 864 (Chrome, Firefox)

    • 1440 x 900 (Chrome, Firefox)

    • 1024 x 768 (Chrome, Firefox)

    • Samsung Galaxy S21 Ultra Chrome

    • Samsung Galaxy S8 Chrome

    • Samsung Galaxy Tab S8

    iOS:

    iOS:

    • iPhone 12 Safari & Chrome

    • iPhone 13 Safari & Chrome

    • iPhone 6 Safari & Chrome

    • iPad 9th Gen

     

     

     

     

     

     

  • Test Strategy

    1. Document Revision History 

    Date

    Version No.

    Author

    Description

    22.09.2022

    1.1

     Viktoriia Malysh

     Writing the common information about the project the test strategy.

    03.10.2022

    1.2

     Viktoriia Malysh

    The scope of devices is added

    2. Approvals 

    The Test Strategy is approved by the following stakeholders: 

    Stakeholder

    Full Name

    Status

    Date of Sign Off

    Client Representative

     Digitech

     

     

    Project Manager

     Ruslan Bokach

     

     

    DEV Lead

     

     

     

    FE Lead

     Olexii Reshetnik

     

     

    3. Purpose

    The purpose of the test strategy is to define the testing approach, the types of tests, test environments, tools to be used for testing, and the high-level details of how the test strategy will be aligned with other processes. The test strategy document is intended to be a living document and will be updated when we get more clarity on Requirements, Test environment and Build management approach, etc.

    4. Project Overview

    The Digitech site is already live (https://www.digitechwebdesignaustin.com/ ). The task of our team is to make the full redesign of the site based on the design and requirements.

    Digitech is the site of the USA company that makes designs for sites and does the marketing stuff for their clients. This is how they describe themself – “We’re a visual design & marketing agency with an extraordinary SEO gift and a passion for helping brands get found online.“.

    The logic of the site is not hard but there will be a lot of interesting animations that need to be well developed and tested.

    5. Tools for QA planning and testing purposes

    Confluence will be used for storing all project-related information.

    JIRA will be used as a bug tracking system, as well as for planning, tracking, and analyzing project activities and tasks.

    Perfect Pixel will be used for design testing.

    DevTools will be used for testing the styles and the animations.

    Browserstack will be used for cross-browser/device testing.

    6. Requirements references for the Digitech project

    7. Testing Types

    The following testing types will be executed during the “Digitech” project:

    7.1.  Smoke testing

    The smoke testing will be performed to ensure that the most important functions work and all expected functional areas are available for testing. The results of smoke testing are used to decide if a build is stable enough to proceed with further testing. In other words, smoke tests play the role of acceptance criteria for each new build.

    7.2. Functional testing

    The functional testing will be executed to evaluate the compliance of a system or component or third-party with specified functional requirements and corresponding predicted results. Functional testing is performed for each planned feature and is guided by approved client requirements.

    7.3. Regression testing

    The regression testing will be performed to ensure that any bugs have been fixed and that no other previously working functions have failed as a result of the reparations and that newly added features have not caused any problems to previous versions of the software.

    Regression testing is usually performed when all the components are tested based on created high-priority test cases; no critical and blocking bugs are open that were found during the component testing.

    The regression testing is usually done after the code freeze and is always done before the deployment to production.

    7.4. Design (Responsive) testing

    The design testing will be performed for all testing levels to assure that it meets the design-related specifications.

    Responsive testing on tablet and mobile devices is focused on business logic for the project in the scope of features.

    Design testing will be based on the approved scope of the UI designs – https://www.figma.com/file/Zuz4b1AHYAElkNmvN9xuE2/Digitech?node-id=1474%3A28289

    (синяя звезда) Design testing will be based on the pixel-to-pixel verification.

    (синяя звезда) Responsive testing on other intermediate resolution values is OOS.

    7.5. Cross-browser compatibility testing

    The cross-browser compatibility testing will be performed to check the ability of the solution to interact with the agreed list of browsers.

    Cross-browser testing will be covered manually on Test Environment only on browsers defined for cross-browser testing.

    8. Planned testing types on the test environments (browsers, devices)

    Mobile:

    Tablet:

    Desktop (macOS):

    Desktop (Windows):

    Android:

    Android:

    • 2560px (Chrome, Firefox)

    • 1920 x 1080 (Chrome, Firefox)

    • 1536 x 864 (Chrome, Firefox)

    • 1440 x 900 (Chrome, Firefox)

    • 1024 x 768 (Chrome, Firefox)

    • 2560px (Chrome, Firefox)

    • 1920 x 1080 (Chrome, Firefox)

    • 1536 x 864 (Chrome, Firefox)

    • 1440 x 900 (Chrome, Firefox)

    • 1024 x 768 (Chrome, Firefox)

    • Samsung Galaxy S21 Ultra Chrome

    • Samsung Galaxy S8 Chrome

    • Samsung Galaxy Tab S8

    iOS:

    iOS:

    • iPhone 12 Safari & Chrome

    • iPhone 13 Safari & Chrome

    • iPhone 6 Safari & Chrome

    • iPad 9th Gen

    9. Approach for Process Flow

    9.1. Work with Tasks

    Tasks will be splitted on BE and FE.

    (warning) Pay attention:

    All specific statuses and labels should be defined according to the project.

    1. All Tasks which are selected to the current/next Sprint could be picked up for Test design.

    2. All Tasks that have the status “Ready for QA” should be assigned to QA.

    3. All found issues that relate to the Task should be linked to it.

    9.2. Work with Bugs

    Bug creation tips:

    • The bugs should be created according to the task titles – for example “Bugs – Homepage” (“Bugs – page name – block name”). If there is more than one bug that relies on one task ticket, the bugs are written in one ticket. If the QA Engineer found the new bugs after the written ticket were fixed, the QA Engineer needs to write the new bug ticket and assign it to the Developer.

    • In case the found bug is related to a certain task – it should be linked to the task.

    • In case QA found Blocker/Critical bug during the testing ticket which is not related to the task – it should be added to the Active sprint.

    • In case QA found a Major/Minor/Trivial bug during the testing ticket which is not related to the task – it should be reported and added to the backlog.

    Bug verification tips:

    • In case the ticket is passed – QA should add a detailed comment with a screenshot (video if needed) and move it to the “Approved”/”Done” status.

    • In case the ticket is failed – QA should add a detailed comment with a screenshot (video if needed) and the ticket should have the “Reopened“ status.

    10. Regression testing procedure

    The regression testing will be performed before the UAT based on impact analysis to ensure that any bugs have been fixed, that no other previously working functions have failed as a result of the changes, and that newly added features have not caused any problems to previous versions of the software.

    The scope for regression testing is planned based on priorities for planned test cases and covered by impact analysis if any.

    Entrance criteria:

    • Planned Tasks are done; all the found defects are registered in JIRA;

    • All blocker and critical defects for all features are fixed and acceptance criteria are met;

    • The features are deployed to the test environment – DEV.

    • The Production Candidate build is accepted by the QA team.

    Exit criteria:

    • All blocker and critical defects, found during Regression testing for all features are fixed and all acceptance criteria are met.

    • PO (product owner) confirms that all is good.

    • PO provides the final Go/NoGo decision.

    General tips:

    • All blocker/critical bugs found during regression should be fixed prior to the release.

    • The tested product should be reviewed by the PO.

  • Milestone 2

    • frontend + backend + QA

    • 80% or higher score on google page speed insights

    • 95% speed on gtmetrix.com

  • Milestone 1

    • Project setup

    • frontend + backend + QA of the main page.

    • frontend + backend + QA of "About" page

    • frontend + backend + QA of "Work" page

    • frontend + backend + QA of "Project" page

  • 🆘 Change Requests

    Name

    Date Requested

    Estimate

    Status

    IN PROGRESS DONE

    DECLINED

  • Digitech – Project Passport

    Project Name / Client

    Digitech / Digitech

    Phase

    IN DEVELOPMENT

    Scope

    Redesign of existing website

    Tech Stack

    WP

    Initial Estimate

    500h

    Project’s Start Date

    19.09.2022

    Target release

    01.12.2022

    Time Tracking Tool

    Timedoctor: Digitech – Digitech

    Invoicing Type

    Per Milestone

    🤝 Team

    PM

    Ruslan Bokach

    Designer

    Digitech

    Developer

    Olexii Reshetnik (FE), Simon (FE), Artem Symonchuk (BE)

    QA

    Victoriia Malysh

    (синяя звезда) Description

    Issue overview: The client wants to create a new website that will be more up-to-date.

    Scope of work: Development of the website from scratch. The client has several info pages and blogs on his website. We should provide a website based on the existing design. Blog articles should be transferred from our side.

    References:

    Design

    https://www.figma.com/proto/Zuz4b1AHYAElkNmvN9xuE2/Digitech?page-id=0%3A1&node-id=526%3A30458&viewport=-446%2C914%2C0.13&scaling=min-zoom&starting-point-node-id=526%3A30458&show-proto-sidebar=1

    Live website

    https://www.digitechwebdesignaustin.com/

    Live admin

    u: digitech
    p: K8%i7gZNOogyvtCn

    Stage dev

    https://digitech.dev.cheitgroup.com/wp-admin/

    Stage admin

    https://digitech.dev.cheitgroup.com/

    digitech_owner
    Rk0T9Ij8zdIOGkUUX

    GIT

    https://gitlab.cheitgroup.com/cheitgroup/developing/wordpress/digitech

    FRONT

    https://frontend.dev.cheitgroup.com/digitech/frontend/page.php

    CS PANEL

    https://my.greengeeks.com/login
    u: darryl@digitechaustin.com
    p: Eg#H!(@KYbv#

    CS FTP

    http://ftp.digitechwebdesignhosting.com
    cheit@digitechwebdesignhosting.com
    9h!.W-Q5xxF3

    CS DATABASE

    digitec1_stage
    digitec1_stage
    kdK6L5HG_&DW

    FTP

    [HOST] => 159.69.126.101
    [PORT_SSH] => 22
    [USER_NAME] => digitech
    [PASSWORD] => zylZzuRn
    [DOMAIN] => http://digitech.dev.cheitgroup.com
    [HESTIA_PANEL] => https://159.69.126.101:8083/
    [USER_EMAIL] => digitech@dev.cheitgroup.com

    Database

    [DB_HOST] => localhost
    [DB_USER] => digitech_db
    [DB_NAME] => digitech_db
    [DB_PASS] => szyCc15J
    [DEPLOY_KEY] => tM1_SJstzRLxSxdr7H

    Gravityforms

    55a51996659bd48220ba86aff242fa13
    https://www.gravityforms.com/my-account/downloads/
    darryl@digitechaustin.com
    iu!&DyxWkQH(ZCH5tO0So)ib

    Googlemaps

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3443.2238182149867!2d-97.7150494844258!3d30.344588381774237!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644ca33147c1771%3A0xbba6992e086de267!2sDigitech%20Web%20Design%20Austin!5e0!3m2!1sen!2seg!4v1663653988901!5m2!1sen!2seg" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

    Mailchimp

     (синяя звезда) Milestones