During this phase, the designers will build high fidelity mockups based on concepts from the diverge phase. For the hi-fi mockups, the designers need to iron out the layout, styles and interactions. Even though fake data is used in the mockups, the designer should still insert some realistic data for better storytelling.
-
Concepts from the converge phase: The team should look at individual concepts created in the converge phase and think of how they can work together in a dashboard.
-
Artifacts created in other phases like user stories, storyboarding etc can be also used as inputs.
- High fidelity mockups of the application.
Building a wireframe before producing the high fidelity mockups could be very beneficial. A wireframe allows the team to quickly explore different layouts and establish the workflow without worrying about the styling details.
Sketch is the primary tool the team uses to create high fidelity mockups. Here are some useful resources for the team: Axis Design Resources
InVision really great for being able to take mockups from Photoshop or Sketch and allow for users to click through different states or pages.
Example of a prototype on InVision: Prototype: Conflicts in Democratic Republic of Congo
When mocking up a Qlik Sense app, it is sometimes easier build sheets directly in Qlik Sense, especially when there's sample data provided. The team can also explore extension objects on Qlik Branch
A good alternative to raw HTML & CSS is to use Hype with which you can quickly record and generate interactive animations to show how users will interact with dashboards. Here's a quick overview of prototyping using Hype for prototyping. The Design Sales and Marketing website was built with Hype.
HTML & CSS prototypes tend to be the most time consuming but are best for heavier web interactions like filling out forms.
Paper prototyping is as low-fi as you can get for a prototype. It is especially useful when you are under a time crunch to produce a prototype. It also allows for the whole team to contribute. Because the prototype is sketches on paper you are relying much more on the imagination of the participant. It gives you the ability to prototype on the fly, even during the session with the participant.
Interesting debate about paper prototyping:
- Paper Prototyping Is A Waste Of Time
- If You Think Paper Prototyping Is A Waste Of Time, You're Doing It Wrong
One of the 2 methods - Hi-fi mockup in Sketch, Mockup in Qlik Sense - should be required depending on the platform.
- Wireframe
- Hi-fi mockup in Sketch
- InVision prototype (Required)
- Mockup in Qlik Sense
- Tumult Hype prototype