Talk to people about the work, get context. Remember, your team will help you build the vision – you just need to ask lots of question, listen carefully, ask more questions, and imagine what they are seeing.
- talk with internal stakeholders (EM and PM, research with other relevant parties who have helpful context such as DX, Support, Docs, Sales, etc)
- look for past docs or prior project art that may have helpful context (Quip, mostly)
- data diving: Google Analytics, Full Story, Chartio, Tableau, etc
- talk with external stakeholders (enterprise customers, developer audience)
- identify the story that is emerging, and illustrate it (use words, diagrams, sketches, clipart - whatever is helpful to paint the picture!)
The design brief is a working document that provides a place for setting context, discussing key project details, and tracking ongoing project work.
You can create your own, or start from a template if you team has one.
If you want to create your own, here’s a [non-comprehensive] list of topics to include
- summarize context and explain the problem/opportunity
- imagine and propose a solution
- clearly state goals
- describe the Jobs To Be Done
- frame as a product narrative (a story that helps tell in simple terms what users will be able to do)
- when applicable, including a UX flow diagram to clarify the user workflow
- identify outstanding questions
- show design explorations
- include notes from key conversations along the way
- summarize project results and record ideas and feedback for future work
- work with Triad Team (PM and EM) to determine scope and sequencing of initial launch phase of work
- open Jira tickets for design tasks
In the lo-fi exploration phase the point is to generate rough artifacts that help visualize the general concept of what will be built without getting lost in the chrome (i.e. the design details like typography, colors, spacing, and other visual treatments) so that key decisions can be made about things like scope, architecture, layout, etc.
- start key design discussions with low-fidelity design explorations (sketches, wireframes, paper frames – whatever you are comfortable with that helps you generate ideas for consideration and discussion as efficiently and effectively as possible)
- settle design decisions for key aspects of implementation with triad leads before moving onto high-fidelity design comps
- share with design team for visibility and feedback
These designs will be used for final review and discussion with your team, and eventually for hand off for engineering to build. This is the stage for all visual details to be thoroughly explored, considered, and polished as much as is reasonably possible for the scope of the project.
- create explorations for layout and components for all states agreed on in the current scope
- consider blankslate states
- design for feature intro or feature tour
- consider accessibility
- resign for docs (screenshot mocks or diagrams)
- review final comps with Triad Team for alignment on scope and implementation for hand off
- asset prep
- migrate finalized design comps to a new page in Figma for handoff to engineering clearly labeled "✅ READY FOR DEV"
- create frames for groups of mocks in a set telling a story
- include a title slide for the frame to help define the story
- use labels and annotations where applicable to help clarify interaction or flow intentions
- take time to demo the new changes with the team, and include space to ask/answer/discuss questions about implementation
- participate with PM in opening Jira tickets for outstanding items as applicable
- throughout the implementation process, respond to questions from the team in Slack, Quip, Figma, and GitHub PRs
- open PRs for design details when helpful or necessary
- perform design QA, re-review design feedback received so far to spot anything that might have been missed
- work with PM to prep for launch...share prototype with users for feedback (internal and external if possible)
- coordinate with docs for docs article
- coordinate with DX for blog post
- coordinate with marketing for product narrative and market positioning
- make a demo video (if applicable)
- retro with team to identify what went well, what was challenging, and what could be done differently next time
- listen to post-ship feedback from Support/Zendesk, Feedback form, Twitter/Hacker News/Reddit/etc for meaningful signal
- identify obvious areas for future iterations and document in design brief (and as Jira tickets if applicable)
- cleanup your project’s Figma file
- convert all elements to components and variants
- copy components and variants to SpaceKit figma into a new "Projects / [project name]" page
- update the design brief with final designs
- celebrate and acknowledge your team for their awesome partnership in bringing the work to life! 🎉