Ddrops Vitamins

The sunshine vitamin in just one drop

forbeslaura-ddrops-headerforbeslaura-ddrops-header

Deliverables
Web Design, Illustration, Photography


Role
Lead Designer • Playground Inc.

Since
2016

Ddrops Company is 100% Canadian-owned and operated, and was founded in response to a need for a simply better way to provide vitamin D. They approached us to help them improve content organization, create an easy to navigate experience, and update their look to be more on brand and approachable for every user. In addition, they aimed to increase user's time on the site and decrease their bounce rates.

[unex_ce_button id="content_fpbsgwmcz,column_content_z45g5b16d" button_text_color="#3366ff" button_font="light" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="" button_padding="10px 25px 10px 25px" button_border_width="1px" button_border_color="#3366ff" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#3366ff" button_border_hover_color="#" button_link="http://ca.vitaminddrops.com/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Launch Site[/ce_button]
dribbble-ddrops-baby-desktopdribbble-ddrops-baby-desktop

Developing global personas

Together with the Ddrops team we identified five key user personas ranging from first time parents, to healthcare practitioners, to foreign resellers. In redesigning the site architecture, we brought the focus of the user experience to the benefits and authenticity of the product. A key theme we found with each of our personas was the desire learn about the product and easily access this information. We were able to simplify the previous site architecture and help minimize bounce rates by ensuring product information was accessible through effective calls to action and a simplified navigation. During this discovery phase we also learned we would be creating three unique country websites that dealt with global users. Visitors would not only be accessing the site from Canada, but from the U.S., the U.K and China. We needed to ensure the content met the standards of each country as well as the products, messaging, and intention of users from those specific regions.

The goal was to create a holistic design system that was modular, easy to navigate and that provides the visitor with a sense of place and comfort, no matter what device they are accessing the website from.

Ddrops-SitemapDdrops-Sitemap

Hitting the drawing board

Preplanning each section of the site was key to ensuring our core goals and experiences site-wide would translate across any device. Key pages are designed to provide context and education through original photography, illustrations, facts, articles and quizzes. We began this process by listing out page specific goals and the importance of content based on hierarchy. This helped to account for every objective being met, as well as quickly highlight any problems that would arise between screen sizes and provide a solution before moving to pixels.

ddrops-wireframes-1ddrops-wireframes-1

Branding a story

Ddrops is a vibrant, approachable, and family oriented brand. We wanted to infuse some of that personality across the site and introduce more of their product specific colours. When designing icons and patterns we took inspiration from the concept of a simple drop. Making them round, plentiful, and clean. A perfect opportunity to pull in some more brand colours was on each product page. We wanted each bright colour to clearly be associated with its respective product and help users make that product colour connection on their own. Each product page was entirely branded with shades of their colour and lead by a strong photographed header. We placed focus on the product through crisp and vibrant product shots while at the same time showing users easy methods for ingesting their daily source of vitamin D. When producing some of the shots for the American and U.K site, we took into account some cultural norms and alternative methods that would better connect with those users.

Designed to work for everyone, everywhere

Whether users are visiting on a small screen to a big one, trying to purchase Ddrops, or find out more, the Ddrops website is made beautifully responsive. Our mobile navigation was placed at the bottom of a user's screen to allow a better and more ergonomical interaction when navigating the site with just one hand. On a smaller screen we cut down the steps of purchasing by presenting two main actions in the navigation, ‘buy Ddrops’ or more discovery the main menu. With our scalable design, we allow users to easily access the Ddrops content they are looking for.

forbeslaura-ddrops-responsive-1forbeslaura-ddrops-responsive-1

Vitamins made for the whole family

Showcasing Ddrop's brand was central to this project. Every interaction reflects and reinforces the family friendly tone and sincerity of the company. The site focuses on a clean, user friendly experience, while telling their story and educating visitors through approachable typography, strong imagery, and accessible content.

ddrops-homepageddrops-homepage

next project