Blog


Aptus_corp_logoAptus Endosystems is a medical device company that is pioneering solutions to enhance endovascular aneurysm repair (EVAR). The company’s flagship product, Heli-FX, delivers a set of helical screws to anchor the endograft to the aorta to prevent endoleaks and graft migration.

Aptus printBrewLife was brought in to refresh the corporate identity, solidify the product brand positioning, and develop a creative campaign to highlight the product’s value proposition.

Our “Together ForEVAR” campaign debuted at the VEITH Symposium in November 2013 and was well received by physicians.

“Together ForEVAR” leverages a play on the classic phrase, “Together Forever” to highlight the long-term durability that Aptus EndoAnchors provide by locking the endograft to the aorta in EVAR (endovascular aneurysm repair). It also suggests the combination of forces coming together: EndoAnchors and physicians, EndoAnchors and endografts.

 The campaign rollout encompassed an integrated array of tactical components, including:

  • Website Development and Digital Promotions
  • Social Media Properties
  • Print Advertisement
  • Trade Show Graphics
  • Print Marketing Collateral

 
Margot YosemiteMargot’s passion for rock climbing keeps her suspended high above the rest of us on the weekends, while at work she’s critical to getting projects off the ground and seeing them through completion.

As an Account Associate dedicated to Responsive Business Design, Strategy and Creative, Margot is involved in everything from statements of work to brand positioning to delivery of final design files. Fortunately for us, and our clients, she’s never afraid to ask questions and seek out solutions that lead to a smoother process and better end product. Catch her on Twitter or Linkedin.

 

How do you fit into the picture at BrewLife?

I’ve been described as someone who keeps the trains running. I keep BrewLife’s Strategy and Creative teams on track to meet deadlines; I make sure clients’ daily needs are met; and I support the Responsive Business Design team performing competitive research, stakeholder interviews and other strategic responsibilities.

 

What excites you about your work? 

BrewLife is fortunate to work with clients who recognize that strong brands start with a strong strategy, and ask us to help lead their brand-building from the ground up. It’s very rewarding to partner with people like this, plus the diverse projects that I work on, and the skills I’m building, are unparalleled. Digital, print, analytics…I’m involved in all of it!

 

What is your key strength?

Honesty. I always tell it as it is because only by honestly evaluating the reality of a situation, can you find the best solution. Every day we aspire to help our clients succeed. 

 

What experiences contribute to your success?

My Liberal Arts education provided a great foundation for lifelong learning—teaching me how to think critically and communicate my ideas clearly. And previous ad agency experience has given me insight into the creative process and enabled me to successfully bridge the gap between creative and account teams.

 

What would you be doing if not this?

Professional rock climbing or anything outdoors related.

 

What’s fueling you today?

Gluten-free chocolate babka made by Mom.

 Margot at Yosemite

 

3 Mugs for new hires

Trevor Dawson, Donny Dela Cruz and Julia Dondero are welcome recent additions to the BrewLife crew, helping to round out the Creative and Account Management teams. (It seems we’re partial to last names starting with the letter D.)


JuliaDJulia
has joined us as a Senior Account Manager with expertise in digital and brand strategy. Her previous professional experience includes Ogilvy & Mather, Decision Counsel and Greater Bay Bancorp. She also launched San Francisco’s only Italian Women’s club, Le Donne d’Italia, and is passionate about all things Italian—especially the edible, drinkable things. Where would she fly if time and money were not a consideration? “I’d take my chartered plane to my yacht the Mediterranean. I figure if I can charter a plane, I have a yacht already, right?”

Donny

Donny founded and ran his own brand consultancy, Autograph Creative, for more than five years before joining BrewLife as a Senior Designer. He has many years experience designing and art-directing for brands including high fashion, retail and entertainment. He’s also a skilled street-style photographer. Where does he dream of jetting? North Shore, Oahu to hang ten.

 

 

TrevorDTrevor is our newest Designer but not new to the business, with nearly ten years experience creating visual solutions for retail communications, brand marketing, consumer electronics and corporate communications, including Monster Inc, and Levi Strauss. He’d be happy to hitch a ride on Julia’s flight—he dreams of visiting Santorini, Greece, but only if he could get an extra ticket to bring his wife. 

BrewLife Video: Susan Parker

Get our take on what BrewLife brings to the table and why we’re all so passionate about working here.

 

Howie Chan W2O Group W20 Group

Responsive design uses flexible grids, adaptive layouts and images to deliver an optimized web experience for users based on screen size and orientation.

Ethan Marcotte introduced the idea of responsive design in his A List Apart article in 2010 as he sought a single design solution to address the compartmentalization of experiences across myriad devices, platforms and browsers. In the past three years, responsive web design has evolved from a design philosophy to paradigm, with brands including Microsoft, Starbucks and Time Magazine recently launching successful responsive web experiences.

