Appmaker User Interface - Mockups

This week I've been spending a bunch of time with the Appmaker team at the Mozilla all hands work week.  One thing, that 's really hard for me to do - is to work on products that don't seem to make visual sense to me - and that's kind of what was happening when I looked at the design canvas of Appmaker. Here is what the user interface currently looks like:  What's working?- The building components are super easy to identify and manipulate. - The searchability of components- The ease with which you can sign in or add a new appWhat could use some work? - The design canvas itself was bit confining. I felt like I was in a claustrophobic room when I designed- It feels like theres a lot that I have to pay attention to in one glance and I can't figure out where I am supposed to be looking, clicking, thinking at any given moment. - It still feels like a lo-fi prototype - so users can't really see the friggin' awesome potential for this tool.Mockup Attempt One: The Webmaker AppmakerFor the first iteration of mocking up the UI, I took cues from Webmaker. My thinking here is that we could be delivering a consistent, cohesive product family offering. Since designing the UI mockup sometimes inspires me to rethink the tool, I added a few notable features here: 1. Media Library - the ability to use the mobile devices affordances to pull in assets to integrate into the app design 2. History - the ability to save your process, and revert to any moment in your designing Mockup Attempt Two:I took a bit of a different approach here. I thought through how I actually organize my space as a designer, and how that approach could be reflected in the design. When I design, I like to organize my space and shift things around the canvas as I am working on different components. Some fun things to note here: - the phone itself is clickable so that you can change the model (the firefox phone is seen here).- the toggle on the top of the canvas allows you to switch back and forth from different design modes: editor or preview- the floating editor changes depending on what component you are working on. - undo, redo.That's all for now. Just taking the time to think through the designs and will probably user test with the Appmaker team to really figure out what's a good direction.