Appendix C

UI Mockups

Figure C.1: First draft of where the UI editor would be

Figure C.2: UI should show github branch information and save information at all times in some dead space on the screen (depends on location of toolbar and other UI elements)

Figures C.3 and C.4: Compact toolbar with collapsing dropdown menus in bottom right corner

Figures C.5 and C.6: Compact toolbar with collapsing dropdown menus on the top

Figure C.7: Option to expand toolbar to show all options at bottom

Figure C.8: Option to expand toolbar to show all options at top

Figure C.9: Tutorial popup that does not stop user from executing other actions

FIgure C.10: Tutorial popup that blocks other actions (hides toolbar too)

Figures C.11 and C.12: Contextual editing popup for compact toolbar (open relevant dropdowns automatically)

Figure C.13: Full toolbar

Figure C.14: Expansion of icons