SOFTSOAP
Custom Bottle Builder
Softsoap hired BrandShop to create a custom bottle builder experience on the web. My role as the UI/UX designer was to research the potential design patterns, and create high fidelity wireframes that described the possible user flow. I created a deck to present the client to communicate the bottle building process in a simple and effective manner. The screens were accompanied by user stories that list the features and functions.
UI/UX DESIGNER
- On the right side of the layout, there’s a headline and copy with instructions.
- There's a list of options that expand and collapse to reveal more.
- Choose a canvas, formula, occasion, pattern, text, photo and monogram.
- The fields are optional, but the user must have a minimum of one selected to order.
- The user can select in no particular order.
- The user can save and share their design.
- Most sections have a simple list with options.
- Color coded swatches to represent formulas.
- Once the user makes the first choice a “Review Your Order” button would appear fixed to the bottom at all times.
- Displays a list of common occasions.
- Would have a preview of the patterns.
- Selecting a particular occasion would lead to a filtered list of patterns on the next screen.
- The pattern screen would display the filtered results from the selected occasion.
- There would be an option for choosing a solid color background, or selecting a pattern from your occasion choice.
- Adding text would give you the option to select a typeface, font-size, color, and additional styling.
- Character limit.
- Move and arrange the text on the label.
- The user can add an additional text field, or remove the current one.
- The user would have the ability to upload a photo, or add one from a sample gallery.
- Adding an image could be done via upload with an option to select again and remove.
- There's functionally to move the image within the label - scale, rotate, flip, and arrange to bottom, top, center, and middle.
- There’s an option to add an image from a sample gallery.
- The section would also show the filtered results from the selected occasion.
- The user would have the option to position the image within the label.
- Monograms would have a set of limited styles.
- A text field that’s limited to X amount of characters, or just initials.
- The user would have the ability to to change the typeface, font-size, and color.
- It would also have the option to adjust the position within the label.
- Once a choice is made, this screen is available at all times via the “Review Your Order” button on the layout.
- Go back and edit.
- See the total.
- Share your design.
- Add the current design to cart, and design another bottle.
- Clear design and start over.
- Checkout.
