Problem
Joia is a line of natural sodas that was originally branded by the design firm Replace. The main audience for the brand is trendy individuals aged 21-40 who are looking for interesting mixers for their cocktails. The packaging for the product reflects the unique, ingredient-focused flavors of the sodas, but the website does not.
Solution 
This new, responsive website draws from the original packaging and brand standards from Replace. Bright pink and sketch-like illustration help move the eye around the site, and using chocolate brown instead of black keeps everything soft and friendly. To maintain consistency with the product packaging, handwritten typefaces are used for headings and calls to action. Humanist sans serif Gibson has a similar friendly personality, but is more legible for body copy and smaller type.
Back to the Start
When Joia first launched, Replace was hired to create the name and look for the brand. The packaging is very unified and clearly communicates the fun, natural feeling behind the brand. The current website, however, feels sterile and bland. When approaching the redesign for the website, I looked to Replace's case study and the current packaging to create a website that complemented and enhanced the brand.
Color and Pattern
When looking at the case study, a bright pink stood out as a major color for the brand, along with a chocolate brown. Organic, sketch-like illustration was featured heavily as well. While each flavor of soda has its own color scheme and illustrations used in the packaging, I opted to use the pink and brown as primary colors, with occasional accents of the individual color schemes for illustrative highlights.
Typography
All of the copy on the packaging is either handwritten or is in a handwritten-style typeface. This works well for the small amount of copy on the packaging, but would be overwhelming on a website where more copy would be involved. I used a variety of handwritten typefaces for headings and call to actions throughout the design, but for larger blocks of text, I opted for a humanist sans serif in the form of Gibson. 
Digital Strategy
Focusing on Joia's potential as a mixer and involving social media were both priorities. The story behind the origin of the brand is that a group of friends liked to combine interesting flavors when making cocktails at parties and decided to launch their own soda brand. This collaborative approach inspired the Join the Party page. Letting consumers interact with the brand through an Instagram cocktail recipe contest felt authentic to the brand, and having guest mixologists decide which recipe would be featured on the recipes page adds an extra incentive for users to enter.
Instructor
Paul Drohan
Class
Web Design
Typefaces
Amatica
Caveat
Gibson
Sketchnote Square
Permanent Marker
Elements
Responsive website

You may also like

Back to Top