In the last six months, I’ve lead UX for three responsive web experiences1 and taught an advanced interactive design class at California College of the Art where students were required to apply responsive web design principles to their final projects. I’m a self-taught responsive web designer, frequenting A List Apart, Smashing Magazine and Media Queries for insights and best practices.

This article focuses on three key elements to plan a successful responsive web design experience:

  1. Selecting a responsive web design framework
  2. Choosing final grid sizes
  3. Adopting a collaborative, rapid prototyping approach

 

Selecting A Responsive Framework
There are multiple responsive frameworks to choose from, with Bootstrap (created by Twitter) and Foundation as the most popular frameworks among UX developers and technologists. With a majority of frameworks offering similar features, final selection comes down to technologist preference, with Bootstrap leading the way due to their vast component and paid theme libraries. In surveying my technologist network, preference and praise was unanimous for Bootstrap—not bad for a tool originally developed by Twitter for use as a front-end development styleguide.

 

Choosing Final Grid Sizes
Once a responsive framework has been selected, it’s time to choose which grid sizes to target across desktop, tablet and smartphone formats. Responsive design enables designers to target both the largest (2880×1800) and smallest (320×240) resolution displays simultaneously.

Bootstrap Grid Sample

A screenshot of Bootstrap’s live grid, which shows a nine column layout.

Responsive frameworks provide creative teams with anywhere from 12 (Bootstrap) to 24 (Foundation v3) columns or “containers” through which to layout content. These columns fluidly resize to the browser width, meaning that a 12-column layout on a 768 pixel display would be 46 pixels per column, while on a 2880 pixel display, the same column would be 220 pixels.

When choosing grids, companies should cover minimal display sizes for desktop, tablet and smartphone. Here’s a quick overview:

desktop

Desktop: 980 or 1170 grid (optimized for 1024 or 1280 pixel display, respectively).
While screen resolutions continue to increase in size, optimizing for the 1024 pixel display covers  desktop and tablet formats (see below); however, using the 1170 grid gives designers a larger canvas to work on.

tablet

Tablet: 724 pixel grid, optimized for 768 pixel display
For browser displays between 481 and 767 pixels, the layout will be fluidly resized.

smartphone 

Smartphone: 320 pixel grid (optimized for 320 to 480 pixel displays)
In Smartphone format, responsive design reduces to a single-column display.

In summary, a minimum of two grids (320 and 980) should be selected, covering desktop, tablet and smartphones; if there’s enough budget and time for a third solution, the recommendation would be to optimize for 320, 724 and 1170 grids.

Once a final grid is selected, the UX and creative teams should determine how many columns will be used in the layout. I’ve started adding a column key at the bottom of of information architecture documents, which helps creatives plan their design approach.

Responsive Columns

The 980 grid column key that I created for a project.

 

Adopting a Collaborative, Rapid-Prototyping Approach
Now that you’ve decided on a responsive framework and your final grids, it’s time to define the user experience as well as look and feel. Responsive web design lends itself well to agile development as content strategy, user experience and layout should be considered simultaneously across formats. Lean UX is the practice of bringing the true nature of work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.2  Traditionally, agencies have separated the definition (strategy) and design phases, using high-fidelity information architecture artifacts to inform the creative process.3 Lean UX combines definition and design into a single phase, prioritizing collaborative ideation and problem solving through quick, iterative creative cycles. Clients should be invited as part of the wireframe process, as long as they can positively contribute to the Lean UX workflow.

BrewLife rapid prototype

The initial wireframe sketches prepared for the BrewLife website by Matt (Creative Director), Susan (ACD, Content Strategy), Mason (Technologist) and myself (UX).

BrewLife wireframe

Following internal review of the sketches, I created medium-fidelity wireframes in Omnigraffle that Matt and Mason used to build out creative and development, respectively.

Collaboration is invaluable in responsive web design as the entire presentation layer—content, usability and layout—can be optimized based on browser display, leading to hidden content, increased tap areas (buttons) and re-prioritization of messaging/call-to-actions. Content optimization decisions should be addressed by each lead—content strategy, UX and creative—in order to ensure a consistent strategy across the experience.

Brew Website

The BrewLife website in desktop, tablet and smartphone sizes with all content shown across device formats.

Healthbox Responsive

The Healthbox website removes images and section navigation in smartphone display.

In summary, responsive web design is a truly integrated process requiring all disciplines—UX, creative and technology—to collaborate for the entirety of the project. In the traditional agency model, account and planning/strategy teams often establish the overall project framework; responsive web design adds creative and technology teams as key stakeholders in initial conversations, as planning requires decisions that involve all practices.

 

(1) Website experiences include Healthbox, the BrewLife website and a product site scheduled to launch this fall.

(2) Lean UX: Getting Out of the Deliverables Business, Jeff Gothelf, published by Smashing Magazine (March 7, 2011)

(3) Agencies scope project costs based on the number of deliverables shared with clients, which is partially responsible for the adoption of separate phases and the need for high-fidelity UX and design deliverables.