Archive for the ‘Design’ Category

Requisite to the work of a designer, whether in-house or for an agency, is communicating effectively with teammates or clients who are not fluent in design. Bridging this communication gap can be difficult, and when done poorly, results in compromises that decrease the quality of the project. When done well, those involved can each feel a sense of pride in their contribution to the project.

In working with all sorts of clients, marketers, and product teams, I’ve developed a few strategies that make communication more effective:

image_blog

  1. Truly listen to their concerns

  2. A project manager or marketer will have goals that are not related to design at all — for example, lead generation or revenue. Nevertheless, it’s important to try to truly understand them and be a partner in helping them achieve their goal. A design which doesn’t do that isn’t serving its purpose. Instead of becoming frustrated by constraints, work to understand as much of the context as possible. When explaining your design choices, you should be able to justify how those very choices are accomplishing your partner’s goals. Framing them in this way, as a means to an end for the project goal, creates a greater sense of collaboration. When contradictory requirements are manifesting themselves in a confusing design, raise the issue in terms of the overall goal — how the contradicting requirements might be hurting the project, not just your design.

  3. Distinguish problems from solutions

  4. Steer conversations back to the goals or problems and away from specific suggestions for how you should fix them. If your design isn’t supporting the goal yet it’s important to fix it — let your partner know that you’re committed to supporting the goal. But let them know too that it’s your expertise for how to achieve it visually.

    If they have a lot of specific suggestions try to get to the bottom of why they think those solutions would be best, and talk through ways to get the project where they want it. If they are asking for the text to be bigger, or for more energy, ask what the underlying motivation or thought process is. Then, try to accommodate that.

  5. Learn their language

  6. It helps to learn non-designer visual vocabulary. If, for instance, your partners give you feedback like, “make it more fun,” ask if they have examples of “fun” — paradigms through which you can better understand their critique. This can be helpful in both communication and revision. Alternatively, with concrete examples, you can explain why the “fun” aspects of that design would or wouldn’t make sense in the context of your project. Learning what each person’s vocabulary is can help find a solution that best solves his or her problem.


  7. Respect their first impression

  8. When the design is finally out in the wild, you won’t be there to answer questions about it. If a non-designer finds something difficult to understand or unintuitive, don’t brush that aside. Not every non-design opinion will merit a change, but hearing those opinions helps you understand what the trade-offs of each decision are. If the trade-off is too great, it’s time to revisit the design.

You’ve heard this story before—boy graduates college, boy moves to New York, boy starts working at a tech startup full of cool nerds, boy finds a career path.

Read the rest of this entry »

The Great Font Debate

September 23rd, 2015 by Ashley

A little under a year ago, the design team at Chartbeat began planning an overhaul of our public facing website. The redesign was a big commitment and served as a catalyst for a few global design changes we had been meaning to make. One of these was introducing a serif that could double as a body font and take the place of our slab serif headline font. At the time we were working with Jubilat as our main display font, and Proxima Nova for pretty much everything else.

Why We Switched

Jubilat was causing problems. Despite having a wide range of weights, none of them felt quite on brand. At light weights it was too reminiscent of Martha Stewart Living, a strange association for an analytics company. At heavier weights, it began to feel — well — heavier and out of step with the clean, smart font we wanted.

Screen Shot 2015-09-22 at 9.23.22 AM
Screen Shot 2015-09-22 at 9.23.35 AM
We briefly thought about removing Jubilat from use and just using Proxima Nova across the board. This thought barely made it onto paper, however, considering the near-ubiquity of Proxima Nova. Using it for headlines would have sacrificed too much brand recognition.

So the hunt for Jubilat’s replacement was on.

Requirements We Had

We had two types of requirements: brand and technical. Our brand requirements were that the font felt smart, approachable, youthful, and clean. Our technical requirements were that it worked well at both display and body sizes, was visually compatible with Proxima Nova, and was flexible — meaning a wide range of weights and an attractive italic.

Fonts We Considered

Each member on the team went on a hunt through Typekit and pulled the fonts they thought fit our requirements. This generally meant we were looking for a humanist serif, with relatively uniform line weight, and a generally wider width.

Our main contenders were Merriweather, Calluna, and Rooney.

