Friday, May 2, 2014

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 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.