FEDERALIST WINES
BRANDING, RESPONSIVE WEB + MOBILE DESIGN
Tasked to develop the brand direction for a new line of varietals from the folks at Terlado Wines, the campaign strategy of merchandizing a collection of craft wines to the millennial, craft beer-drinking male demo entailed a fully integrated launch across all media; including a bold new responsive site design, digital banners, social presence, and a traditional POP campaign.
FEDERALIST WINES
BRANDING, RESPONSIVE WEB + MOBILE DESIGN
Tasked to develop the brand direction for a new line of varietals from the folks at Terlado Wines, the campaign strategy of merchandizing a collection of craft wines to the millennial, craft beer-drinking male demo entailed a fully integrated launch across all media; including a bold new responsive site design, digital banners, social presence, and a traditional POP campaign.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Art Direction, Web & UI Design
I'm a paragraph. Click here to add your own text and edit me. It's easy.
01
SYMTUZA® Site
VISUAL DESIGN, COMPONENT LIBRARY, UX + UI DESIGN
I had the opportunity to refresh a Jensen Pharmaceutical Company product website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and create a flexible design library for future scalability. As the contracted Experience and Visual Designer, my goal was to transform SYMTUZA®'s online brand presence by providing users with an optimistic, personable, and visually uplifting experience that met both Jensen Pharmaceutical's business requirements and marketing goals.
01
SYMTUZA® Site
UX / UI & VISUAL DESIGN, DESIGN SYSTEM CREATION
I had the opportunity to refresh a Jensen Pharmaceutical patient website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and have a flexible design library built out for future scalability based on the refreshed look. As the contracted Experience Designer, my goal was to transform SYMTUZA®'s online presence by providing users with a more optimistic, personable, and visually uplifting brand experience that met both Jensen Pharmaceutical's business requirements and marketing goals.
01
SYMTUZA® Site
VISUAL DESIGN, COMPONENT LIBRARY, UX + UI DESIGN
I had the opportunity to refresh a Jensen Pharmaceutical Company product website focusing on their new groundbreaking HIV drug, SYMTUZA®. The client wanted to incorporate the evolving brand direction into the website and create a flexible design library for future scalability. As the contracted Experience and Visual Designer, my goal was to transform SYMTUZA®'s online brand presence by providing users with an optimistic, personable, and visually uplifting experience that met both Jensen Pharmaceutical's business requirements and marketing goals.
Project Challenges, Project Goals
This being an ad agency project, it came with all the usual headaches and curve balls; continual copy changes, ambigious wireframes, scant brand assets, conflicting internal feedback. But the overall objectives were clear:
Brand Goals
• Depart from the somber imagery
• Push the current guidelines with a fresh, optimistic vibrancy
• Consolidate copy and graphs to be more visually digestiable
UX / UI Goals
• Build out a documented design system and component library for global,
scalable consistency
• Reduce content overload with a more modular / "chunking" approach
•Improve overall page design and the experience of feature functionalities
Client Marketing Goals
• Modernization
• Simplify informational complexity to 4th grade reading level language
• Deliver key messages and claims in a more visually comprehensive way
Compare & Contrast Optimization Highlights
This case study focuses on the website redesign process, outlining the four main steps taken to enhance the overall site experience for the target audience: the patients.
Removed the over-wide grid margins to use full-width imagery for a stronger visual impact
Bolder presence of brand palette
"Chunked out" big color blocks of content for easily digestible, modularized sections
Simplified, large data visualizations to drive key messages and claims directed at patients
Previous
Re-Design
Examples of UX "micro" Improvements
Beyond visual design, optimizing the site usability consisted mostly of improving the functionality of certain wonky behaviors of current feature -- reducing clicks, updating to general better practices and changing UI to better align with user expectations were all the pain-points considered.
Video Player Pain-points
The Patient Stories page had a centered "hero" video player with all other video thumbnails buried below it. And with very limited screen-space due of the persistent legal footer, the user was forced to always scroll down to click other videos, and then scroll back up to watch every selected video. Pretty annoying.
UX Solution
A horizontal layout works better in consideration of the legal footer and prevents needless, clunky up-and-down-scrolling between videos. This lock-up also accommodates all other video thumbnails as well as additional future content in a nested sidebar, never having to fight the limited verticality of the viewport.
Previous
Re-Design
Interactive Quiz Module Pain-points
The quiz, intended for CRM purposes, needed some improvement. The original interaction created a new module for every answer click, extending the quiz interaction all the way down the page, plunging the user down the page. Def room for improvement.
Previous
UX Solution
Simplifed -- contain the quiz in a single module, require no scrolling, display a progress bar and back button. Constraining a task also promotes less tabbing for un-sighted users.
Re-Design
Building Out a Flexible Component Library
Beyond the visual design and brand refresh, the client requested a base component library to ensure consistency across all user touch-points after hand-off. Moreover, the client was asking for a more efficient way to streamline future changes with available pre-designed, reusable pieces to speed up time-to-market updates.
To handover a scalable framework I created a flexible system of variable building block and component sets that could adapt to different content easily. The goal was to provide variations that other designers could just "plug and play".
Component sets to toggle design elements on and off without having to wrestle content elements.
Component Library Sample
