Dev & Documentation

Dev & Documentation

This is a provisional Menu Page for the Development of TRILITEC's website V2.

This is a provisional Menu Page for the Development of TRILITEC's website V2.

Version notes/documentation is included just under each version.

Click on a version's blue-coloured title to visit the pages latest published state.

Current version is the one at the bottom, unless otherwise specified.

Version notes/documentation is included just under each version.

Click on a version's blue-coloured title to visit the pages latest published state.

Current version is the one at the bottom, unless otherwise specified.

Pages & Versions

Pages & Versions

V1 (OG)

V1 (OG)

  • Older/Current website version (V1),

  • extracted from html to Figma,

  • then ported from Figma to Framer

  • Older/Current website version (V1),

  • extracted from html to Figma,

  • then ported from Figma to Framer

V2.1 (Templates)

V2.1 (Templates)

  • Layout scaffolding 1.0,

  • built using providing core info from the old website (V1) to Framer's auto web-builder

  • Layout scaffolding 1.0,

  • built using providing core info from the old website (V1) to Framer's auto web-builder

  • Layout scaffolding 2.0

  • alternate version of V2-1.0

  • Layout scaffolding 2.0

  • alternate version of V2-1.0

  • Layout scaffolding 3.0

  • alternate version of V2-1.0 & V2-2.0

  • Layout scaffolding 3.0

  • alternate version of V2-1.0 & V2-2.0

V2.1 (Core Dev)

