About Bouqs

Bouqs is an e-commerce company that sells flowers. One of their main features is “Subscriptions”.

The Challenge

The goal was to improve the customer journey during the “Subscriptions” flow. Two areas were addressed:

1. Ease of Use

To create an intuitive interface; with elements that are easy to access, understand and use.

2. Visuals

To create a beautiful and engaging interface.

My Role

I was responsible for the User Experience (UX) and User Interface (UI) Design.

I Created/Designed

• Journey Map

• User Flow

• Interaction Design

• User Interface Design

• Visual Design

• Animation

Journey Map

The goal was to determine positive and negative experiences throughout the Subscriptions flow.

User Flow

The original flow was overwhelming with repeated content and unnecessary steps. By reorganizing the content, two pages and two pop-ups were eliminated. The new user flow is simple, concise and efficient.

Subscriptions

The original design was dated and generic; content lacked a strong use of design principles. In the new design, visuals were modernized. The incorporation of hierarchy, contrast and scale help users find information to achieve their goals.

1. Most florist sites consist mainly of photographs. Watercolor flowers were used to make this site unique.

2. The ability to “Select” a bouquet was moved from the next page to this page. This allowed for a better visual presentation on the following page, with the user’s selection shown as the hero image.

3. Custom icons were created and animated to instill a sense of liveliness.

4. The “Need To Know” section contained too much text to scan. To create hierarchy, the description of each header was placed within the “add symbol”. User’s can easily find the topic of interest and read more.

Details

The original design was overwhelming with information. By using negative space, proximity and contrast, information is easier to access and understand.

1. The description was rewritten to be concise. Words that didn’t add value were removed. The shorter copy required less cognitive effort to read.

2. The “How often should we deliver” selections did not need to be visible at all times and was therefore placed within a dropdown menu. This helped declutter the page.

3. In addition to selecting from a calendar, the option to manually input the date was added.

4. The “Order Summary” section was not necessary at this stage and was removed to create a more simple interface.

5. The “Make it even more special” section was added to the “Details” page because the content is related to the ones on the “Details” page.

6. “Suggested notes” was added for users that needed help writing a note.

Recipient

The original design was not user-friendly. Disappearing labels and a lack of autofill were frustrating and inefficient. By relocating elements, the new design was easier and quicker use.

1. Moved labels from inside to above the field box. When users began entering information, the label would disappear. Having the label above the box and visable at all times eliminated cognitive load of having to remember each field. An alternative would be to leave the label inside the box but have it move above the box once users starting to input information.

2. “We can’t ship to PO Boxes” was moved because it’s more appropriate located next to the “Address” field as opposed to the “State” field.

3. The “Zip” field box was placed in front of the “City” and “State” because the “City” and “State” field will be automatically completed once the zip has been inputed, reducing two steps for users.

4. For users who question the necessity of inputting a phone number, a reason is provided.

Payment + Contact

The original design was cumbersome. It was a short page with required actions hidden within a pop-up. Eliminating the pop-up made the information easier to access and use.

1. Since logging into your account can help auto complete the payment fields, the “Log In” page was placed onto the “Billing” page.

2. The option to checkout as guest was added. It’s best practice to give users the sense of control, by giving them the option to choose.

3. The original “Payment & Contact Information” page and “Add New Card” page were merged to create a new “Billing” page.

4. Merging the two pages eliminated an unnecessary step of having to click on the “Update or Change Billing” to input your payment info. Instead the form is available once you land on the page.

Review

The original design was lacking content and functionality. Users were not able to review nor edit their order. The new design addressed those user concerns.

1. The recipient’s shipping address is not available for review on the original page. It has been added to the new page.

2. The user’s payment information is not available for review on the original page. It has been added to the new page.

3. An option to “Edit” was added to:
   - The recipient’s “Shipping” address
   - The user’s “Billing” info
   - The user’s “Note”
   - The “Order” details

Design Toolkit