MaqueApp

In case you hadn’t heard, Maque was selected as a finalist for an Adobe MAX 2011 award in the Disruptive Design category. We didn’t win, but were honored to be a finalist among a selection of apps submitted around the world.

Scope of the project

The partners at DevelopmentArc contracted LiFT studios to bring the concept for a developer productivity tool to life. LiFT was tasked with both developing the brand and designing an easy-to-use visual system for managing otherwise complicated technical programming language information. We worked directly with the DevArc team to develop user stories, flesh out functional requirements, create an information architecture framework, wireframe the solution, test the interaction design, and direct and produce all visual design for the finished product.

When we began to formulate the UX for Maque, our goal was to stretch the usability patterns most people think of when working with a developer tool. What Maque solves are very complex barriers developers run into on a daily basis. With a creative UI, our goal was to make solving these obstacles fun and enjoyable.

What is Maque?

To put it simply, Maque gives you a framework to test against while you build your own application or website. By allowing you to rapidly create a temporary, scalable data solution you can stay focused on your development goals rather than having to worry about where your data is coming from.

Here’s a quick example:
Every website or application needs realistic data to test against as you build it. You can point Maque at any API that you need to get data from (e.g. Twitter) to capture and save a realistic dataset to test against. Once captured and saved you can point your app/website at Maque and use it as your real-time service layer for delivering data to your app/website as you’re building it. You can therefore test your app without the risk of a public API going down or being ‘throttled’, potentially killing your available data stream to test against. You can use Maque to randomize, repeat, and scale the data that you received from the API so you can take 15 results and easily turn it into 1,000 results for your team to test with as a real-time service layer. If you don’t have an API available you can create your own data template and serve that to your application as well. The sky is the limit and it’s app agnostic whether you’re building a website, mobile/desktop/web app, touchscreen, intranet, etc.

Brand before visual design

All apps need a brand and Maque deserved a great one to provide a tone and color pallete for the visual design. The initial concept was based around the original name for the project, Maquette, which is a common object built by architects to prototype the physical structure of the building they are designing on paper.

The Maque logo

The logo is highly influenced by the architectural context of the term and was kept even when the name had to be changed to Maque. The concept was the same, only the name changed due to legal implications with another existing product. The big test for the logo was whether or not nerds would wear it on a T-shirt. The opinion was a resounding yes and the shirts came out great!

Aaron, James & Chris at AdobeMAX in front of the Disruptive Design Award kiosk

Complex but not complicated User Experience

This use case was a UX dream challenge. We had to take a complicated concept and proposed architecture and design a pleasing and streamlined User Experience. Aaron and James were willing to step outside the box a bit and embrace some different design patterns that we thought would be necessary in order to streamline the concept for the app which allowed us to re-imagine the navigation model and content creation for the app. We provided several iterations of wireframes before picking any given direction and had Aaron & James help us conceptually test the app use cases via paper prototyping and Skype. They were critical in making sure we were not looking past their vision while at the same time allowing us to innovate on the vision. This was a perfect project for LiFT because our client was highly engaged and keen to collaborate.

Here’s Information Architecture (IA) documents we produced in the process:

How users flow through the applicationWireframe of editing a Data Service Wireframe of the dashboard

After picking a scalable solution for their goals for the app dashboard we moved into the actual navigating of a project. Here we decided that we needed a familiar file navigation design pattern but wanted to make use of the columns for much more than simple navigation. We turned empty space into a editable, inline workspace that scaled with the interface.