{"id":1518,"date":"2026-03-02T02:25:07","date_gmt":"2026-03-02T02:25:07","guid":{"rendered":"https:\/\/the-art.studio\/?p=1518"},"modified":"2026-06-26T12:42:28","modified_gmt":"2026-06-26T10:42:28","slug":"h2health","status":"publish","type":"post","link":"https:\/\/the-art.se\/sv\/case-studies\/portfolio-case-studies\/h2health\/","title":{"rendered":"H2Health"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

H2Health<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

Full brand, website, content, product design (ongoing)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Brand visual identity, website, online shop, product labels and mockups, and AI content for an in-house producer of dietary supplements in Sweden.

<\/p>

The work for H2Health started as a simple request to add an e-commerce section to their existing WordPress website. After inspecting the existing platform and realizing its limitations due to outdated development practices I offered to re-create the entire brand experience and website, in addition to creating the new online shop.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t<\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\tGO TO HOMEPAGE<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Visual identity<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t

my design process<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A visual identity for a brand is not just a logo, or colors, or typography. It is the sum of all these parts and more, which is a greater whole. This is what communicates a brand’s vision with their unique personality, and over repeated consumer exposure creates a brand’s image.<\/p>

\u00a0<\/p>

I follow roughly the same process for every brand, which is slightly different and more flexible than the standard design process.<\/p>

\u00a0<\/p>

\u00a0<\/p>

My process for H2Health was as follows:<\/strong><\/p>

\u00a0<\/p>

1.<\/strong> After a first meeting with company stakeholders, I gained a firm grasp of the company’s vision and mission, their audience, unique value proposition, and preferred positioning, voice, and personality.<\/p>

\u00a0<\/p>

2.<\/strong> I summarized the results and turned them into a brief, which would direct all design steps; from assembling a mood board to analyzing competitor websites and drawing inspiration from other UI designers on the web.<\/p>

\u00a0<\/p>

3.<\/strong>Based on the brief, I created two mood boards with two different messaging directions and brand positioning strategies.\u00a0<\/p>

\u00a0<\/p>

4.<\/strong> After approval I entered the chosen mood board as a reference in a conversation with my AI agent dedicated to H2Health’s brand, and derived a primary color for the new visual identity. This color would be used in certain key elements throughout the new user interface, after a few modifications.<\/p>

\u00a0<\/p>

5.<\/strong> Typography can make or break the experience of a website, affect conversion rates, and accessibility. The combination of the two selected typefaces offers legible and modern font pairings throughout the brand channels.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Website development<\/h2>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

H2Health’s positioning and their target market necessitates paying more attention to readability and easy of navigation throughout the website.<\/p>

\u00a0<\/p>

The combination of muted colors and warm tones with the minimal sans-serif font, complete with ample layout spacing and subtle animations make for the experience of reading a digital newspaper.<\/p>

\u00a0<\/p>

The navigation menu is using a hamburger button by default on all pages, ensuring a clean view and distract-free reading and purchase experience. The options on the navigation menu are large and descriptive, making them easier to find and select on any device.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t