Case Study

CraftMaster | CraftMaster App

Enabling User I/O Workflows with Minecraft

How do you help Minecraft users import, export, and share their 3D creations? Build a companion application for users of all ages.

  • Services:
  • Branding & Identity
  • Product Design
  • UX & UI Design
  • Web Development
  • A/V Production
  • 3D Design
  • Tools:
  • Illustrator
  • Photoshop
  • Dreamweaver
  • Logic
  • Motion
  • Final Cut
  • iWork

Reading time: 6 minutes.

Content has been modified or recreated to comply with my non-disclosure agreement and does not necessarily reflect the views of CraftMaster Software.

Understanding the need for a solution

I love all types of computer games from first-person shooters and MMORPGs to strategy simulations. I love exploring the new environments, story lines, characters, and game mechanics. I also love deconstructing the user experience and interface of the game. This reinforces my ability to see patterns and trends for user interaction systems.

When Minecraft came out many of my friends and their kids started playing — I joined in the fun. Exploring the world was great, but creating a home, fortress, village, or a work of art was even more rewarding.

However, Minecraft lacked the ability to import and export these incredible creations. How could we share something we made with a friend, or load a 3D model into Minecraft? How could we show our creations with the rest of the world?

We needed an application to provide 3D model import and export, as well as voxelization, material editing, asset management, and content sharing. From these conversations an engineer, a business developer, and myself, a product designer formed a business and CraftMaster was born.

We then had the difficult task all startups face — to create an identity system, build a web site and social content, all while developing an engaging product for our target users.

This would be an incredible amount of design work, but I'm always ready for a challenge — and to practice my craft.

Mapping out a path forward

Developing a cohesive brand that can easily associate to the idea of “blocks” that is reinforced across products, website, social media, and advertising was my initial task. This required designing a logo, logotype, and associated guidelines, and to produce associated templates for marketing and communication.

We worked together reviewing user and market research and internal business development targets, to align the project goals with the user’s needs, and to develop a plan and schedule to move forward.

After our research, my first task was to create the logo and Masterly, a custom typeface, that would be used in the logo, for titles and headings, and includes web/app icon symbology, to reinforce the CraftMaster brand.

Masterly font

The typeface Masterly was developed to be used for the logotype, logo, and documentation to evoke a sense of being blocky without being composed of blocks.

While working through brand and application asset requirements I saw that there were going to be more than one hundred assets. I wanted to create a wholistic system to keep most aspects of brand current and to keep asset size and inflation to a minimum.

To achieve this, Masterly was extended to include all of the application icons in the unicode's private use space, as well as the custom font’s alpha, numeric, and additional typographic symbols.

This had the added benefit of keeping everyone up to date with the assets. When the icons needed to be extended or updated, the font is regenerated and deployed, providing a single deliverable with minimal file size and consistency across apps, web site, and documentation.

Masterly Font
Masterly Font

Application planning

The main challenge for building the application was to define user workflows and develop a feature list. This process started with whiteboard and paper brainstorming. This was also time for engineering to weigh in on application architecture.

Our priority was to solidify our approach to the UI layer. We had decided to use Chromium as the foundation and (UI) top-layer. This allowed us to create a platform-agnostic HTML/CSS based interface on top of our various open-source components.

User workflow map
User workflow map

UI development

After deciding on the UI layer, I started working on wireframes and lo-fi comps. This allowed us to focus on workspace functionality, and components, as well as test user workflows.

As soon as there was a framework in place, I began working with engineering to present the UI layer. We could approach this in two ways, by engineering pushing controls to be styled in the UI and by presenting UI that needed to be hooked up to supporting functions.

This process had a few bumps along the way, but after a few weeks working together the process became easy and we were able to start implementing meaningful MVP functionality into the UI and start user testing.

Feature block diagram
Feature block diagram
User workflow map
User workflow map
UI components map
UI components map
UI feature map
UI feature map

Application iconography

Icons were designed to conveying their symbolic meaning while being easily adapted for use in the Masterly font. Icons reinforce the hexagon symbol and are used for represent application workspaces, controls, buttons, and functions.

A few application icons
A few application icons

The initial release

With the design and engineering collaboration flowing smoothly, we were able to produce and iterate a functional demo app. It was now time to develop and grow our relationship with out user base, and to start vetting the app in the wild.

  CraftMaster Demo feature video - short version

Web site design

Working with the goal of providing the value proposition for the application and to facilitate registering and downloading the application, the web site was designed with minimal pages.

In addition to the web site being a sales tool, it was also used as our online help system we built into CraftMaster and as a cloud database for metrics and asset distribution. This kept our overhead low while maintaining flexibility and control over data and delivery.

Web site displayed on laptop
Web site displayed on laptop

Skins & 3D avatars

I created fully rigged 3D models and skin textures for each of of our team members for use online, in media, and in Minecraft itself. This provided us characters who's photos could be taken and used for media, marketing, or in-app to provide help with on-boarding new users.

Pete's avatar
Pete's avatar
Kevin's avatar
Kevin's avatar
Andy's avatar
Andy's avatar

In conclusion

This was a tremendous endeavor. Due to licensing limitations, a path to monetization be came an issue, without significant investment in developing a standalone content platform or application, CraftMaster will remain in its current, beta state — a useable application with an average of 10 new downloads a day.

Since the project was built around open standards and libraries, we are in the process of releasing the it as a open project on GitHub to allow for continued development.

Return to work
Next case study
Streamlio
Branding | Web Development | Graphic Design

Building a Better Brand

All startups face the challenge of developing a cohesive brand and online presence.

Streamlio Branding & Design

Let's chat

I'm always happy to talk about technology, design, food and more.

Send me an email
Contact Information

Contact

Kevin Bomberry
Burlingame, CA 94010
LinkedIn
kevin+contact@bomberry.com