iMATRIX
Website Builder Tools
WORK
/
iMATRIX - WEBSITE BUILDER TOOLS
iMatrix builds websites for medical businesses using its own content management system, serving 12,000+ active client websites across chiropractic, veterinary, and eye care practices. Here are a few of the internal tools I helped design for our Website Builder.
Font Picker
To give visual flexibility to the websites we're building, we designed a custom Font Picker tool that was specific to our system.
Role
Led design from concept through implementation, including mockups, prototyping, and developer collaboration
Summary
This interface enabled the ability to switch between complete font pairs and the capability to fine-tune individual text properties including font family, weight, size, and line height for various text styles. The Font Picker provided our team with typographic control while maintaining design consistency across our web platforms.
Font Picker - Adjusting Font Properties
Font Picker - Switching Font Pairs
Section Picker
We redesigned the menu that displayed different prebuilt sections to more easily preview sections that would be added on the website.
Role
Designed and prototyped the feature, then partnered with developers to bring it to production
Summary
To add sections to a website, we have a menu that displays the different sections that could be added. We created prebuilt sections (e.g. different banners, services, staff) and needed a way to display them. These are the updates we made to the Section Picker:
  • We created a side menu and organized the section headers and subheaders.
  • We created larger cards that would hold screenshots of the different prebuilt sections.
  • We updated the horizontal slider for the cards to a vertical scroll.
Section Picker
Color Palette Preview
We built an interface to preview color palettes and to show how the colors would be applied to the website.
Role
Owned the design process from wireframes to implementation, coordinating closely with engineering
Summary
In our website builder, when users set the colors for their website, the colors didn't change dynamically on their page. Often times, it took some guesswork on how text or buttons would look on certain backgrounds. I designed a preview in the color palette selector to show how the selected background, text, and component colors would work together. I included previews of the components on light and dark backgrounds.
Dark Mode Preview
Light Mode Preview