Our Not So Secret Sauce design document serves as a comprehensive guide to align all team members on key design elements—including branding, user experience (UX) user interface (UI), 3D assets, illustrations, typography, animations, and more.
By clearly defining each component and its role within the larger project, we ensure that every contributor, regardless of when they join the process, has the context needed to understand the current phase and make informed decisions. This document will not only streamline communication and maintain consistency across deliverables but also serve as a reference point to uphold quality standards and achieve our shared creative vision.
Table of Contents
- 1. PHASE 1 — Design Discovery
- 2.1 PHASE 2— Design Exploration
- 2.2 Phase 3 UX & Wireframing
- 2.3 PHASE 4 — Final Design
- 2.6 PHASE 5 — Implementation
- 2.6 PHASE 6 - Website Promotion
Design Process
1. PHASE 1 — Design Discovery
The Strategy Team will take the lead in conducting thorough Discovery research and compiling detailed documentation. This process will include close collaboration with both the Design and Development teams to gather expert insights on specific technical and creative considerations.
In most cases, the Design Team will provide the Strategy Team with comprehensive documentation that outlines the Primary and Secondary Design Goals. These Discovery Design Notes, delivered as a Google Doc and posted to Teamwork for central access, will break down key considerations such as 3D asset requirements, illustration styles, UI/UX patterns, and branding directives. These notes will focus on clearly defining the desired outcomes and strategic objectives, without yet proposing concrete solutions or design directions.
This phase also serves as a critical opportunity to establish or refine the Digital Brand Voice. By setting a clear and consistent brand identity at this early stage, the team ensures that all subsequent work aligns with the client’s messaging, tone, and visual language. This step lays the groundwork for a cohesive and well-informed creative process, providing every team member with a shared understanding of the project’s overarching goals and context.
2.1 PHASE 2— Design Exploration
- Brainstorming / Problem solving and idea generation sessions during which Design Team Members posit solutions spontaneously with no initial concern about quality. Believing that terrible ideas can lead to unexpected breakthroughs, initial judgements are withheld.
- Review / As all design sessions need to align with the Target Audience and End Goals, Inspection entails a cursory review of the Discovery notes along with a brief re-assessment of Primary and Secondary Design Goals to ensure these are in keeping with current project understanding.
- Retrospective / Looking back at progress to analyze progress and make improvements by identifying extraneous elements or things that can be consolidated. Page layouts grouped by similarity aids in pattern discovery and element consolidation, for example.
- Mind-Wandering Exercise / 30 minutes - A quick, creative exercise unrelated to the problem at hand that could involve any number of idea-generating methodologies such as stream-of-consciousness, the imposition of perhaps unusual and limiting rules, and a disregard for the quality of outcomes. The purpose is to effectively expand participants’ cognitive baseline and allow for a greater degree of lateral thinking.
- Examples:
- Origami
- Collage of a non-traditional submarine
- Painting on a small 3x3 canvas
- Contour line drawing of an unusual object
- A dozen thumbnail sketches of castles from extreme perspectives
- Word association games
- Examples:
- Moodboards — In Figma — These help to homogenize and consolidate ideas and design direction as elements are amassed from which inspiration has been taken. The process itself involves the following steps:
- Review
- Role Assignment
- Who is handling what?
- Collection of resources
- Elements consist of:
- Image direction
- Cultural influence
- Font direction
- Color direction
- Sound or music direction
- Pattern and Texture Direction
- Illustration style
- Posting resources within the assigned Moodboard Figma file
- Group review of collected resources
- Honing down to a specific set that embodies the desired design direction
- Final collection based on group feedback
- Retrospective
- Storyboarding — Possibly in Figma as well. - Outlining the user journey from start to finish within a storyboard. This will help illuminate interactive features, interactions, animations and features. This should be influenced by previous steps identified.
- Review (Discovery)
- Role Assignment
- Who is handling what?
- Framework —
- website, app, exhibit, interactive etc
- Sketching/Whiteboarding
- Identifying narrative
- Determining necessary length
- Establishing scene cadence
- Codifying - Placing storyboard in necessary context as identified above
- Retrospective
2.2 Phase 3 UX & Wireframing
- Review (Discovery)
- Role Assignment
- Who is handling what?
- Sketching/Whiteboarding
- Majority of layouts and content blocks identified and planned
- Analog elements arranged, organized and placed in the desired structure
- Group review of wireframes to identify content gaps
- Digital Wireframing - In Figma
- Create gray box layouts
- Use generic fonts (but attempting to approximate typographic scale is fine)
- Assess and approximate any necessary icons
- Create UI structure and content blocks
- Accessibility considerations
- Multiple templates (up to 10) created using content blocks
- Some projects may require greater or fewer templates
- Note: Components should be prepended with “WF /” to delineate wireframe components in the asset library
- Retrospective
2.3 PHASE 4 — Final Design
- Final Design -
- Review (Discovery)
- Role Assignment
- Who is handling what?
- Style selected and curated applied (All based on the wireframe structure)
- Spacing, color application, textures, kerning and line height, image addition
- Accessibility review
- Team review of Final Design
- Iteration of Final Design based on team feedback
- Team review round 2
- Final Iteration of Design
- Identify and List Components for each Page/Section for Development
- Retrospective
- Motion Design (when applicable) -
- Review
- Role Assignment
- Who is handling what?
- Creation of motion design comps in After Effects
- Delivered to devs along with as much documentation about timing as possible
- Retrospective
- Style Guide -
- Review (Discovery)
- Role Assignment
- Who is handling what?
- Providing L2D, the client and third parties design guidelines in the event that future additions need to be implemented
- Create components in Figma (prepended SG-...)
- Work to integrate components into Final Design comps
- Retrospective
2.6 PHASE 5 — Implementation
- Webflow Integration -
- Review - Final Design
- Plan initial structure for Webflow implementation
- Establish Project within Webflow
- Webflow Structure
- Styleguide
- Fonts, colors, elements
- Sitemap
- Build pages
- Develop Interactions
- Add meta content
- Review with Team
- Send to client for review
- Styleguide
- Interactions
- Animations, hover states, etc.
- Launch beta
- Webflow Revisions/Collaboration
- Integrate Complex elements
- Make feedback based adjustments
- Refine Interactions
- Review with Team
- Send to client for review
- 3.4 Export code (if required)
- Launch Phase 1
- Retrospective
- Quality Assurance
- First Pass -
- Review (Discovery)
- Role Assignment
- Who is handling what?
- Review linked page broken down by element
- Accessibility review
- Provide feedback for each block or element for dev in a Teamwork task for that element
- Review using Browserstack for:
- OSX
- Firefox
- Safari
- Chrome
- Windows
- Firefox
- Edge
- Chrome
- OSX
- Review using Browserstack for:
- First Pass -
2.6 PHASE 6 - Website Promotion
- Promotional Material -
- Review (Discovery)
- In figma, establish board for Promotional
- Develop Design templates for necessary materials:
- Social
- Brand
- Execute needed designs
- Review with Design team
