☰

Hyperion Web

🛠 Design Document 📐

📜 Project: Hyperion Web Main

🧔 Customer: --

📆 Date Started: Nov 3, 2020 📅 Phase 1 (MFL) Launch Date: Nov 12, 2020

Every project we take on at Hyperion Web deserves its very own Design Document. Its a place where we can lay out all of the expectations and requirements for the project, set an action plan, specify and solve problems, and keep track of progress. This Design Document is the one we made for our own website. It will give you an idea of our process and the level of professionalism to expect when you do business with us.

Enjoy.

This document serves as a place for all related information to be organized so that all teams developing a web and marketing campaign can easily access it and maintain a unified conception of the project.

The document should include the signed scope of work from the Purchase Agreement but will take the scope of work and turn it into a detailed project plan.

All aspects of the project should be defined as much as possible. From the tech stack implemented, tools used, to an estimate of which experiments must be done to move forward. Any graphic, marketing, video or written concepts outlined. The goal is to develop a unified marketing experience for customers of the client across the web. A full marketing approach is to be outlined as well.

This is meant to be a living document as the project gets more defined on our end. A customer requested change is a Change order and must be accompanied by a new Purchase Agreement Addendum and Updated Scope of Work. The details of the project, however, should be recorded here even as they change and including a post-mortem after build, launch and each segment of marketing campaign.

Note: as projects take on new technology and learn new skills, there needs to be a way to record fixes to quirks, bugs, or simply just documentation on how to set up a new software or make two different apps talk etc. Do this in a separate doc.

🔬 Scope of Work

  1. Main hub marketing site for Hyperion Web
  2. Marketing for Hyperion Web

🗺 Site Map

    -home
    -consultation sign up
    -hyperion manifesto (or core values)
    -people behind hyperion
    -process
    -portfolio/customer reviews
    -blog

⚙️ Problem Specifications

Website:

  1. Need Effective platform for quickly establishing customer trust
    • This means SSL
    • High Speed
    • Uniform, professional appeal
  2. minimize overhead, technical and cost
  3. full integration with email marketing API
  4. ability to grab contact info from customers
  5. ability to split test (A/B)
  6. Clear Marketing Content and uniform (consistent) appearance
  7. Ability to update blog posts from CMS like system or dashboard
  8. ability to take payments for services
  9. ability to retain customer signin information accounts (in order to remember that they have gone through initiation)
  10. 🗯 This is the big idea: the site should play as a game or an experience not just a standard site. so for example, the customer should be led through a journey where the relevant marketing information is fed to them at specific times through multimedia, interaction, micro interactions, animations, etc. as the customer progresses through the site and understands more and more, they are allowed to gain access to further more detailed info. make them work for it and reward them with high quality content.

Marketing:

  1. Need effective ability to reach specific target demographics and adjust on the fly as we collect data
  2. Ability to collect data on
    • Customer purchase demographics
    • Abandoned carts
    • Site visitors
    • Traffic sources
    • Conversion rates to certain pages
      • Modals?
  3. Ability to test ad effectiveness
  4. Ability to bring existing customers back for repeat purchases or subscription packages

🕹 Technology Proposed

Website:

  1. Statically generated site served on CDN (netlify)
  2. nunjucks templating and 11ty ssg
  3. minimalist css framework, Wing, but customized for Hyperion (and made better for further general use possibly including js implements)
  4. js + libs for animations and interactions
  5. serverless functions using netlify forms and functions for any back end needs
  6. stripe for customer invoicing

Marketing:

  1. Google Display network (GDN)
  2. Google Analytics for data tracking
  3. Netlify for A/B testing
  4. Netlify for forms
  5. Semrush or Ahrefs for marketing intel (100/mo!)
  6. Social -Need Research
    • Youtube is GDN?
    • Facebook pixel?

🧨 Action Plan

  1. Initial Customer Consultation ✅
  2. Sign PA and collect x% down payment ✅
  3. Acquire existing brand and product data – pictures, pricing, text ✅
  4. Domain Name Search, Recommendations and Customer Selection and Purchase ✅
    • Use namecheap ✅
  5. Website Wireframe and layout complete when Customer Approval is signed ✅
  6. Initialize Site on Hyperion Test Snipcart Account ✅
  7. Build HTML, CSS, Javascript files for basic site
    • Build with Page Speed Insights Tooling Open and Constant Speed Testing
    • Publish to Github ✅
    • Publish test site to Netlify for Customer Access/Testing ✅
    • Achieve Minimum Functionality for Launch (MFL)
      • This includes site content
      • Graphics and copy
      • All products and final pricing
      • Shipping data – ensure customer has plan for logistics - If not, offer them one!
      • Tax data
  8. Integrate Email Subscription Capability (MFL) ✅
  9. Set up customer Stripe and Paypal Accounts
  10. Transition Site to Customer Snipcart Account
  11. Site Testing
    • Mobile
    • Email subscription test
    • Page Speed Insights
    • Cookie Functionality
    • Ecommerce Functionality
    • Test Purchase – create $1 Item if necessary
    • Deliver Test Checklist to Customer
    • Customer Signoff and collect x%
  12. Site Launch
    • Set DNS settings
      • Set A record to netlify’s IP addresses
      • Set C record to www. and any subdomains
    • Connect Netlify to Domain
    • Ensure SSL is certified on site
    • Site is live
    • Collect any remaining site x%
  13. Marketing (can begin some steps simultaneous to site build if able)
    • Market Research Phase
      • Use Semrush or similar tool to identify competitors and what is working for them advertisement wise
      • Record details about their value proposition
      • Use this data to further develop customer value proposition and place in the market
      • Identify key demographics
    • Design ads that are congruent with site design on applicable platforms
      • Copy and imaging
      • Any sales or promotions
    • Design email marketing campaign
      • Develop a consistent brand story
      • Ensure all customers are onboarded “start at the beginning”
      • Configure settings in mailchimp

Minimum Functionality to Launch

  1. Basic pages:
    • Shop with products in inventory today ✅
    • Home Page ✅
    • Eco-friendly mission page ✅
  2. Transactional Email Configured
  3. Basic Email from Email Marketing Campaign Set up
  4. Payment gateways
  5. Shipping/tax data
  6. Test pricing
  7. Analytics setup

Additional Features to Test

  1. Categories and sorting
  2. Live chat service
  3. Page animations barba

Schedule your Free Consultation