WYSIWYG Page Editor

Transforming a basic form page into a WYSIWYG editor page


This is a page that welcomes candidates to their interview. Interview creators complained of a disconnect between the creation page and the page that the candidate saw.


  1. Rearranging page layout to match candidate page
  2. Converting form fields to live preview areas
  3. Adding edit-in-place functionality


When I’m working on the final draft of a wireframe, I like to add detail. Because it’s so much quicker to figure out the UI with a pencil and eraser than in a prototyping tool. And then the prototyping is so much quicker and easier.

Low Fidelity Prototype

I nearly always start with a low fidelity greyscale prototype while working on interactions and getting feedback from stakeholders.

  1. Working in hi fidelity wastes a lot of unnecessary time
  2. You get more honest feedback on interactions
  3. You are less precious about scrapping ideas and redoing

Unfortunately, I didn’t always remember to take a screengrab before converting to hi fidelity full colour, but I have this one at least.

Finished Product

Finished Product - Video demo