Build a Unified Tool Prototype (Phase II)

[thisandagain]

Design and create the first prototypes of a unified creation experience. Goal is to experiment with ideas on a simple tool that radically lowers the bar of creating content as per mobile experience and allows for large variability / "tinker-ability" in output.

Audience

• Users of Firefox that are driven to Webmaker.org
• Users of Firefox OS that are driven to Webmaker.org

  Success

We have two compelling prototypes to evaluate before moving into the design & build phase in earnest and a clear vision on how to phase the build.

Vision

https://github.com/MozillaFoundation/plan/issues/64

Deliverables

• Two realized prototypes (InVision, Proto.io, Flint.io, etc.) for consideration to move to the next phase
• Recommendations on what would constitute an MVP of the prototype ("What do we build first?")

  RACI

• Phase: Design / Build / Ship
• Owner: @secretrobotron
• Decision Maker: @thisandagain
• Design Lead: @flukeout
• Development Lead: @simonwex
• Quality Verifier: @cassiemc

[iamjessklein]

Will this be building off of the prototypes that @cassiemc and @flukeout are currently developing?

[thisandagain]

Yup!

[cassiemc]

Edit: assigning @flukeout for design. Can't give you two designers as requested due to the other P1 requirements this heartbeat, but I'll try to step in where I can to help out.

[thisandagain]

Great. Thanks @cassiemc

[cassiemc]

I just wanted to give a quick update on where I left off with my direction started in #64. I did some additional thinking last week about content types, looking at how layering concepts (around the digestible, narrative number 'three') could be used to build out interesting artifacts, but I really wasn't finding it fruitful. Some of that work can be seen here:

It's really a stretch, though, and @flukeout's worry that the hyper-specific UI wouldn't result in interesting content is, I think, valid.

I think it could still be worthwhile though to explore some of the feedback directions from my v1 (https://redpen.io/gob3bd5e69c3bfa6d1). Specifically:

• 3 layers with slightly different UI: content / presentation / actions: filter (or 'process')
• social building: "don't like to share stuff until it's done" -- turn saving action into collaboration / versioning -- microblogging; saving (archiving) your process; leveraging the interaction of "saving" as a way to promote micro-conversations/

We can discuss if this is worthwhile to pursue alongside Luke's prototype or if we want to just narrow the scope and iterate on the canvas idea.

[secretrobotron]

Notes from kickoff meeting:

Luke's Design

https://dl.dropboxusercontent.com/u/109902/webmaker-prototype.pdf

What's working?

• Tiles
  • interconnecting
  • zooming in and out
• Dummy elements on new tiles
• Tile map
  • CRUD
• Themes in element editor (maybe not necessary for prototype)
• Text + image

What's not?

• Editor
  • Information density is high
  • Side panel (try pop-over menus)
  • "Drag to add" not clear
  • Tile view (really cool; easy for MUD and game designers, maybe not others. curious about it.)
• Code editor
  • Set the ceiling really high for creativity
  • What are we trying to achieve here? Flexibility / learning / remixability?

What's working but feels non-core to the experience?

• Editor
  • Vote and rating components
  • Patterns, build, layout, and background controls
  • Project name / configuration editors
• Tile view:
  • Zooming
• Themes
• Animation controls

Concepts not to lose:

• Progression over time
• Undo: Remix / revision history
• Share works-in-progress
• Layers could be periods of progress, rather than element layers

[secretrobotron]

Luke's done some really nice work so far on the tile view: http://flukeout.com/examples/desk4/

https://www.youtube.com/watch?v=A4CrNxSvRbs&feature=youtu.be

[davidascher]

fun!

[flukeout]

Here's an update to the prototype... http://flukeout.com/examples/desk7/ Still optimized for Chrome only.

We just have a few issues to iron out before usertesting.com

• [x] Bug where text changes don't stick after transitioning away from a tile and back.
• [x] Border radius rule doesn't display correct value after adding Image element

Redpen for feedback with screens - https://redpen.io/p/bsd2783d7cb838a620

@secretrobotron What screen-cap tool did you use for that video up there?

[secretrobotron]

@flukeout QuickTime player works fine. Just doesn't record sound from on-screen (which isn't a problem for you, I think).

[flukeout]

@secretrobotron I'm not deaf.

[secretrobotron]

:whale: :whale2:

[thisandagain]

@secretrobotron For future reference: https://rogueamoeba.com/freebies/soundflower/

[secretrobotron]

@thisandagain yeah, I did try a bunch to use it, but my results were always mixed. I'd love to see your setup if you have more success than me.

[OpenMatt]

@secretrobotron status? [flagged!]

[flukeout]

Here's a report from the first round of testing: https://docs.google.com/document/d/1X1DdCedqWdXtdBlw3HJf0ioypQQ-Nv4_gurmztTtEx4/edit

Just adding a little summary now, but it's mostly all there.

[secretrobotron]

Thanks @flukeout !

[OpenMatt]

@secretrobotron are we continuing work on this in this Heartbat?

[secretrobotron]

Nope! @flukeout did an awesome job. Continuing work in #79.