Thinking Outside the Box with Design and Code

Our team was inspired by talks at Smashing Conference 2017 that presented unique approaches to everyday design challenges.

Smashing Conference, hosted by Smashing Magazine, comprised of a series of workshops and presentations by industry experts. Topics ranged from UX/UI design patterns to technical discussions on front-end development techniques with CSS, JavaScript, and SVGs.

Here are our team’s top takeaways from the conference that will help to inform our interactive design approach and process at Maga Design.

Design Systems FTW!

Several speakers focused on pattern libraries and design systems: storing and sharing modular, repeatable components to build digital interfaces. What makes this mission critical? Teams are able to save time and stakeholders to save money.

Design systems create a shared vocabulary across teams and enable faster feature development via reusability. However, they can be costly and difficult to maintain, so it’s worth examining specifics to your organization—including team size, brand maturity, and goals—before devoting resources.

At Maga Design, digital design systems are a key consideration as we scale our interactive practice.

Image uploaded from iOS (2)

 

Enable Intuitive Data Storytelling

There are many frameworks and tools available to visualize big data (e.g., D3), but we shouldn’t let these technologies constrain our approach to data viz. Combining and transforming chart types can lead to unique solutions tailored to specific data sets, use cases, and audiences.

Despite the explosion of big data, quantitative methods like surveys and site analytics can be dangerous if we rely too heavily on them—human error, biases, and interpretation can skew the real story. We can’t overlook the importance of understanding human behavior to inform design decisions.

Performance = Perception

In the last 15 years, the average size of a webpage has exploded while our expectations for page load time continues to shrink. So how do we manage effective performance against technical constraints?

Optimize the user’s perception of load time. Most users won’t notice changes that affect page load time by less than 20%. This threshold can be achieved by increasing the time the user spends in the active phase. For example, YouTube doesn’t wait for a full video to load to start playback, which decreases the amount of time spent passively waiting.

Image uploaded from iOS

Accessibility

Designing and developing for accessibility were common themes throughout both days. Despite how far we’ve come with web development, designing for visually impaired users and screen readers is still overlooked.

