Slackpass is an online tool that allows users to create custom signup pages for their paid or free Slack groups. My task was to design intuitive workflows for users to set up and manage accounts. Technical constrains required us to integrate with 3rd party websites and redirect the user to multiple pages across the web, making an intuitive and seamless workflow particularly tricky.
Early whiteboard sketches:
Often a loose workflow sketch on the whiteboard is the best way to clarify what needs to happen and when.
Low Fidelity Wireframes:
Early in the process, black-white-blue wireframes help us try out different design solutions before getting caught up in more granular visual details like color, typography, and aesthetic graphic treatments.
Finalized color wireframes:
The final deliverables included fully visually-designed wireframes showing multiple user flows with multiple use cases. Here is one example of a short user flow:
Pages must change and flow to fit the wide variety of screens used today. Below is an example of how I design one page at multiple sizes to illustrate a system of responsive behavioral rules.
These screens show the ways users can analyze the performance of their pages.