A UX designer has a lot of prototype tools available, depending on the need. I’ve used a lot of them! Invision is great for mobile prototypes where entire screens change. Sketch is handy to create a quick prototype for testing, especially if you’ve been designing the project there.
Sometimes custom approaches are needed. Once we were preparing to do user testing in clinical laboratories in China, where hospital policy often forbids Internet connections. I had to come up with a solution that would work locally in a browser on a Windows laptop, so Sketch was not an option.
Another time at FastPay we had to come up with a prototype for a partnership proposal with a company in the payments processing business for the entertainment industry. The prototype had to look like real software, and it had to be ready for a meeting within a week.
The requirements? They looked like this:
This is what job descriptions often call “being comfortable with ambiguity.”
Due to the sophisticated need of the prototype, with animations and hiding/showing sections of a screen, I decided to code it by hand in HTML and CSS over a few days.
Check out the final prototype. Note that this prototype was made for an enterprise desktop solution, so it’s not responsive for mobile.
Happy path to explore prototype
- Credential not required for prototype; just click log-in button.
- Click on the blue FAB at the bottom to provision a payment card.
- Select the $25,0000 limit card.
- No, select a custom limit instead.
- Click the add button.
- Close the modal.
- Select Cards from the left navigation.
- Select cardholder Pete Campbell.
- Change card limit.
- Approve change.
- Click on République to see transaction details.
- Close Pete Campbell transactions panel.
- Select Reports from the left navigation.
- Select Settings from the left navigation.
- Return to Console from the left navigation.
Image: Unsplash, Florian Olivo