The (<a href=”#”) and buttons (<button>) elements links are often misused and misunderstood. Many designers use the two interchangeably, using CSS to achieve a specific style, which is just one example of unnecessarily compromising on accessibility and hindering users with screen readers.

 

We <3 San Francisco

Loaded with insights from the conference, we put our “Ever Curious” rubber to the road and took advantage of every spare moment to explore the Bay. Juraj, our SF-based designer, led us on a tour to see the redwood trees at Muir Woods National Monument early one morning. We made pit stops at Equator Coffee in Mill Valley and the breathtaking Hawk Hill, a lesser known but unbelievable vantage point of the city.

After the conference, we had a team jam session at the Maga Design studio in the Presidio, a beautiful location that put DC commutes to shame.

To be considered among a vibrant community of designers and developers in Silicon Valley was a great honor. We left with a lot of expert insights from SmashingConf and had a smashing time in San Francisco.


Learn more about the presenters:

Maga Design’s Collaboration with AIGA’s 2016 Design Census

IMG_8690

We are excited to share with you Maga Design’s contribution to the AIGA 2016 Design Census results, released January 2017. The Maga Design team, under the direction of Rebecca Williams, VP and Chief Creative Officer, was inspired by author Dan Pink’s perspective about factors that influence employees’ motivation at work given its changing landscape. The team mapped a number of Design Census survey questions against Dan Pink’s Intrinsic/Extrinsic framework to create insightful data visuals that tell the story of what drives designers. http://magadesign.com/aigadesigncensus/

The American Institute of Graphic Arts (AIGA) enlisted Maga Design, as well as other partners, to visually interpret the survey responses from over 9,000 designers. The survey, opened December 1–16, 2016, captured everything from salary range to demographics, locations, disciplines and industry-specific challenges—even how much coffee designers drink each day.

IMG_8689

The Maga team is made up of those who believe in the work of author Daniel Pink, and his perspective on the ways humans are motivated in the 21st century. The team mapped a number of the Design Census questions to Pink’s motivation framework. What emerged are a set of considerations for companies looking to attract and retain top design talent. Understanding “What Drives a Designer?” is critical for creating a competitive advantage in a rapidly changing world.

Tulsi Desai, the Art Director at Maga, shared that while the data was straightforward, the challenge was finding a compelling story that emerged from it.  The team came across a common theme among the questions and the data points, that it was important for designers to balance practical things like compensation and a defined work role against the internal motivators like a sense of purpose and feeling good about the value one brings to the table.  She says, “While not all designers may think this, we certainly feel most contributing and forward thinking designers feel that way about the work they do.”

 



IMG_8688

 

 

What’s in the Maga Design Library………?

By Caroline DeSantis

Maga Library's Bookcase

A New Year’s resolution may not be at the forefront of our minds when turkey recipes and gift lists are competing for attention as the holiday season approaches.  However, the final months of 2016 provide the perfect opportunity to stop, reflect, and find ways to improve upon our work.  What better way to do this than picking up a book that we have in our Maga Design Library, which the ever-curious Magateers use as a resource to find new ways of approaching their work and life?  If you’re looking for something to inspire you as 2017 rolls in, take a peek at some of the Magateers’ suggestions and curl up with a good book or give one as a gift

Start with Why by Simon Sinek is a book RJ Clark will pick up at least once a year to help him get to the heart of what inspires his work.  A great read no matter if you’re a design strategist, graphic designer, project manager, or content strategist.

A collection of Dan Roam’s books about how to start thinking visuallyMaga Library to solve problems such as Back of the Napkin, Show and Tell, and Draw to Win are cornerstones for Magateers.  If you haven’t picked one up, 2017 should be the year to.                                                                                                                      Sabeen Khan recommends Digital Crown: Winning at Content on the Web by Ahava Leibtag to inform impactful content strategy with a marketing eye, plus the author shares plenty of entertaining case studies and faux pas.

Caleb Sexton, Maga’s book guru, just started reading Peter H. Diamond’s Bold: How to Go Big, Create Wealth and Impact the World.  Diamond offers a guide to being one step ahead of the future with exponential technologies, moonshot thinking, and crowd-powered tools.  It’s a book that will definitely help you be a part of the vanguard.

Rachel Friedmann read The Happiness Advantage: The Seven Principles of Positive Psychology That Fuel Success and Performance at Work−she ended up eating more candy because of this book, because candy stimulates more creativity.  Arguably a sweet read.

After attending the 2016 Gartner Symposium and ITxpo this year where Linda Kaplan Thaler was a keynote speaker, Jaime Lennen
decided to start
Grit to Great by Linda Kaplan Thaler and Robin Koval. The book explains why those who possess grit (Guts, Resilience, Initiative, and Tenacity) outperform those with higher IQ’s, infinite financial resources, or higher ed degrees.  Grit is something that everyone can have, and not only applies to the working world, but also in our personal lives and relationships. So get ready to supercharge your career in 2017 with this book.

If you want a book to impress and imply how smart you are, Adrienne Betenbaugh recommends reading Malcolm Gladwell. In particular Adrienne loves The Tipping Point and Blink. But really any will do.

For the cool creative kids, Jared Adams suggests Design as Art, by Italian futurist Bruno Munari.  It talks about the importance of beautiful design in the world around us, and gives a little bit of a critique as well.  Another legendary designer book is Aaron James Draplin’s Draplin Design Co.: Pretty Much Everything.  He chronicles his work and shares funny commentary about all that goes into to creating memorable designs.  A bonus is that Jared’s AIGA chapter is in it.  If you’re looking for a book with great visuals, The Shape of Design by Frank Chimero is a great pick, and you can read it online for free.

For digital techy peeps, Pete Ziff recommends Narrative as Virtual Reality 2 Revisiting Immersion and Interactivity in Literature and Electronic Media by Marie-Laure Ryan–storytelling for virtual reality, that’s new!

Maga LibraryFinally the boss had to add his Wednesday Night Book Club selection.  Scott Williams recommends Decisive by the Heath brothers, a read that will leave you with less agony over making decisions.  Illuminate by Nancy Duarte is also on his current reading list.  It is a guide to not only envisioning world-changing ideas, but also how to get people to change the world with your ideas.  And finally, anything by Seth Godin will serve you well in the New Year.

Whether you pick up a new book or choose to re-read a favorite, any of the books in the Maga Library are tools to explore the ever complex world we work in to help us better execute the visions we have for ourselves and our work at Maga.  

Become a Data Bard in 5 Leaps

 

By RJ Clark

data-bard-01-1

In medieval Gaelic and British times there was a person whose sole job it was to compose poems, songs or stories about their employers life (usually a monarch or nobleman.) These story tellers were called bards and they are credited to prolonging the oral history and cultural times of these groups.

Today, while no one holds an official title of bard, the need for capturing what’s happening in an organization, project or experience is still critical. The modern poetry of the technological era is data.

Collecting and interpreting data is a driving force for modern businesses and organizations, but as data reaches higher and higher levels of complexity, it can seem less and less connected to our daily lives and the story becomes harder to tell. Data visualization can bring multiple layers of complexity into a single story. It is up to those charged with telling those stories to turn important ideas into epic memorable moments.

  1. Go Slow to Go Fast

Many data analytics projects happen under a time crunch. It is very tempting to dive in and start collecting information. But there are a few steps that MUST be taken first.

Starting off with a strong plan saves time on the overall project. Reworking and editing won’t take up so much  time if you have good planning. If a step is missed, due to rushing through the project, there may be no way to go back and recover a lost opportunity.  At a minimum, data planning needs to:

  1. Establish what the user needs to learn or accomplish through this activity.
  2. Match the goals to all possible data that might be collected to accomplish those goals.
  3. Use a collection format that is easy to use for both those collecting data and the analysts that will need to turn that story into insight down the road. It will also need to be flexible enough to add new fields and make new requirements as the research gets underway.
  4. Ensure good data quality. This will save time and give more options down the road.
  1. Catch it All!

The preparation is complete. The plans are set. Now it is time to start gathering data.  This could be research, an event, a information mining activity, a series of interviews, a survey, or almost anything that needs to be broken down for study.

Now, it is important to avoid tunnel vision. The task of collecting or mining a significant amount of data can be daunting, and it is easy to focus on understanding and recording only the minimum to meet the needs of a project. Oftentimes the most important points are the unexpected ones that will reveal the real value of the project.

  1. Put on Your Hunting Hat

There may be basic questions that can be answered with simple counts and averages. It may be that the relationships between different areas need to be examined very closely to find high value insights. Experiment with combining different areas and fields to look for correlation vs. causation. This is where simple data tools like Microsoft Excel’s Powerpivot really shine.

  1. Get Dynamic

It might be tempting to turn your data into graphs, but everyone knows what a graph looks like. And they are not very interesting. Graphs are excellent at conveying limited amounts of information in a clear way, but many problems today have increasing degrees of complexity that can’t be shown in a simple graph. By introducing dynamic elements to link elements of data, we can then move into the realm of storytelling. If you want to see a great example of this in action, check out this awesome Ted Talk by Hans Rosling.

  1. Make it Shine

Now you have the story together that your data will tell, but don’t stop now! Just like a wonderfil tale, it needs a setting. Great stories are going untold because they lack this vital human step. Advanced Visualization will make your data story easier for your audience to understand, more engaging and, perhaps most importantly, more memorable. An experienced graphic artist knows how to make visual information speak to a specific audience to convey a specific message. Just like with great storytelling, there are layers of meaning and finesse that are vital to transform data into an epic story.

Pokémon Go Augmented Reality Caught Us All: Here’s Why You Should Get Catching

Contributors: Maga Design Team Members
Graphic designed by: Afsaneh@magadesign.com

pokemon_go-v5The most talked-about, downloaded, acclaimed, and debated hit of the summer isn’t the latest Kardashian drama, but rather a mobile game reminiscent of years gone by, Pokémon GO. Due to the element of nostalgia, opportunity for exploration, and user connectivity, this app has created an explosive user base of fans (and skeptics) that will likely change the way we think about the future of gaming.

With the average gamer searching for Pokémon companions for roughly 45 minutes a day, the questions must be asked, “Why?” and “Who?”.  While the “why” is the most heavily debated part of this game, the “who” is actually the most interesting part of this 2016 application phenomenon.

Typically when a game (or similar artifact of mobile society) is released to the public, its adoption follows the typical life cycle bell-curve that we studied in our business and marketing classes. Innovators first, early adopters second, and the combo of early majority and late majority filling up the middle and end of the curve.

What this game did is make Augmented Reality technology, or AR, (which is still relatively “new” in terms of its mass consumption) easily digestible (i.e, fun and easy to use) for the larger percentage of the population. It did this by tapping into the ways we most commonly use our devices – GPS and our cameras, combined with a multigenerational franchise. Pokémon Go didn’t follow the typical curve, it seemed to explode all at once with all types of users adopting.

To note, Pokémon Go isn’t the first geocaching mobile game, nor is it possibly the best. Niantic, the developers of Pokémon Go, previously made another app known as Ingress. Not surprisingly, the gameplay for both apps are very similar, to the extent where much of the real-world data from Ingress has gotten pulled into Pokémon Go. In fact, Ingress could arguably be superior to Pokémon Go in terms of usability. In our opinion, Pokémon Go has considerable server issues and is rather limited in terms of what players can do. Much of this could be underpreparedness for the bandwidth needed for its release. Ingress also has been around for about three years and has undergone substantial gameplay tailoring.

Understanding “who”, we have to toss a nod to the favorite Pokémon cartoon characters like Pikachu. Now that the Pokémon franchise is roughly 20 years old, we find the average age of players are in their mid twenties to early thirties. These are the users who remember Pokémon from its early days when the first games were released for Nintendo’s Game Boy, and a card game and children’s show followed shortly after. We have an inherent desire to experience parts of our youth again, in just more relevant ways.

Of course there are younger and older people playing this game too, which takes us back to the massive impact this game has had on the user adoption process of gamification. If it was any other character-based game released (instead of using characters from a popular franchise), would the impact have been the same? Maybe. But, for now, only time will tell as the stage has been set for mass adoption of mobile AR gaming all in part to a little yellow-orangish creature.

But is the impact of Pokémon Go something that many are misinterpreting?

Some may give it a negative spin like it’s another distraction, but the core meaning of what this app has is truly something special. It’s creating an experience for people to go outside and play a truly social game, not social in the sense of over the internet (like Xbox Live and other services) or physically near each other. The placement of Pokémon in the real world has increased traffic to landmarks and cultural locations – resulting in positive and negative results.

The app tears AR away from its seemingly limited application to gaming and artificial intelligence, broadening it to entertainment, fitness, and possibly a lot more. Pokémon Go feels comparable to arcades of the past, only this time the arcade is everywhere. No doubt,  businesses will figure out how they can profit from leveraging in-game advertising and purchases to entice ‘trainers’ to their business.

While many naysayers are torn on the “why” people are out looking for Pokémon instead of, say, picking up litter, there’s something to be said about a game that unifies and bonds complete strangers across cultures and age brackets in public spaces. The Pokémon journey is a new frontier in convergence and is the start of bigger and better AR experiences to come.