Makr Web Builder UI

A reimagined user interface for the Makr builder
Role

UI Design

For

Makr

The launch of the Makr website featured a similar product selection as the iPad app, including logos, business cards, postcards, product labels, and address labels. Business branding was a key focus of the website, emphasizing logos and they ways you can apply it to other projects.

The website also provided an opportunity to revisit the overall Makr user interface and experience, especially in the builder. I worked with our Lead Product Designer to finalize a design system for the Makr website that would be used across the product. A new blue and black color palette and a new font set was also introduced. I then rolled out the design system across the builder in Sketch, and worked with our UI Engineer to implement the new styling.

I evolved the design of builder to have a modern and minimalist design, as compared to the existing iOS apps. The dark gray is used as a grounding element and contrasts with the white canvas area. I also incorporated the new blue color as an accent throughout the product, where it is used to indicate focused and selected elements. The blue is not overly used and does not distract the user from the project they are editing.

Logo Builder

The logo builder allows the user to create a custom logo using text, lines, and a Makr-created icon library.

Print Builder

The print builder allows the user to create physical cards and label projects.