Step 4

Detail

Goal:

Figure out the necessary flow and interaction design details to enable engineers to start building the scoped solution.

Output:

High fidelity designs/prototypes shared with engineers to start building.

Activities you should do
  1. Design the flow in high fidelity.
  2. Use our design system. Try reusing, evolving or merging existing patterns before introducing new patterns. When in doubt, talk to the team.
  3. Follow the Fundamentals of Good UI Design.
  4. Use real content, avoid placeholders as much as possible.
  5. Think about the system holistically. Consider how it'll impact the rest of the product and if you need to make any changes elsewhere.
  6. Discuss your proposal with other teams that get impacted by it.
  7. Don't just design the happy path, consider all states and edge cases.
  8. Consider how users will experience your design for the first time.
  9. Consider how it might impact tertiary back-end services and how the feature might interact with them.
Activities you could do
  1. Create interactive prototypes
  2. Prototypes to test the flow your users will go through (using Figma, Invision)
  3. Prototypes to test detailed micro-interactions and transitions (using front-end code, Framer, Principle)
  4. Work with a marketing and stakeholders to write the content
  5. Contribute or give feedback on our design system
  6. Do usability testing on your designs and prototypes with real customers and iterate based on feedback Share your designs with the team for feedback via Slack/Notion/Jira
About

The methods documented in this step-by-step process are a collection of practical, flexible workflows a designer may use to help create a design process for themselves or for their organization. This process is based off of the formal design process used by the awesome folks at Intercom.