Tag Archives: Design

Form, Features & Functionality at Your Fingertips

Many people like MyStyle for the quality look and feel that it brings to the personalization experience. It looks professional, clean, and it’s able to be customized with your branding, and the UIs move and behave smoother and more intuitively than other apps.  That’s great, and it never hurts to look good.

Still, MyStyle has a lot to offer in the UX beyond the smooth UI and graphics that other apps just can’t seem to get right, that are a big part of it’s high completion and conversion rates for design – something that can be a point of failure for users that have little or no experience with design or graphics.

With tons of experience over the last decade, we’ve learned where to expose features to the user, and where to hide them away and make them automatic functionality.

Layers as a Concept

Layers is something that unless you’ve used a graphics editor, you probably are not that familiar with.  Once you know how they work in Photoshop, or Illustrator, or whatever graphics software you might use that support it, it’s logical and easy.  But, that initial learning curve is tough at first without a tutorial or a person teaching how to use them. Many developers will aim to try to copy Photoshop in UX because they themselves are familiar with it’s vocabulary and UX metaphors, but that’s actually a big mistake.

Layers in Photoshop

Hide the Concept for Usability, Automate the Functionality for Design Success
Since MyStyle caters to the common online shopper who is often non-technical when it comes to design and graphics, “Layers” as a concept must be implemented and functional the whole time the user is designing, but it has to be hidden away from the user’s experience to make it smooth and easy without that learning curve.  This doesn’t mean it’s not there, though. It just means it’s running behind the scenes instead of competing visually in the UI controls for attention, like Photoshop, the way many apps make the mistake of doing.

There are an unlimited number of layers with sophisticated groupings automatically set up and generating and removing within the both the product template and the user’s design object layers.  You can find “bring to front” and “send to back” buttons in the adjustments panel for any object to work with layering, but it’s not required and in most cases isn’t needed.  Groupings of the layers ensure that text can’t get stuck behind images, that backgrounds are always in the background, that patterns fit in the middle, uploads go on top of background and patterns, monograms in front of that, and so on.

This automatic layer control makes the design process easy for the user, ensures logical and common composition ordering occurs naturally, and allows users to compose dozens of layers without ever having to hear the word “layer” once.

Dynamic Process of Composition

Composition is the process of combining and layering graphics together within a defined space.  This seems obvious enough, and with computers the rules have definitely changed, but the roots go back to drawing and painting and still hold true today with computer graphics.  MyStyle has made a 1-2-3-4 step composition process that accomplishes the natural back-to-front approach starting with the lowest possible UX barriers to entry.  This linear UX makes the question “what should I do next” a sort of non-issue, because everyone gets that “steps” go in order. At the same time, you can click any step at any point, so you don’t have to go in order. While simpler users will just follow the order of the steps as is and do great, more advanced users will try to click steps out of order more often, and quickly discover that they can still work in any order they want, should they want to go back and change something up, or skip ahead to a feature they want immediately.

Nissan

A Good Composition Starts with a Background You Like
Any good painting starts with with a color palette and laying down background.  In the beginning of the MyStyle apps intro, it shows an animated arrow to the main composition steps, pointing at Step 1 – Backgrounds, in most cases.    This gives the user instant gratification to play around with some color choices, either solid or a gradient from one color to another, and requires zero content on their part.  As they move through background images, patterns, etc, they already get to see how easy it is for them to control their design and steer it into the realm of their personal tastes.

From here the Upload Images and Add Text features come into play for most users, as steps 2 and 3, layering perfectly and auto positioning as they go, to try to automate as much of the tedious obvious chores of a composition intuitively without too much intervention needed.

As a Result, the composition a user comes up can surprise them, as they often get further along artistically with more elements than they’ve ever done before.  For many people who are not photoshop users, this is the first time they’ve done a cool gradient, a photo or image, a pattern, some text or a monogram all together in one composition.

Dynamic Steps
The steps in MyStyle can be configured to go in any order at all, so the app is not stuck in it’s default configuration, although the default configuration does use the back-to-front composition that works really well.  So, if your product does not have a background ever, or your users 100% just want to start with an uploaded image for whatever reason, then steps can be removed or re-ordered however it needs to be to fit the demographic and primary use cases best.

Unique Trending Features

It’s not uncommon for the MyStyle dev team to create both hot new features for the out-of-the-box customizer, as well as custom features for specific MyStyle apps and clients.  This can add a special element to your app that you think will fit your users or your products needs more specifically than the general design tools already do.

Note: You can find lots of great add-ons in the MyStyle Marketplace to add special elements to your MyStyle apps.

 Some unique custom features we’ve developed in the past have included:

  • Custom Color Palettes
  • Custom Pattern Libraries
  • Custom Product Navigation
  • 3D Rendering / Preview
  • Acrylic Frame Customizations
  • Changing Template Size Options & Shapes
  • Patterns; special size scaling and/or repeating patterns
  • Gloss and Matte finish lighting effects
  • Price calculations (based on sq ft of actual design area used)
  • Laser and Engraving output
  • Filters
  • Custom Monogram Shapes
  • Custom Fonts
  • Custom Background Libraries
  • Custom Foreground Libraries
  • Product Option Overlays (like a photographic options that can be toggled on or off to layer on top of the design as predefined add ons)
  • Special Vehicle Trims
  • Special Templates with Predefined Text
  • Effects Layers and Textures
  • Custom Watermarks and Overlays
  • …many more

The Tip of the Custom Iceberg

These concepts are some of the core of why the MyStyle Customizer is so good at what it does. But, the list goes on and on. This is the base that you want in place for users to have design success, and fall in love with your brand for the ability to take products to a personalized and special level with great up-front features and tons of hidden automated power and functionality at their fingertips. Beyond this, the sky is the limit on how we can customize our customizer further to take your brand to the top of conversion optimization and user satisfaction with the best UX possible for customized configurations and personalized prints.

Sign Up Shop Marketplace