product line v3.jpg

Objective

Objective is a wellness brand focused on creating vitamins and supplements straight from science. Under Clorox’s family of brands, Objective prides itself on giving users the optimal approach to choosing vitamins, with no nonsense and expertly formulated research.

Challenges included constructing proper placement for SMS opt-in on order confirmation pages, transitions for special offer notifications, and a visually digestible FAQs page.

 

Objective Launch & Rebrand

Objective is a wellness brand focused on creating vitamins and supplements straight from science. Under Clorox’s family of brands, Objective prides itself on giving users the optimal approach to choosing vitamins, with no nonsense and expertly formulated research.

Some of the challenges faced were launching a new brand and establishing UX guidelines/processes, accounting for all use/edge cases for a smooth launch date, ideating on UX flows with few steps for easy customer buy in, and rebranding to target a younger/broader user base while collaborating with creative to ensure ADA compliancy and uniform design systems.

I was responsible for ensuring all edge cases were in place for initial launch, giving users a clear FAQ’s page to reduce customer support instances, rebranding the site with Creative’s new color scheme and updating Objective’s design system.

 

Product Team

Meg Carreau, Head of Product Design

Aisha Steger, Product/Brand Designer

Patrick Kennedy, UX Researcher

My Role

Product Designer

SMS Opt-In

In order for users to sign up for Objective’s SMS program, the team wanted to include an SMS block in the order confirmation page as an add-on after a complete purchase. The main challenges were to build an SMS block that sat uniformly for both new and returning users and to not compete with a password capture that only exists on the new user order confirmation page.

Iterations

sms renditions.jpg

Final SMS

For the final, I chose to have the SMS block sit underneath the cart summary rather than inline with shipping and payment info. With this version, the block doesn’t compete with the password capture block in green and transfers to mobile well. It also reads as a ‘to-do’ item for the user since the sign me up CTA is the last visual cue on the page.

sms desktop.jpg
 
mobile sms.jpg
 
 

FAQs

For Objective’s FAQs page, the general rule of thumb was to create a layout that wasn’t overly text heavy and didn’t cause visual overload at first glance. My goal was to visually cut down or compartmentalize copy provided to give the page more breathing room and to give users a clearer pathway to specific questions.

Iterations

FAQs renditions.png

Final

For the final page, I chose to have all questions open but answers minimized. It seemed clear that having the default questions bare in this way allowed for higher user readability, and having the questions individually expand allowed for more focus on just what a user would want answered. I added a block for contact info as well to give users a separate path in case none of their questions were listed.

faqs mockup obj.png

Interaction

faqs.gif

Email Special Offer

For the instance that a user clicked on a discount code from a marketing email, we needed a way to design how those offers would be represented on the site. My main challenge was how to signal that a user’s discount had been applied to their cart without disrupting their site experience.

Iterations

email offer versions.jpg

Final

For the final version, I opted for a flyout that would show messaging stating the discount being applied to the cart after automatically disappearing after a few seconds. With a side drawer or a modal, a user still has to actionably click out of both instances, so the thought with a temporary flyout was to reduce flow time with a smaller visual cue.

email offer mockup.png

Animation

autopromo.gif
 

Rebrand

OBJ HP.png
OBJ cart.png
OBJ checkout.png
OBJ order conf.png