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 app
What 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 Appmaker
For 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.
