LogoLogo
WebsiteGovernance PortalDiscord CommunityFinance Dashboard
  • Welcome To Deep Work
  • Working at Deep Work
    • Get Involved
      • How we work
      • Why Deep Work?
      • Discover Work
        • Refer Clients
        • Create a new role
        • Create a new project
        • Getting Paid
          • Rates
            • Client non-payment
          • Profit Bonus Scheme
            • Profit Bonus Whitelist
          • Funding Request & Negotiation
        • Agreement Documents
          • Contributor Agreement
          • Contractor Agreement
          • Referral Agreement
        • Reduce noise in Discord
      • Work Etiquette
    • Work on Projects
      • Contributing to Deep Work's vision
    • Governance
      • Snapshot Proposal
      • Funding Request
      • DEEP Token
        • Distribution
          • Old token details
    • Creating Projects and Payments
      • Multisig Addresses
      • Deep Work Studio (Design) Payments
      • Archived Layer2 Payment System
        • Archive of Getting Paid
          • Request forms
            • Other Payment Links
          • Snapshot Proposal
          • Rates
            • Client non-payment
              • Projects starting on and before 20th July
        • Archive of Representative Monthly Finances
        • Archive of Executing Payments
        • Archive of Team payments
  • teams / departments
    • Operations
      • Projects
        • Monthly Operations
        • Representatives Council
      • Roles
        • Systems Engineer
          • Workflow
            • ERD
        • Organizational Designer
          • Workflow
        • Representative
          • Workflow
          • Representative Monthly Finances
          • Treasury Payments
          • Executing Payments
          • Expensing Gas Fees
        • Operations Director
          • Workflow
          • Solution Architecture Sprint
        • Database Upgrade
          • Workflow
        • Solutions Architect
          • Workflow
          • New Creative Director
          • New Department or Change of Representative
          • Depreciating a Department
          • Removing a Creative Director or Representative
          • Editing or Creating Product Creator Fees
        • Documentation Writer
          • Workflow
          • Interview Guide
        • Financial Controller
          • Workflow
          • SaaS Repayment
          • Profit Share
            • Deep Work Studio Limited
          • Reinvest
          • Archive
        • Finance Architect
          • Workflow
        • Software Maintenance
          • Workflow
        • Newsletter Writer
    • Deep Work Studio
      • Projects
        • Prototype Sprint
        • Implementation Ready Sprint
        • Brand & Visual Identity
        • User Testing Session
        • Consultancy
      • Roles
        • Client Consulting
          • Consultancy
            • Consultancy Week Calls
        • Project Onboarding
          • Workflow
            • Proposal and Quote
            • Invoice & Statement of Work
            • Team Setup
        • Creative Director PM
          • Workflow
            • Project Setup
            • During the Project
            • Project Changes
            • Retrospective Workshop
            • Project Completion
          • Post a job offer
        • Workshop Facilitator
          • Workflow
            • Project Scoping
            • Branding Sprints
            • Design Sprint Workshops
            • Website Sprint Workshops
            • Iteration Workshop
            • Final Presentation
          • General Guidelines
        • Product Designer
          • Workflow
            • Design Sprint
              • Creating a compelling concept
            • Prototyping
              • Key Screen
              • Secondary Screens
              • Stitching Prototype
        • Website Designer
          • Workflow
            • Website Design Sprint
              • Creating a compelling concept
            • Prototyping
              • Key Screen
              • Secondary Screens
              • Stitching Prototype
        • Visual Identity Designer
          • Workflow
        • Illustration Designer
          • Workflow
        • Logo Designer
          • Workflow
        • User Researcher
          • Workflow
            • Shadowing
            • Interviews
            • Questions and Formalities
            • Summary Report
            • Long Term Goal
            • Sprint Questions
            • Feedback
            • Quick Fixes
            • Recommendations
            • Presentation
        • Tester Recruiter
          • Workflow
            • Old Workflow (v1)
        • Copywriter
          • Workflow
        • Webflow Builder
          • Workflow
    • Deep Experiences
    • R&D
      • Projects
        • System Update
    • DAO Consultancy
      • Projects
        • Project Kick-Off
          • Kick-Off Workshop
          • Retrospective
        • Audiences, Values, Mission Workshop
          • Audiences, Values, Mission Workshop
      • Functions
        • Outreach Coordinator
          • Workflow
        • Project Manager
          • Workflow
          • Proposal Design Workshop
          • Custom workshop sessions
          • Invoice & Statement of Work
        • Workshop Facilitator
          • Workflow
          • Facilitation Guidelines
        • Documentation Writer
          • Workflow
          • Workflow Interview Guide
      • Archive
        • Deep Work Steward
          • Workflow
          • Emergent Organization workshop
    • Software
      • Projects
        • Monthly Sprint
      • Roles
        • Product Owner
        • Frontend Engineering
          • Workflow
        • Backend Engineering
          • Workflow
        • Software Product Design
          • Workflow
    • Awareness
      • Projects
        • Research Article
      • Functions
        • Public Speaker
          • Workflow
        • Video Editor
          • Workflow
        • Interviewer
          • Workflow
        • Content Creator
          • Workflow
        • Social Media Agent
          • Workflow
        • Podcast Host
          • Workflow
        • Content Researcher
          • Workflow
        • Author
          • Workflow
        • Editor
          • Workflow
  • Software & Tools
    • Deep Teams
    • Deep Skills
    • Cybernotes
  • Resources
    • Prototyping Principles
    • How to Learn Fast
    • Give and Receive Feedback
Powered by GitBook
On this page
  • Setup
  • Set the visual direction of the first and key prototype screen
  • Create all secondary screens based on the existing design
  • Fill in details on the prototype
  • Stitching
  • Visual Polish

Was this helpful?

  1. teams / departments
  2. Deep Work Studio
  3. Roles
  4. Product Designer
  5. Workflow

Prototyping

PreviousCreating a compelling conceptNextKey Screen

Last updated 2 years ago

Was this helpful?

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.

More specifics can be found here:

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).

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.

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.

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.

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 "" but reference the information above the section for technique.

The Rest Of The Prototype
Key Screen
Secondary Screens
Stitching Prototype