Responsive website presented thorough different digital devices placed together. On the left there is also rack cards presenting the brand language for Sip Savvy
Website + Branding - Design & Development | Experience Design | Marketing Materials| Motion Graphics

Web-Centric Brand Experience, that spreads awareness on negative effects of sugary drinks, while  fostering mindful drinking habits.

Type

Client-service

Role

Web Designer
Front-end Developer
Content Developer
Brand Designer

Tools

Visual Studio Code
Figma
Adobe After Effects
Adobe Illustrator

 A visual representation comparing two distinct sets of data on sugar consumption, highlighting differences and trends.
A promotional image showcasing the SipSavy brand logo and tagline, encouraging viewers to make smarter beverage choices.

Overview

About

Young adults today have widely replaced water with soda to fill the need for thirst. Sip Savvy is here to ask its users to take a step back before choosing soda and assists them in building  wiser mindful drinking habits.

  • ‘Sip Savvy’ is an live website with added brand experience, to spread awareness on harmful effects of soda consumption.
  • The extended brand experience covers periodical emailer that strategically designed encourages the users to build mindful habits.
  • To enhance the user experience, promotional materials like posters, rack cards, and merchandise are designed to encourage users to explore the website further.
  • The web interface is designed and developed to be engaging, interactive, and  motivating for its target audience.

What sets this product apart?

Soda has been popularized and marketed for a while, and  on the other hand awareness regarding its side effects is not promoted enough. Surely, there are blogs and platforms providing information about the harmful effects of soda and other sugary beverages on search, Sip Savvy goes beyond merely disseminating information. It is dedicated to promoting awareness, helping users recognize signs of soda addiction, and encouraging more mindful drinking habits. Moreover the information is strategically organization in a visually appealing manner supported by video content to keep the audience enticed

Target Audience

The overall concept is geared towards Young Adults (aged 18 to 28) in the United States. To narrow the project's focus and gain better user study results, the primary audience is localized to SUNY Oswego students.

Audience Expectation

The informative website has an expectation of reliable and complete knowledge resources for the need to quit soda and ways to practice mindful drinking.

The users will also need certain motivation to adapt and follow the mindful drinking lifestyle habits promoted on the website. Henceforth Sip Savvy is strategically crafted with strategies of user motivation and engagement.

Flow diagram illustrating the sequential steps involved in a formal customer service call process.
Brand Logo
Sip Savvy logo-type

Visual Identity

A successful anti-soda branding initiative necessitated a distinctive identity and name, and "Sip Savvy" undoubtedly enriches the brand's value.

The logo is meticulously crafted to convey a powerful and distinct visual identity, ensuring the brand's distinctiveness. This design is thoughtfully tailored to resonate with the target audience, primarily young adults.

This identity serves as the foundation for the development of the brand's language and website design.

A typographic representation of the phrase "the quick brown fox jumps over the lazy dog" in a font resembling handwriting.
A visual representation of the color palette designed for the new fff, showcasing a harmonious blend of vibrant and muted hues.
A laptop adorned with stickers that read "make time for yourself" to encourage self-care and relaxation.
Zoomed in image of a website featuring the logo mark
Poster Series
A man walks by a wall adorned with posters advocating against soda, promoting water, and encouraging hydration.
Rack Cards
A mockup displaying rack card design.
A mockup displaying rack card design

Information Architecture

The website is designed as a one-page site with a single call to action, with an aim to captivate the audience's attention. Focus was laid to let the most relevant and valuable information reach each user accessing the website.

Content hierarchy is carefully planned, prioritizing the most relevant information.

A minute long info graphical video are added to website for key insights and to cater to more inclusive audience.

Periodic emails are planned to deliver further insights into the topic to not let the users bee bombarded with access information at one time.

The user interface is crafted to be visually engaging and user-friendly to prevent boredom.

Low fidility prototype mocked in phone mock-up
Code Structure Planning + HTML Code file of the Website
 Two computer screens displaying distinct programming languages and code snippets.
Section from a  website featuring destination options, and stunning imagery.
Periodic Emails
A collection of professionally designed email templates tailored for Sip Savvy.
Video Content For the Website
Set of digital devices displaying the sleek web design,