FLOR Design Studio

The Project

Rebuild FLOR’s Design Studio, which allows customers to design or customize FLOR rugs. Work within the rules of what is possible within the FLOR modular carpet system and design an interface to select, place, color, and cut tiles.  

My Tasks

Detailed gap analysis of the UX, looking for areas where requirements had not been specified in sufficient detail for development; collecting requirements and proposing solutions in those areas.

Define the content of the tour users are given on the first visit.

Gap Analysis

18-page document defining terms and detailing, among other things:

  • The shape toolbox, the style toolbox, and the rug piece toolbar.
  • How to select and deselect one or more rug tiles 
  • How move a rug tile or a set of tiles
  • How to rotate a rug tile or set of tile
    • Axis of rotation
  • How to exit an edit mode
  • Snap to grid
  • Errors, error states, and error messages
  • Undo and redo
Rug piece toolbar

There is a small icon toolbar that appears when a rug piece is selected and then the ⊕ icon is clicked, just above that rug piece. It has 5 or 6 options. 
• Copy
• Rotate
• Counterclockwise
• Clockwise
• Eyedropper
• Select similar
• Delete
Logic
• When more than one rug piece is selected, the toolbar remains where it is, above the first rug piece selected.
• If the rug piece is moved, the toolbar disappears.
Rotation
Logic
When a rug piece or pieces are selected, they will create a rotation area, defined as the smallest rectangular area that contains all squares on the canvas that contain any part of the selected pieces.
• The left border will be the gridline equal to or left of the left edge of the leftmost selected piece.
• The top border will be the gridline equal to or above the top edge of the highest selected piece.
• The right border will be the gridline equal to or left of the right edge of the rightmost selected piece.
• The bottom border will be the gridline equal to or left of the bottom edge of the lowest selected piece.
• The pieces will rotate on the central axis of this rotation area. This will insure rotation always happens on a gridline or quarter-square gridline, and make it more likely the pieces will fit in their new location. 
• With each click of a “rotate” icon, the selected pieces will rotate 90º to the left or right. The pieces will be in an unplaced state (either unplaced, valid location or unplaced, invalid location, depending) until the user clicks anywhere besides a rotate icon.
• If the location is valid, pieces will be placed. (See “Placed” state, under Rug Piece States, above.)
• If the location is invalid, there will be an error. (See “Rug Pieces” under Errors, above.)
• Rotation does not trigger snap.

Welcome Tour

  • UX and content design for welcome tour.
  • 3 different scenarios (depending on how the user accessed the tool), each with 4 screens covering the most important elements for that scenario.

Final Site