Design
Art Direction, Digital Asset Management, Graphic Design, Prototyping, UI Design, Vector Illustration, Visual Design
Software
Adobe Photoshop, Adobe Illustrator, Figma
Duration
6 weeks
About HAROUTINE
Haru + Routine (A Daily Routine)
A combination of the Korean word "Haru" (하루) and the second syllable in "routine," Haroutine strives to become an essential part of one's daily routine through its high quality ingredients and rigorous scientific testing.
Problem
"How can we introduce and educate consumers of the benefits of liposomal technology in a friendly and welcoming manner?"
Haroutine.com
Haroutine.com was built to educate consumers about the benefits of liposomes in nutrient consumption. The use of liposomes in medicine has been around since the 1960s, but the majority of consumers have little to no knowledge of the breakthroughs made in liposomal research. Haroutine aims to make knowledge of liposomal applications accessible through short, concise articles expertly crafted by veterans in the health and wellness field.
Approach
The website's purpose is twofold:
(1) To create a simple and clean platform that showcases Haroutine's vitamin product lines and
(2) To provide accessible and easily digestible information about liposomes and breakthroughs in the health and wellness space.
(2) To provide accessible and easily digestible information about liposomes and breakthroughs in the health and wellness space.
Our web developer's main objective was to create a consistent layout for both the desktop and mobile space. I refrained from using complex animations and transitions, and instead relied on high-quality photography and well-placed compositions to create a modern and premium user experience.
Simplification of main elements used for the website took place during the first half of the development timeline. Asymmetrical layouts and multi-step transitions were replaced with simple interactions; Haroutine's products should be the center focal point of the website experience.
The website design for Haroutine's late November launch makes use simple dividers and white space to help users identify the different sections laid out in each page. Technical and legal information are organized neatly in the bottom section of the website.
Wireframing, user flow, and preliminary design
Haroutine's clean and simple approach to design reflects their mission in the health and wellness space: a straightforward, minimal layout focuses on delivering high-quality images of Haroutine's products and ingredients, paired with brief, easily digestible paragraphs regarding liposomes and their benefits.
Haroutine.com — November 2022 launch
More than 200 imagery and video assets were created, in collaboration with the Los Angeles-based agency, ButterTV, in anticipation of Haroutine.com's November 2022 launch. Additional vector illustrations of liposomal structures were made for Haroutine's Science page.
A Commitment to Education
Haroutine remains committed to educating consumers in the vitamin space of the advantages of using liposomes as their primary means of nutritional intake. Images of Haroutine's ingredients, microscopic scans of liposomes, and 3D illustrations of liposomal structures offer ways to visualize how each carefully chosen component benefits the consumer's overall well-being.
Haroutine's main pages offers convenient insights about their vitamins and their use of liposomal structures throughout the website.
Home Page
The Home page is the first page users see when visiting Haroutine.com. Website visitors are introduced to scientific information in short lines of text, coupled with imagery to help explain the data.
Shop Page
Haroutine.com's November launch comes with two variations of their premium liposomal vitamin C product line. A clean, two-column layout was utilized to showcase both products.
Product Page
Further details, in addition to their nutritional information and liposomal application, can be found on the product pages for each Haroutine product. These pages offer a deeper insight in the use of liposomes and how they can increase the consumer's effective intake of nutrients. Haroutine also provides transparency in their ingredients, citing their source of origin and their importance to consumers' health.
Science Page
Haroutine's Science page provides the user with well-tested, proven research about liposomes and their increasing impact on the vitamin market. Vector illustrations and videos were developed for visual reinforcement of data. Published scientific articles and commentaries from health experts help round out the user's experience by showing them the human side of a seemingly technical and complicated field: proven data and testimonials are assurances that Haroutine's products are a culmination of hard work and effort from people just like them.
Help, FAQs, and policies
Questions, answers, and legal documentation regarding Haroutine and its products can be found through the "Help and FAQs" and "Terms of Service" pages. Contact methods are also provided if a consumer needs to communicate with a representative from Haroutine.
Assets and components
Below are a few of the assets used for Haroutine.com. The website relies on white space and well-placed typography to separate sections within each page. A limited, 3-color palette guarantees that the imagery remains the center of attention.