V2.1 (Core Dev)

  • Unedited Framer Template

  • chosen for

    • closest similarity to old/current website (V1)

    • most appropriate for TRILITEC's business type

    • display all critical information in an intuitive flow that can all fit on a one-page landing site

  • Unedited Framer Template

  • chosen for

    • closest similarity to old/current website (V1)

    • most appropriate for TRILITEC's business type

    • display all critical information in an intuitive flow that can all fit on a one-page landing site

  • General Description

    • full complete MVP prototype #1

    • // before August 2024 Review


  • Target

    • overview web structure

    • most copy (text content) structured & filled

    • functional v1 to review & improve on


  • Review Notes

    • … // to add here

  • General Description

    • full complete MVP prototype #1

    • // before August 2024 Review


  • Target

    • overview web structure

    • most copy (text content) structured & filled

    • functional v1 to review & improve on


  • Review Notes

    • … // to add here

  • General Description

    • MVP prototype #2


  • Goal / Target

    • address feedback from V1 review

    • own plan

      • Structure

        • Refine structure (info architecure)

        • Componentize elements & frames

          • Full Componented Frames

          • Component Variables

          • Component Variations (hover & press)

        • Ensure relative structuring

      • Media

        • Add media (pictures)

        • Polish visuals

      • UX

        • Improve accessibility

          • Aria labels (the #'s)

      • // maybe

        • Wireframe — craft info-architecture wireframes

          • Why.1 — for customer journey

          • Why.2 — preparation for UX analysis

          • Why.3 — user

        • CMS — learn & create CMS for easier site updating


  • Metrics


  • Results


  • Notes

      • Turns out building a website actually takes a long time … who would've known?

  • General Description

    • MVP prototype #2


  • Goal / Target

    • address feedback from V1 review

    • own plan

      • Structure

        • Refine structure (info architecure)

        • Componentize elements & frames

          • Full Componented Frames

          • Component Variables

          • Component Variations (hover & press)

        • Ensure relative structuring

      • Media

        • Add media (pictures)

        • Polish visuals

      • UX

        • Improve accessibility

          • Aria labels (the #'s)

      • // maybe

        • Wireframe — craft info-architecture wireframes

          • Why.1 — for customer journey

          • Why.2 — preparation for UX analysis

          • Why.3 — user

        • CMS — learn & create CMS for easier site updating


  • Metrics


  • Results


  • Notes

      • Turns out building a website actually takes a long time … who would've known?

——— ——— ———

  • General Description

    • MVP prototype #3

——— ——— ———

  • Goal / Target @ W36-W37

    • // Polish & Remove Deadweight


    • Plan (W36-W37)


    • Structure

      • Componentize elements & frames

        • Full Componented Frames

          • — DONE (m: mostly)

        • Component Variables

          • — DONE (fcf: for componented frames)

        • Component Variations (hover & press) — DONE (fcf)

      • Ensure relative structuring


    • Media

      • Add media (pictures)

        • — DONE

      • Polish visuals (remove wrapping & interaction errors)


    ——— ——— ———


  • Goal / Target @ W38-W39


    • Info

      • Data

        • Total # of Awards

        • Total # of past customers

        • Total # of Number of sensor types

        • Total # of Sensors made

          • … designed

          • … fully built


      • Story

        • Name of Ben's brothers

        • Date of founding

        • First ever customer

        • First ever payment

        • First ever conference

        • First ever pitch


      • Packages

        • What info should be there?


      • Testimonials

        • Get at least 1 real testimonial


      • Member Info

        • What team member info do we want publicized?

        • Gather team member info

        • Member Photos (Individual & Team)

          • Request or plan photoshoot



    • Fix / Change

      • Animation Smoothening

        • how to do smoother animation transitions project-wide


      • Solution Cards Horizontal Expansion

        • make sure parent stacks are not fixed

        • OR, switch to vertical expansion


      • Forms

        • Add Email field on "Share Challenges" form


      • Package Cards

        • Turn Package Cards into Expandable Components

        • Change Package Card Button Text to Learn More

        • Change Package Card Button to Low Contrast on Default, and High Contrast on Card Hover

        • Idea : Maybe turn Package Card into a condensed more-square-like card with more info on interaction


      • Benefits Section

        • Slightly darken gradient node at bottom right corner


     

    • Media

      • More Real Media

        • Get / take more accurate pictures of sensors to show in Features section

        • Get the wireframe version of the sensor


      • Work With Us Section

        • Get Pictures to sell the dream

          • attributes:

            • smiling,

            • factory operators,

            • smiling/shocked customer

            • handshakes


     

    • Feedback

      • Get 2-3 expert/external feedback sessions

     





  • // maybe later

    • UX & SEO: Improve accessibility

      • Aria labels (the #'s)

      • Source Tagging for stock images


    • Refine Structure

      • Create site wireframe & info architecure

        • Wireframe — craft info-architecture wireframes

          • Why.1 — for customer journey

          • Why.2 — preparation for UX analysis

          • Why.3 — user


      • CMS — learn & create CMS for easier site updating

    • Later changes

      • functional

        • Add a "read more" on About-Cards to redirect to dedicated page


      • Alt-Media (3D)

        • Make a few more wireframe renders (& maybe animation for hero section), of the TRAD Sensor


      • Alt-Media (Content)

        • Think of a content section for blogs & more


——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———

——— ——— ———

  • General Description

    • MVP prototype #3

——— ——— ———

  • Goal / Target @ W36-W37

    • // Polish & Remove Deadweight


    • Plan (W36-W37)


    • Structure

      • Componentize elements & frames

        • Full Componented Frames

          • — DONE (m: mostly)

        • Component Variables

          • — DONE (fcf: for componented frames)

        • Component Variations (hover & press) — DONE (fcf)

      • Ensure relative structuring


    • Media

      • Add media (pictures)

        • — DONE

      • Polish visuals (remove wrapping & interaction errors)


    ——— ——— ———


  • Goal / Target @ W38-W39


    • Info

      • Data

        • Total # of Awards

        • Total # of past customers

        • Total # of Number of sensor types

        • Total # of Sensors made

          • … designed

          • … fully built


      • Story

        • Name of Ben's brothers

        • Date of founding

        • First ever customer

        • First ever payment

        • First ever conference

        • First ever pitch


      • Packages

        • What info should be there?


      • Testimonials

        • Get at least 1 real testimonial


      • Member Info

        • What team member info do we want publicized?

        • Gather team member info

        • Member Photos (Individual & Team)

          • Request or plan photoshoot



    • Fix / Change

      • Animation Smoothening

        • how to do smoother animation transitions project-wide


      • Solution Cards Horizontal Expansion

        • make sure parent stacks are not fixed

        • OR, switch to vertical expansion


      • Forms

        • Add Email field on "Share Challenges" form


      • Package Cards

        • Turn Package Cards into Expandable Components

        • Change Package Card Button Text to Learn More

        • Change Package Card Button to Low Contrast on Default, and High Contrast on Card Hover

        • Idea : Maybe turn Package Card into a condensed more-square-like card with more info on interaction


      • Benefits Section

        • Slightly darken gradient node at bottom right corner


     

    • Media

      • More Real Media

        • Get / take more accurate pictures of sensors to show in Features section

        • Get the wireframe version of the sensor


      • Work With Us Section

        • Get Pictures to sell the dream

          • attributes:

            • smiling,

            • factory operators,

            • smiling/shocked customer

            • handshakes


     

    • Feedback

      • Get 2-3 expert/external feedback sessions

     





  • // maybe later

    • UX & SEO: Improve accessibility

      • Aria labels (the #'s)

      • Source Tagging for stock images


    • Refine Structure

      • Create site wireframe & info architecure

        • Wireframe — craft info-architecture wireframes

          • Why.1 — for customer journey

          • Why.2 — preparation for UX analysis

          • Why.3 — user


      • CMS — learn & create CMS for easier site updating

    • Later changes

      • functional

        • Add a "read more" on About-Cards to redirect to dedicated page


      • Alt-Media (3D)

        • Make a few more wireframe renders (& maybe animation for hero section), of the TRAD Sensor


      • Alt-Media (Content)

        • Think of a content section for blogs & more


——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———

  • Full, Functional MVP — 85% achieved

  • Addition One

    • Tech Solutions Page (for each product/service)

  • Addition Two

    • Begin Multipaging

// W39

  • Full, Functional MVP — 85% achieved

  • Addition One

    • Tech Solutions Page (for each product/service)

  • Addition Two

    • Begin Multipaging

// W39

——— ——— ———

  • General Description

——— ——— ———

  • Goal / Target @ W00

    • // —

    • 0

——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———

——— ——— ———

  • General Description

——— ——— ———

  • Goal / Target @ W00

    • // —

    • 0

——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———

V2.X.X — Documentation Template

V2.X.X — Documentation Template

——— ——— ———

  • General Description

——— ——— ———

  • Goal / Target @ W00

    • // —

    • 0

——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———

——— ——— ———

  • General Description

——— ——— ———

  • Goal / Target @ W00

    • // —

    • 0

——— ——— ———

  • Metrics

——— ——— ———

  • Results

——— ——— ———

  • Notes

      • -

——— ——— ———