Custom Label Experience- Rain Retail

Rain serves as a comprehensive point of sale and inventory solution software for various industries including, but not limited to, the jewelry industry.

The custom label experience allows users to set up a template for future printing of product labels. They set up the layout and, when ready to print a label for a particular product, simply choose the label size. Labels follow the customized template and draw relevant information from the product page.

Context

Users want the ability to showcase stone specification details on their product labels

Problem

  • Follow the recommended format:
    Carat 1.05 | F Color | FL Clarity | Cut Excellent


  • Consider how many spec data values can be added

  • Incorporate the following potential fields:

    Report Number

    • Stone Type

    • Source

    • Shape

    • Carat

    • Cut

    • Clarity

    • Color

Allow users to add stone specifications to the current custom label experience.

Goal

Constraints

The Process

Tasked with wireframing the initial mockup, I first considered the other existing labels. Most of them only consisted of one or two input fields and a template that would change in real time as the fields were updated.

Ideation

Here is an example of an existing label detail.

Due to spacing constraints, I knew I needed to keep things small while allowing users to input information into a placeholder and pick and choose which fields they want to show. They might want just 2 or all 8. I opted for a toggle option so users could see which were “activated” and the text they entered into the field.

This is my “V1”

I brought this mock up to my lead designer who then mentioned a few parameters I had not accounted for. This included drag-ability and a single input field for simplicity.

Below is another mockup to consider.

The biggest differences between our two frames were that his values could be reordered and the drop-down menu allowed for users to decide which data values showed and which did not.

Iteration

From these two main concepts, I codesigned with the head designer to find the best solution to our problem.
Here are just a few of those iterations:

Adjustable rows with drag feature

Input fields for each data value

A single input field

A single input field without drag feature

We considered using a popup modal rather than drop down, but quickly neglected this idea because it created an unnecessary layer into the flow while not saving any space. We also attempted various ways to clarify which data value was being edited at the time if only using a single input field.


After discussing with the product manager, we came to the conclusion that giving users the freedom to manually enter data values would potentially cause more trouble and clutter. Instead, we should change the experience to be more simple by automating the data directly into the label from the product page.

No more input fields, only the rearranging of data values. Users can still pick and choose which values exist.

This new insight from our PM allowed us to simplify our designs. We still needed a way to pick and choose which data values were applied and allow space in the template for all 8 possible values (and the longest possible digits for said values), but we no longer needed to worry about an input field.

Further iterations had us feeling like there was no one perfect way to achieve our goal. However, with there only being 8 data values, we realized there was no real need to have “more” fields hidden- we could have all 8 present at a time and revisit V1 which could turn fields “on” or “off”.

Our most recent version.

Biggest change: Users don’t have to plug and play and all 8 fields are now automated, all they have to do is activate the ones wanted and rearrange them.

User Testing

Upcoming: we will run user tests to ensure that the designs have successfully achieved our goal.