Screen Shot 2015-09-22 at 9.24.06 AM
Screen Shot 2015-09-22 at 9.24.10 AM
Screen Shot 2015-09-22 at 9.24.15 AM
To find the different strengths and weaknesses we tested out each of the fonts by using them in existing designs, stress testing them in use cases like landing pages, white papers, and Twitter ads.

Screen Shot 2015-09-22 at 9.24.40 AM
Screen Shot 2015-09-22 at 9.24.49 AM
Screen Shot 2015-09-22 at 9.24.55 AM

What We Decided

We looked over our stress tests with the full team and decided on Merriweather. Although Calluna was a beautiful and refined font, it ultimately felt less youthful and approachable than Merriweather. And even though Rooney hit it out of the park with its approachability and youthfulness, it ultimately felt less clean and smart than what we were looking for.

Screen Shot 2015-09-22 at 2.44.47 PM

What We Learned

  • Know your needs. Identifying our pain points helped in our search for the fonts, and helped us identify where we could make trade-offs.
  • Have a variety of voices in the room. Balancing brand and technical needs would have been tough without designers sitting alongside the head of brand.
  • Test as much as you can. There were a couple false starts, and making the final call was tough. But seeing things in context made all the difference.

You can see Merriweather in full swing on the Chartbeat Quarterly.

What’s On Our Desks

August 18th, 2015 by Ashley

Screen Shot 2015-08-18 at 2.12.10 PMThis week on the Design Blog: Find out what book(s) each member of the design team keeps on their desks for reference, fun, and inspiration


Renee
Envisioning Information  by Edward Tufte

Ashley
The Design of Everyday Things by Don Norman

Chris
HTML & CSS: design and build websites by Jon Duckett

Janny
Thinking with Type by Ellen Lupton
Infographics Design by BNN

Avi
Universal Principals of Design by William Lidwell, Kritina Holden, & Jill Butler
Type on Screen by Ellen Lupton
The Art of Tim Burton by Leah Gallo

“I am constantly inspired by the artistic concept of Tim Burton. Having the work of those whom you admire near-to-hand is so important to me.” — Avi, Senior Marketing Designer.

Michael
The Wall Street Journal Guide To Information Graphics by Dona M. Wong
Just Enough Research by Erika Hall
The Shape of Design by Frank Chimero

And this week’s bookworm winner: Collin!
Universal Methods of Design by Bella Martin and Bruce Hanington
Strange Plants by Zioxla
Typographie by Emil Ruder
Vampires in the Lemon Grove by Karen Russell

Editor’s Pick: “Vampires in the Lemon Grove shines. It makes you want to jump up and sing, to spend the rest of your life trying to be Karen Russell.” — Jared, Marketing Associate.

The Elements of Typographic Style by Robert Bringhusrt
Designing Information by Joel Katz
Information Dashboard Design: Displaying Data for At-a-Glance Monitoring by Stephen Few
Resonate: Present visual stories that transform audiences by Nancy Duarte
2013 Feltron Annual Report
Fox 8 by George Saunders

P.S. Want a desk of your own? We’re hiring: Chartcorps, Product Design, and Marketing Design. Check out the openings here.

Life After WIMP

July 23rd, 2015 by Sam

Since Xerox’s PARC and Apple’s Lisa user interfaces hit the scene, the WIMP (windows-icons-menus-pointers) interaction model has become a universal standard. This past Hackweek, fellow designer and Chartcorps member Sam Chieng, front-end developer Aliya Robinson, and I decided to dive into UI’s history and potential future.

Here’s where our week’s investigation took us:

Sam

I was particularly intrigued by how we’ve arrived at the certain interfaces that we’re so accustomed to today. How did we decide on specific UI elements as “the best”? How does this innately connect to how humans learn and perceive information? Are windows and pointers the best representation of how we interact with a system?

As I began researching, I came across a few papers published in the early ‘90s by Jakob Nielsen on Human-Computer Interaction. Nielsen analyzed the dramatic change in interaction when computers transitioned from the command line to a modern GUI. The latter allowed for object-oriented structuring, or direct manipulation, which was based on childlike primitives of hand-eye coordination—for example: dragging a file icon into your trash icon, as opposed to typing ‘rm foo’ in a command line. In the end, this switch made new user adaptation significantly easier.

