mm:ss
Owner′s Address
Instruction Text
[Owner′s] Address

Sample Lightbox



Show something hidden Hide something shown
Lorem ipsum dolor sit amet...

Instruction Text
Support Text

Container Title

Tab 1 Content
Tab 2 Content

Foods

Eating Healthy
Fruits Fruits
Vegetables Vegetables
INSERT COL NAME
INSERT CONTENT
INSERT CONTENT
INSERT CONTENT
INSERT CONTENT
INSERT CONTENT
INSERT CONTENT

UEF Super Speed Shortcuts

Genesys provides support for rapidly describing and building your prototypes with Emmet and UEF Super Speed Shortcuts.

You can quickly add things like:

  • 5 UEF Container Rows by typing uef-cr*5

Responsive Tables
INSERT COL NAME
INSERT CONTENT
INSERT CONTENT

Data Persistence

You can easily pass user entered data from page to page.

Once you have entered a name, reload the page and watch the name persist. Use the Clear button on the Genesys toolbar to clear all values.

Conditional Logic

You can use conditional logic to show/hide items and alter the user flow through an application.
Do you live in the United States?

Sorry, this application only supports U.S. citizens.

User Roles & States

Show how different user roles and states would affect the interface.

Genesys supports dynamic display of different user interfaces (from within the same prototype page), based on the user role and/or state selected (e.g., admin, approver, logged in, etc.).

To try this, select one of the user role ("Page States") links in the top right of the page and watch the text below. (The Genesys Toolbar needs to be active.)

Welcome. Please Log In.

Thanks for logging in.

Hello, Admin user.

You are a Power User.

Multi-Lingual Support

Easily add multiple languages within the same prototype.

A/B Testing

Easily add simple A/B testing on page content, components, or entire page designs. Try reloading this page— you'll notice different UI components appear below.
Date

Annotations & Walkthroughs

Provide annotations and walkthroughs of your prototypes.

Redacted Input

Genesys supports blurring, redacting, or clearing user input with invisible ink. Especially useful when your prototypes use fake data. In all cases the text is still there, but won't show up onscreen, when printed or when generating screenshots. Select the field and then press CTRL+A to see the underlying data.

Table Example:

Quick Positioning & Alignment

Align Left

Align Center

Align Right

Master Page Components

Genesys allows you to define UI components once and reuse them on multiple pages as Master Page Components.

Note: This functionality does require you to publish your files to a web server.

Low-Fidelity Prototyping

Use the built-in Paper CSS low-fidelity prototyping system to quickly create design mockups.
Change to Paper

Site Maps

Quickly create Site Maps for your prototypes. You can use these to quickly navigate to any page in your prototypes.

Charting & Diagramming

graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D
sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great!

Animation Support

Interactions with Natural Language

Genesys contains built-in support for specifying interactions using natural language. No JavaScript required.

Want to attend our design meetup?

Thanks! You are now added to the next meeting.

clicking on "#rsvp" removes class "hide" on "#rsvp-form" clicking on "#confirm" adds class "hide" on "#rsvp-form" clicking on "#confirm" removes class "hide" on "#rsvp-confirm" clicking on "#confirm" adds class "hide" on "#rsvp"

The interaction above was specified with:

clicking on "#rsvp" removes class "hide" on "#rsvp-form"
clicking on "#confirm" adds class "hide" on "#rsvp-form"
clicking on "#confirm" removes class "hide" on "#rsvp-confirm"
clicking on "#confirm" adds class "hide" on "#rsvp"

Presentations & Slideshows

Genesys contains built-in support for creating web-based presentations and slideshows, using the following libraries:

These presentations can be separate from the prototype or embedded directly within the prototype.

Measure Perceived Usability

Genesys includes support for adding three types of self-reported quantitative data to your prototypes:

  • Single Ease Question (SEQ)
  • System Usability Scale (SUS)
  • Task Load Index (TLX)

UX Analytics

Genesys contains built-in support for collecting UX-specific analytics, through the Google Analytics service and the AutoTrack plugin, including capturing and analysis of the following insights:

  • User behavior (Behavior and Event Flows, such as filling out fields, clicking things, etc.)
  • Determination of which features your users are grinding on
  • Location of points in test scenarios where failures occur (Goal Flow)
  • Levels of engagement
  • Assessment of design changes or alternative (A/B) designs