Share
Explore

SADA Spec Documentation Hand-Off

Lydia Chamberlain & Kelly Su 2022

This document will be provided to SNHU so that they may understand SADA’s typical design hand-off process, and make adjustments where needed. This is NOT for design systems, as SNHU already has a system in place.

Workflow Diagram
A High-level workflow of the general process of getting implementation going.

SNHU - SADA Design Flow.png

Feature Documentation & User Stories
At SADA, we typically like to have all features in one sheet document. Given the nature and scope of SNHU’s Turbine product, this may be split into several tabs or several sheets. The feature documentation should be as explicit and detailed as possible for a developers eyes, so that it can be translated into a working ticket. User stories will typically be mapped to each feature, which can also be grouped by epic. However, at the end of the day developers will typically treat Jira as the source of truth.

The columns of a feature list is typically as follows for a baseline:
Example Feature Documentation
0
Search
Epic
Feature
Details
User stories
Acceptance Criteria
Phase
Priority
Design Required
1
There are no rows in this table

After this point, we import all of our features into Jira. Sometimes, some reorganization occurs so that there isn’t overlap between features - some may need to be grouped together in to tasks and subtasks.


Specification Workflows
For specific hand off documents, there are two ways to go about this. SADA has multiple methods due to our nature in consulting. These are centered around feature specs, as the component level specs are already being worked on in SNHU’s design library files. Both methods can be utilized, or one or the other depending on SNHU’s workflow and future developer needs.


Method 1: Figma Spec Documents
Within the main design figma files (not the design systems) spec documentation can be made here to keep everything in context. This allows designers to pull from components, without needed to export the frames elsewhere.

Note: These kinds of designs can also live in places like Zeroheight or the Jira ticket themselves - it just depends where you want developer eyes focused and how you want to document your work long term. If you prefer to include animated gifs/videos to speak to movement, the same would apply.

pages.PNG

In your figma file, you can create a “Specs” page where such documents are kept.

Example 1
spec1.png


Example 2
spec2.png


Method 2: Figjam Spec Workflows
Within your typical folder for a product, create a separate figjam that matches back to user stories. These are a combination of user flows and addressing specific functionality. This can be done at the lo-fi wireframe level, or without wireframes at all. Since Figjam doesn’t handle pages at this time, generally 1 full document can speak to a similar grouping of user flows, so it doesn’t get too bloated.

Example

Final Note
This is fairly high level since development is far in the future - so please let me know what aspects of this process you might want me to drill into, or if something won’t work for your team! We are happy to compromise.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.