Prototyping

Setup

Duration: 30 mins

Make quick decisions early. Get everything you need to design the prototype ready and accessible in Figma or Sketch.

Arrange the Storyboards from the Miro in Sketch/Figma

• Screenshot all the storyboard screens and paste the images into your design workspace.

• If there is a gap, such as a 'wallet action' or a duplicate of a screen with slightly different content, make sure this is included.

Set the visual direction of the first and key prototype screen

Duration: 2–4 hours (depending on the complexity)

Choose which screen is the most important. This is usually not the first screen. Based on the Visual Direction determined in the Hypersprint/Review Workshop Session 1, select your typography and colours. These can be changed as needed as things develop and will increase the speed at which you're able to work. Choose your grids and layouts as well.

Steps

1. Visual Key 1: Visual Design research - from Miro, previous projects, known projects, private reference library, dribble, google etc.

2. Visual Key 2: Explore different visual directions on a chosen section of the landing page (just a small part, not all of it).

3. Visual Key 3: Define 2 visual directions to high fidelity, apply to the previously selected section.

4. Visual Key Review: Have a quick review workshop with the client showing the two directions let them vote on what they like of each concept, after that, walk them through the "hot areas" and ask why this was voted for – take notes onto the board in post-its.

5. Create foundational styles (colors, fonts, grid) and components (buttons, nav, fields etc.) to speed up ongoing work.

If the first key screen: See from the start of the prototype walkthrough up to "The Rest Of The Prototype". If a secondary key screen, see from "The Rest Of The Prototype" but reference the information above the section for technique.

More specifics can be found here:

pageKey Screen

Create all secondary screens based on the existing design

Design unique/secondary screens based on the existing style of the project.

• Copy an existing screen from the project.

• Place it next to a new artboard for the new screen.

• Have the Miro board screen ready for reference.

• Create the new screen by: reusing existing elements (e.g. buttons, headers, inputs, etc. as they are in the previous screen).

• Create new elements by following the same visual style and direction (these needs your own ability and requires a high level of visual design skill).

pageSecondary Screens

Fill in details on the prototype

Fill in details of a component in the prototype. When the component already exists but needs to be replicated for a different area of the prototype, you simply copy it and fill in the details. It can then be used by the Expert in other places of the prototype.

Stitching

If using Sketch, copy your design to Figma for speedier access to the team in case of any mistakes or edits. Sharing a prototype is much easier from Figma.

Select the components and buttons that are clickable to direct the prototype flow and stitch them into a clickable prototype.

Make sure to record a video for the user researcher to understand the flow of the prototoype.

pageStitching Prototype

Create the first high fidelity, intuitive interface for the application (web or native). Make sure that the user is able to complete the task they want to do and that the information we want the user to consume is easily accessible and the core USP is communicated. Some elements to take into consideration during prototyping:

• Test text colours for accessibility.

• Create aesthetic user interfaces that meet the needs of the client and the customer

• Design all screens to high fidelity.

• Help on the board during workshops and you're familiar with the cadence of the sprint and know when to hurry things up or slow things down.

• Example: https://www.figma.com/file/g6qSr5qgHnoA7MAlmkE5AG/Tableland-HyperSprint-(Balint)?node-id=6738%3A1193

Landingpage example after a Visual Identity Sprint for desktop and mobile

Steps

Steps

1. Set up Figma, adding Miro storyboard screenshots.

2. Review workshops, screenshot relevant info / print or bring into Figma.

3. Place all the copy into Figma creating a low fidelity mock-up for key screen (monochromatic, placeholder font). Prettier wireframe, basically.

4. Apply final visual direction in a high fidelity, apply it to the rest of the Landing page.

5. Build interactive prototype and make sure everything works (Optional, if interactive elements like fields, buttons, links etc.)

6. Review internally, request feedback and refine design, iterate, fix mistakes, highlight any problem areas if there are any.

7. Send prototype link to user researcher with prototype walkthrough explaining the most important details.

8. Discuss quick fixes from the User Research and implement changes.

9. Present prototype to client team (do not call out quick fixes): 5 Min Max.

Visual Polish

The visual polish focuses on taking results and learnings from the initial prototype and applying them to improve the user experience and increase visual fidelity.

Illustrations

Work with the illustrator to include the illustrations.

In the final version, you need to make sure there are mobile and desktop versions of the illustrations. If the illustration style is an infographic, it's your responsibility to convert the screens.