Direct Manipulation is a concept with which we’ve become so familiar today (particularly in WIMP models), but Nielsen explains that there are many interaction levels involved in a single task.

Screen Shot 2015-07-23 at 10.06.04 AM

The graph above illustrates the multiple layers that can be applied to something as simple as deleting a few sentences in a text editor. It begs the question: can we make this interactions even more “direct”?

This is where newer interactions come in. Touch screens and wearables have made interacting with technology more intuitive and user-centric. The focus is now on controlling the task, not the computer, to get to your goal.

Another paper in 2000 by Michel Beaudouin-Lafon, a professor of Computer Science at University of Paris-Sud, introduced methods to compare the effectiveness of different interactions with direct manipulation. Evaluating how classic WIMP elements (Menus and Scollbars) compare with newer interaction techniques (Graspable Interfaces), Beaudouin-Lafon argued that the latter had better Indirection, Integration, and Compatibility—3 properties necessary to evaluate efficiency.

Most remarkable of all was how accurately Nielsen and Beaudouin-Lafon had predicted future interactions and interfaces we now use today; all their papers were published before the iPhone was introduced in 2007! I’m excited to see the new possibilities and developments we’re working on today in the discipline of Human-Computer Interaction, and how this extends to better post-WIMP design.

Aliya

My goal for this project was to learn about the Leap Motion controller and how it works. If you don’t know, the Leap Motion controller is a device that responds to hand motion, manipulating objects on your browser, visualizer, or device. Think of it as a Wii without a remote… and in 3D! As I dug deeper into Leap Motion code, I found that there are many plausible avenues for utilizing the technology. Ultimately, I found that the most accessible route, IMO, is to take DOM elements and animate the CSS transform properties, after creating a 3D object with CSS3 transform properties.

For example, to create a cube you can simply use the following HTML/CSS code.

Screen Shot 2015-07-23 at 10.11.26 AM

Or in HTML:

Screen Shot 2015-07-23 at 10.12.56 AM

Which gets you: Screen Shot 2015-07-23 at 10.14.08 AM

Then to manipulate the object with Leap Motion, you will use the following code snippet.

Screen Shot 2015-07-23 at 10.19.56 AM

In this configuration, the circleElem is the cube and setTransform method takes the hand position and hand rotation from Leap Motion. Then, the programmer can dynamically change the transform style of the cube inside of this function.

Screen Shot 2015-07-23 at 10.21.28 AM

All in all, it’s fairly simple to get started with plain DOM elements as opposed to finding or creating 3D models with any of the popular 3D modeling softwares currently available. It’s promising, with CSS3 Transforms, CSS Shapes, and modern browsers’ SVG, – we’re embarking on a nearly real 3D interactive experience for the web.

Ashley

My personal interest was in connecting skeuomorphic digital UI with the real-life counterparts (for example, a button online that looks three dimensional is visually mimicking a physical button). I decided to focus on hover states. Partly because unlike things like scrolling or clicking, they stand out as an interaction that in real life would really appear to be magic. To bring hover states into the real world I constructed a panel covered with a grid of squares cut from thick board.

hover-board-grid_720
Under roughly half of the squares were magnets. Half of these had northern polarity, while the other half had southern polarity. To interact with the board users put a magnetic controller (what you might call a digital era finger puppet) on their finger, and then hovered their hand across the board.

controller-hover_720

This demonstration let the user experience both the standard visual feedback of interactive elements ‘hovering’ to show their interactivity, and also an entirely new sensation when passing their hand over repellent magnets (the feeling was similar to running one’s hand over a bump). The experience was pleasant and novel, and my hope would be that hardware technology in the future can start to incorporate more instances of tactile feedback.

Although the three of us each took three different lenses for examining UI, we all reached a similar conclusion: the future of UI is rife with possibility. That means understanding the past, but always challenging its conventions. That means embracing new technology, but critically evaluating its use and construction. And that means building bold, new stuff.

This post is just a short overview of all the crazy and wonderful things we learned this past Hackweek. To see more of Hackweek in action, be sure to check out chartbeat.com/labs.

P.S. Want to join our team? We’re hiring: Chartcorps, Product Design, and Marketing Design. Check out the openings here.