Makr Content Admin Tool

A prototype and framework for managing Makr content

Makr Content Admin Tool
Role
  • UX Design
  • HTML Prototyping
For
  • Makr

A major component of the Makr experience is the wealth of Makr-created content that is available to the user, including templates, icons, fonts, patterns, and colors. This content is created by our designers and it is important that they can add new content easily and quickly. We also have a responsibility to provide customer support for our users, ensuring that they they have the best experience possible from pre-purchase to post-purchase.

In order to accomplish these tasks we needed to develop a versatile tool that a Makr team member could use to view user content (in order to provide customer support) and to manage builder content. I was tasked with creating the user experience for this tool, with the goal of it being fast, easy, and approachable for any member of the team to use it. This included designers, customer support specialists, and product managers. The tool also needed to be efficient and reliable, so that it can be used as a single source of data for our non-developer team members who can’t readily access the actual database.

Design to Development Process

Prototype

I created a HTML prototype as well as wireframes which provided our engineering team with a concept for the tool

Framework

From the prototype, our engineering team identified an open source admin framework, ng-admin to build upon for the tool

Continuous Improvement​

We continued to use and update the ng-admin based tool to add new features as the Makr product developed further.

Wireframes

The wireframes were used to illustrate the hierarchy of information and the placement of actions in the user interface. As we investigated ng-admin further, these wireframes were adjusted to adapt to the conventions of the framework. In later updates to the Makr product where an update to the tool was needed, I updated these wireframes accordingly.

Makr Content Admin Tool Wireframe
Makr Content Admin Tool Wireframe
Makr Content Admin Tool Wireframe
Makr Content Admin Tool Wireframe

HTML Prototype

In order to demonstrate to our engineering team the user experience and functionality that is needed, I created an interactive HTML prototype. I adapted an open source Bootstrap Admin Dashboard template with the knowledge that our website UI is built using the Bootstrap CSS framework. The prototype included filtering, sorting, and editing the details of items.

Makr Content Admin Tool Prototype
Makr Content Admin Tool Prototype
Makr Content Admin Tool Prototype
Makr Content Admin Tool Prototype

Final Content Admin Tool

The final Content Admin Tool was built using ng-admin

Makr Content Admin Tool