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.
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.
Final Content Admin Tool
The final Content Admin Tool was built using ng-admin
