Browsed by
Author: Paul Carrubba

What is Blockchain Marketing and How Will it Affect B2B Sales?

What is Blockchain Marketing and How Will it Affect B2B Sales?

Photo by Mike Alonzo on Unsplash

Blockchain marketing is an industry that is still currently in its infancy. It enables the direct communication and relationship between the product producer and the consumer. It disrupts the current structure which includes many different go-betweens and agencies which represent companies to spread their message. In the future, the blockchain will enable companies to make direct outreach by merely buying tokens access marketing features. There are over 5,000 big time marketing firms today that help companies to reach clients. Blockchain marketing will disrupt many of these over the next few years.

Advertising

The ad industry uses many different platforms and software systems to build the content that we all see. The infrastructure and expertise are costly for individual companies to build out and as a result, an array of third-party agencies do the work.

A company called Papyrus is attempting to change all of that through its tokenized infrastructure. The firm allows companies to freely use their ad infrastructure in exchange for tokens that get stored on the blockchain. They have set up a cycle in which businesses receive Papyrus tokens as payment. That increases transparency, efficiency and allows them to build out more ads more quickly in the future.

As the cost to place ads decreases, firms will benefit in two ways. They will be able to produce many more ads targeted explicitly for the right audience. They will also become more profitable as their ads become more efficient and spend less on each advertisement.

Email Marketing

Another mainstay of the marketing industry is email. These are sent out in bulk by large providers using sophisticated targeting algorithms. They are tracked, sorted and aligned with CRM systems. Unwanted spam emails swamp most consumers. Now, that will change as well.

In the future, marketers will have to pay to email individuals who will accept tokens from Earn (formerly 21.co). When people get paid for their time, they’re much more likely to read and respond to these emails after they receive the blockchain tokens. Now, any company will have the power to reach any consumer who wants to make money and accept these coins. However, the more valuable the consumer, the more expensive the token will be to reach them. That means no more spam. Only the appropriate amount of email will reach you.

At the same time, you don’t need to aggregate email contact info into massive marketing systems. Instead, they get segmented and tracked automatically by the coin transactions.

Market Research

The ability to research a target market and identify the exact niche that will be most profitable in the future is critical. No one person can accurately predict how a market will evolve. This has been a problem for product development teams and marketers forever.

However, that problem may finally be getting a solution using the power of crowdsourcing and the blockchain. New blockchain organizations like Gnosis and Augur are creating crowdsourced market research and prediction models. Each places a bet using a token on a particular outcome. If they are correct, the value of their token rises and they make more money. As more and more people find a specific result more likely, they will invest at elevated rates in that outcome. Companies can observe this change over time and then dedicate more resources towards the products and services that prediction markets rate as the likeliest outcome.

Want to chat innovative marketing tools and tech (and how we make them work for you)? Drop us a line.

What’s CSS Grid and Why Should You Care?

What’s CSS Grid and Why Should You Care?

Photo by Patrick Hendry on Unsplash

CSS Grid Layout, now supported in all major browsers, is rapidly becoming an essential tool in the front-end developer’s kit. So let’s take a good look at what this emerging framework is, how people use it, how it differs from other frameworks and how it’s bound to change the design landscape for good.

What is CSS Grid?

The CSS Grid Layout is the newest and most advanced CSS layout framework. The defining characteristic of CSS Grid is that it is inherently two-dimensional, while standard CSS layouts are only one-dimensional. Breaking out of the 1D limitation opens a world of possibility for designers that will take years to explore fully. Meanwhile, for many designers, CSS Grid is the long-awaited solution to the problem of designing highly sophisticated responsive page layouts in HTML and CSS without resorting to ad-hoc solutions that almost feel like hacks, often involving loads of JavaScript, PHP and more.

How you can use it

As designers use CSS Grid Layout in more projects every month, the new framework is rapidly going mainstream. As of Fall 2017, it’s already a safe bet to use CSS Grid for a significant fraction of your front-end projects, especially if the project is long-term. If you’re looking for great examples and templates to give you some inspiration, there’s no better place to start than Grid by Example, put together by Rachel Andrew, the brilliant designer responsible for most of the code in CSS Grid.

Difference from Bootstrap and Flexbox

For many designers, Bootstrap and Flexbox have been the solution of choice when facing the challenge of building responsive layouts, given the limitations of HTML and standard CSS.

CSS Grid vs. Bootstrap

Because of Bootstrap’s status as the leading grid framework, many designers are comparing it to the web-native newcomer: CSS Grid. Although Bootstrap doesn’t suffer from some of the backward-compatible concerns of the still-emerging CSS Grid Layout, it’s widely believed that CSS Grid is the future of layout design all the same. Not only is CSS Grid perfectly capable of reproducing nearly any layout built with Bootstrap, it often does it in a more efficient, elegant and open-ended fashion.

CSS Grid vs. Flexbox

Many CSS experts hold the position that CSS Grid Layout and Flexbox are complementary solutions that designers can and should use together. CSS Grid is at its best when building an overall 2D layout, addressing both rows and columns at any level of complexity. Flexbox, in turn, works well for 1D fine-tuning within the overall 2D layout to align and position the smaller pieces of content concerning a single row or column.

How CSS Grid is changing the design landscape

Now that it’s possible to efficiently and elegantly design highly responsive sites from directly within a 2D CSS framework, the bar for building responsive sites has is dramatically lower. We are likely entering an era in which highly responsive sites reach ubiquity almost immediately, and designers begin exploring far more sophisticated layouts that will redefine the notion of responsive altogether.

Lingering challenges

Like every emerging design solution, even one on its way to becoming the new standard, the CSS Grid Layout does face a few stubborn obstacles that may prevent it from becoming the most favored solution for at least a few more months. The most notable issue is browser-compatibility. Although CSS Grid is now compatible with the latest versions of all the key browsers (with the last major holdout Microsoft Edge finally announcing compatibility this month) millions of people still use old versions of browsers, and there are always situations, such as corporate legacy systems, that could raise justifiable concerns. Some have suggested that the answer is to have your CSS Grid-based layout automatically serve up the mobile version of your site in such situations. However, if this (or any other smart workaround) won’t work for you or your clients, then you might want to wait a few months before making CSS Grid your default design solution. All the same, it’s time to learn this emerging framework inside and out, as it’s only a matter of time before CSS Grid plays a big part in your design decisions.

The importance of a new dimension

The CSS Grid Layout is quickly catching on, and forward-thinking designers are beating the drum and singing its praises. This wouldn’t be happening if it wasn’t the case that the extra dimension provided by CSS Grid is far more than a responsive-layout expedient. Rather, it’s a vehicle for a more natural and elegant approach to layouts as a whole.

Wanna nerd out on design and dev? Hit. Us. Up.

A (Gentle) Crash-Course on Empathy Mapping

A (Gentle) Crash-Course on Empathy Mapping

If you want to create a positive experience for your users, it’s absolutely essential that you understand their needs and feelings. If you’re not taking into account the humanity of your users, you’re doing it wrong. A process called “empathy mapping” can help you get into their heads and hearts to find out what makes your users tick. Here we cover what empathy maps are, where they fit into the overall UX design process, and most importantly, how to create them.

Your users’ needs and feelings: why they matter

It doesn’t require a Ph.D. in psychology to know that your users are driven by a complex of conscious and unconscious motivations. Furthermore, their thoughts and feelings do not fit neatly into a linear format. Your users are not just happy or sad when they first encounter your site/app/product, but confident or fearful, hopeful or suspicious, and so on, often embodying many of these internal states at the same time. So the challenge becomes how to visualize this psychological complexity without losing sight of the unity of your user. Enter empathy maps.

Empathy maps

What they are

Empathy maps are visualizations of the likely feelings, thoughts, actions, influences, environmental factors, pain-points and goals of your users. A general empathy map captures the internal landscape of your users or customers as a whole, but you can also create a series of specific empathy maps to capture particular user or customer segments.

When they’re most helpful

In short, at the beginning. Of course, you can’t create an empathy map until you know something about your users. So you’ll have to wait until after the initial user research stage. But once you’ve done your research and started working on user personas and stories, the time is ripe to try out a few empathy maps with your team.

How to create them

Empathy maps require little to no design skill (evinced by that drawing at the top of the post). Otherwise, following the classic approach, draw something resembling a face (perhaps a smiley if you’re at a total loss for inspiration) in the center of a large whiteboard. Use four diagonal lines radiating out from the face to divide the whiteboard into four equal areas, positioned above, below, to the right and to the left of the face. Although you can come up with your own labels, the area above the face often gets the label THINK and FEEL the area below SAY and DO, the area to the left HEAR, and the area to the right SEE. Many teams also add a PAIN area in the lower left and a GAIN area in the lower right in order to add another useful dimension to their empathy maps.

Roughly speaking, these labels are shorthand for various aspects of a user’s psychological landscape with respect to your site or app:

  • Think and feel = What the user is consciously experiencing and pondering when encountering your site or app.
  • Say and do = The users routines, habits, and activities as they relate to your offering.
  • See = The user’s general environment, including friends, coworkers, the marketplace, distractions competing for their attention, etc.
  • Hear = Statements “in the air” influencing the user.
  • Pain = Pain-points, obstacles, or challenges the user faces.
  • Gain = The user’s goals.

With this basic template in place, give each team member a stack of sticky notes and ask them to write down whatever comes to mind when they consider the various aspects of the user’s experience (represented by the labeled areas on the empathy map). For example, suppose you’re building a site for buying wholesale clothing online. In the THINK and FEEL area you might have sticky notes that read something like:

  • I’ve never heard of this site, can I trust it?
  • Buying clothes without trying them on first makes me nervous.
  • I hope they have the jeans I’m looking for.
  • Their sizes better be accurate.
  • If they don’t fit, is there an easy refund/exchange policy?
  • Free shipping?

In the SAY and DO area you might have sticky notes that read something like:

  • I’m a bargain shopper.
  • I’m willing to hunt for good deals.
  • I buy direct whenever I can.
  • I tell all my friends when I find a scorching deal.

And so on…

After placing all of the sticky notes in their corresponding areas, the empathy map is complete. You now have a rough-at-the-edges, appropriately messy, yet holistic depiction of your user’s inner world as they come face to face with your site or app for the first time.

How do you feel about empathy maps?

Understanding your users’ needs and feelings is essential to creating a positive experience for them. This is where empathy maps shine. They give your team an opportunity to creatively visualize your users from the inside-out. Generally coming immediately after the user-research stage of the UX design process, empathy maps make great complements to personas and user stories. Their flexible, organic, participatory format also make empathy maps easy to quickly create and re-create with the whole team. At its best, the process of populating an empathy map is like an inverted brainstorming session, where the ideas are not yours, but ultimately those of your future users. And their true motivations, if accurately uncovered, will help drive your design in the direction it needs to go.

Want to find out more about how empathy maps can help you connect with your users more effectively? Hit us up!

What’s Big in UX Design this Year (So Far)

What’s Big in UX Design this Year (So Far)

If you had a brick-and-mortar store, your first concern is usually stocking the products your customers want. But you’d also want an attractive store so you could showcase those products in the best light. You’d also want to ensure your employees were effectively trained to help your customers find what they want—and you’d want to make sure you didn’t waste your customers’ time with long checkout lines. In other words, your products are important, but so is the experience your customers have buying those products—and that applies whether they’re in a physical store or on your website.

Why User Experience (UX) Matters

In 2017, user experience makes the difference between businesses that win and lose. Say you and your chief competitor offer the same products at the same price. If their website loads faster, your competitor is going to sell more than you. If they personalize the buying process and you don’t, they’ll build trust with customers more than you will.

Consider some of these metrics from Hubspot:

  • 39% of B2B and B2C consumers will abandon a website if images won’t load or take too long to load
  • 38% of people will leave a website if the content/layout is unattractive
  • When people have 15 minutes to consume content, two-thirds prefer reading something beautifully designed versus something plain
  • 77% of agencies believe that poor website UX is the number one weakness their clients have

In 2017, user experience matters more than ever, and UX, more than anything else, is what will ensure your business can compete effectively. As UsabilityHub notes:

“UX also continues to be pushed forward by the move towards “experiences” over products. In a more sophisticated market it’s not enough any more to simply have a product. Embracing this thinking enables us to discover new opportunities to empathize, and ultimately improve the experience of users, which will become vital in maintaining a competitive edge in the long run.”

Forward leaning marketers and designers continue to find new ways (and embrace new technologies) to enhance user experience. Here are three big UX trends to watch this year (and beyond):

Chatbots and Voice Commands


Recent advances in smart technology, coupled with enhanced design, have increased the popularity of chatbots and voice commands—hence the emergence of virtual assistants like Siri and Cortana, and the widespread adoption of home interface products like Amazon Alexa. That same technology and design smarts is making its way into an increasing number of business applications. This doesn’t signal the end of the graphical user interface, but increasingly businesses will embrace these conversational interfaces, and designers will compete to create their most effective use.

Virtual and Augmented Reality Experiences

VR is Real

In July 2016, consumers got their first look at Pokemon GO. There have been Augmented Reality (AR) apps and experienced before, but none of them quite entered the zeitgeist like a game where people walk down the street to capture adorable monsters. At the same time, Virtual Reality (something we really, really like) was gaining traction in industries like tourism, building, education and gaming. Once again, driving the increased popular of VR and AR was technology, in this case, improvements in supporting devices like headsets and enhancements in mobile technology.

AR and VR are still in their early stages as regards user experience, but they did make significant advances in 2017. Expect to see designers finding new ways to engage users and improve usability with AR and VR over the next few years.

(Just a pro-tip, if you get into a convo about VR, make sure you’re actually talking about VR)

Pushing the Envelope on Personalization

While the past several years focused on pushing responsive design to accommodate the many ways people access the internet, the next few will be about creating increasingly personalized interfaces. As businesses become more adept at collecting increasingly granular data about user behavior, they’ll use that information to offer user experiences which conform to their demonstrated preferences. This could mean everything from interfaces which adapt color to accommodate color-blind users (and a host of other accessibility issues) to those which adjust text size or theme preferences based on previous usage.

Conclusion

Increased emphasis on user experience is part of a larger understanding among marketers and website designers that metrics like clicks and conversions are more than data points—they’re real people with real needs. The companies that commit to improving user experience are the ones which will build user trust and grow in influence.

If you want to learn more about how our digital strategy, design, content and code, and user experience services will help you drive sales and grow your business, hit us up.

Sketchy Opinions: Content Generator Fills Your Needs and Your Shapes

Sketchy Opinions: Content Generator Fills Your Needs and Your Shapes

Professional digital design tool Sketch may be one of our favorite applications. Not only is the UI incredibly simple to master, but there is also a huge community of developers and designers that make a dizzying array of plugins, templates, and other goodies to make it an even more useful tool. In this HoA series, we take a look at some of our favorites. Today, we’ve got the skinny on Content Generator, a plugin that makes creating placeholder and filler content a snap.

Content Generator is one of our favorite time-saving plugins for Sketch. This free tool gives you a rich array of dummy content to populate your mockups with. Thanks to Content Generator, you no longer need to rack your brain or scrounge around for realistic content. Nor do you have to enter it by hand. Content Generator provides the ways and means to see what your site or app will really look like once it goes live and attracts users.

content generator

To get started, open up the Sketch Toolbox plugin (which you should definitely download if you haven’t already). In the search box, type “content.” The Content Generator plugin should be the first result to come up. Click Install. Simple as that.

To use your freshly installed plugin, click Plugins from the main Sketch menu, then select Content Generator Sketch Plugin. Four categories of dummy-content to choose from will appear:

  • Geo
  • Persona
  • Photos
  • Text

These four categories should cover nearly every dummy-content demand you’ll come across. Suppose, for example, you need a bunch of names, faces, emails, locations and, of course, text to populate your mockup of a community site. Furthermore, suppose you don’t want to use the same names, faces, text and so on again and again.

Without Content Generator or a similar plugin, you will have to scrounge for realistic content and enter it manually. Unless you have hours and hours to spare, we wouldn’t recommend this approach. On the other hand, with Content Generator, the whole process is practically automatic.

insert text

Sticking with the example of designing a community site, let’s suppose you wanted to start with images and names of community members. Simply select the shapes in your sketch page or screen where you want the headshots to appear. Then go to Content Generator and select Persona >> Images. You can then choose female, male or gender-neutral photos. Then watch as all of the fields you selected on your page or screen suddenly populate with corresponding faces. It’s really that easy.

To add names to your faces, select the fields in your mockup where you want the names to appear. Next, return to the Content Generator menu and the Persona category, but select Names this time. Then watch as the fields you selected in your mockup magically populate with names to go along with the faces in your community.

You can continue through this same process to add locations. First, choose a country, then (at least in the case of the U.S.) select State, City or even Full Address.

Although the Persona category is enormously helpful (as is the Geo category and the Photos category), the Text category is where Content Generator gives you the greatest degree of control. The free plugin gives your four options to choose from:

  • Custom string
  • Dummy text
  • Enumerate
  • Time ago

For the purposes at hand, let’s drill-down on Dummy text. Here Content Generator offers not only your run-of-the-mill Lorem ipsum text, but Hipsum (short for “hipster ipsum”), among other options. Suppose your community skews relatively young. Depending on your audience, you might choose Hipsum to populate the respective profile bio fields and conversational content throughout your community mocks. Content Generator makes it easy not only to put something more familiar than Latin in there, but has a Replace feature that makes it easy to mix up the dummy content for a more varied and realistic appearance.

Hipsum Generator

Content Generator: a must-have plugin for Sketch

We’re big fans of Content Generator, and now you can see why. This free plugin saves you tons of time, populating your screens and pages with a variety of photos, names, email addresses, locations and even hipster ipsum if the need arises. Either way, Content Generator will save you hours or even days of effort racking your brain or scrounging around for realistic dummy content. And thanks to the plugin’s tight integration with Sketch, the content will flow directly into the corresponding fields you select. The result: you can now get a quick and realistic sneak peek of what your future site or app will really look like.

To learn more about the wonders of Sketch and how we use it to create beautiful, human-centric designs and mock-ups, hit us up.

More VR apps you need to download…now

More VR apps you need to download…now

Photo by Scott Webb on Unsplash

Yeah, we love VR. The options are endless for creating mind-twisting experiences. That obviously appeals to us as, well, experience designers. But on a more visceral level, what’s more fun than immersing oneself in the metaverse? We already did a round-up of some of our favorite VR apps, but we just had to share some more. Almost all of the following apps don’t even require an expensive headset or ultra-powerful computer to run them–just your mobile phone. So here are more VR apps you need to check out, like, now:

Facebook 360

Remember the eclipse?! This app was one of the best VR apps to experience it. For those who couldn’t travel to the path of totality, CNN teamed up with Volvo to live-stream the eclipse from multiple locations in 4K Ultra HD and 360 degrees. With Facebook 360 and Samsung Gear VR, viewers could experience what the eclipse looked like in seven different time zones from seven different angles.

Expeditions

With a growing list of 200+ expeditions, Google Expeditions is one of the best educational VR apps from Google Cardboard. As the “guide,” you have the opportunity to lead a group of explorers through your adventures. Take a virtual trip to historical landmarks, travel through the infinities of space, or dive into the deep depths of the ocean.

 

 

Insidious


Another Google Cardboard app, Insidious VR has the checks all the horror boxes. Tension and suspense build with sinister sounds, eerie signs, and, of course, heart-skipping jump- scares. Horror, as a genre, has been extremely successful with VR, and apps like Insidious make it clear why. 

FullDive VR

With over one million videos to explore, FullDive VR creates a movie theater environment for you to watch your videos. You can also browse the internet in VR mode. Currently, though, the app is only available for Android users.

SoundStage


The VR music application allows you to instantly transform your room into a personal studio or DJ sandbox. The retro low- polygon instruments connected with colorful cables are simple in design but appealing. You can play around with wireless controls like drums, synthesizers, cassettes and speakers. With major updates that allow the user to import and export sounds, SoundStage is a fun app for living out your musical dreams in the comfort of your bedroom or living room. It is available on Steam and Viveport for the HTC Vive. 

End Space VR


Since space is the ideal 360-degree experience, End Space VR takes advantage of this bottomless, limitless region. You can look and travel in all directions with your spacecraft and fight intergalactic enemies with weapons. With the help of excellent graphics and 3D immersive audio, you tend to forget that your feet are still firmly on earth.

VR Roller Coaster


Rollercoasters aren’t for everyone (i.e. they can be terrifying), but VR Roller Coaster gives users the thrill of riding one without that whole possible loss of life-and-limb thing.

Do you have any favorite VR apps? Or maybe you just wanna get down and nerdy about experience design? Hit us up.

 

We Built It: V6 by Vantage Data Centers Web Experience

We Built It: V6 by Vantage Data Centers Web Experience

We’re human. We like to occasionally brag about ourselves–especially when we build something cool. Today, we’re introducing a new regular feature in the Hall of Awesome called “We Built It.” In this and future posts, we’ll examine some of our favorite projects. Today, we’re giving you a glimpse at a recent launch we created for our client, Vantage Data Centers. Vantage was in the process of building a new, state-of-the-art data center facility (called V6) on their campus. They asked Mighty & True to help with the pending launch through the creation of a variety of digital content that would show off just how cool this data center was going to be. Easy peasy.

Our User-Centric Strategy

We knew a unique web experience had to be part of our strategy, but we didn’t want it to be stale. These buyers would require information that would explain the value of the center, but we wanted to get V6 noticed in a new and creative way. Our core idea was to give this new facility its own identity. Having V6 look different in a commoditized space was a tall task, but something that we felt strongly about. To make this happen, we started by looking for inspiration in places you wouldn’t exactly associate with data centers: high-end hotels, spas, condos and modern furniture.

V6 site inspiration
Some sites that inspired our design direction for the new page for Vantage

We looked there simply because we wanted to provide, well, a distinctive brand around the V6 center and its value. This site needed to stand out with its own personality–something that Vantage’s prospective tenants would take notice of. We had an idea for the kind of experience we wanted to build, but before we could even think of design, we had to answer some basic questions:

  • What is the main purpose of the page?
  • How should we organize the content?
  • What are the goals of each individual section, and what messages do we want them to convey?

After talks with the client, we found that one of the page’s main jobs would be to entice prospective tenants to set up a tour of a facility upon completion. Everything that we created around the customer journey would have to support that goal.

We first developed a “content map” to help us get an idea of how each part of the page would do that. This content map isn’t a wireframe. It’s a framework meant to establish a basic structure for the customer journey as well as the different sections’ goals and specific messaging for each. It also helped us wrap our heads around what kind of digital content we had and what new content we needed to create. While there were some tweaks along the way, the basic structure we established for the page in the content map remained constant.

This document was indispensable in helping us organize content and messaging throughout the build.

Thinking About Design

We began this project with a kernel of an idea. Once the structure of the site was, for the most part, locked, we could actually start to think about how this particular site would look and work. We began with simple style tiles to identify the colors and typography that would carry this distinctive V6 feel.

Blue Style Tile with sans-serif font
An example of one the style tiles we developed to guide design. We used a few different color palette and font combinations.

After we settled on the right design approach, we investigated possible interactions that would help tell the story and drive users to want to know more. These included interesting parallax effects, a virtual tour, some sort of map function and a way to display the status of the building’s construction. We created an InVision board to organize some of our favorites.

InVision Board with interactions
We gathered interaction examples from other sites into an InVision mood board.

Once we had a firmer idea of the interactions we planned for the page, we moved to wireframes and design. One of the earliest design decisions we made had to do with the hero image. We wanted a sleek, modern tech feel to the video–something that wouldn’t be out of place in a high-end car ad or a smartphone release. Another neat element we decided on in our initial design discovery phase is the background of the page. If you look, you’ll see that it’s a black background, with a light outline of the actual building blueprint, and it has a slight parallax scroll movement as well. It’s the little touches.

The opening of the final hero video
blueprint background
You can see the very subtle blueprint in the page’s background

Development

If you read our recent post on the all-importance of the design-to-dev hand-off, you know that it’s vital to have all your ducks in a row. When we start development, we like to have wireframes locked down. If you’re at all in a creative field, you know that there are always the inevitable 11th-hour tweaks, but with some preparation, it’s easy to roll with the punches. We had already decided what kind of interactions we wanted on this page, but it was time to finally build them.

It was important to get the specs of V6 very high on the page. The page’s main audience (i.e. people looking for data center space) are typically very technology savvy but want to know some basics quickly. So we wanted one of the first interactions on the page to display the primary differentiators of the center. Getting users to read a lot of information in a way that isn’t obtrusive or deleterious to user experience is a delicate balance. To solve this problem, we decided on a parallax scroll of different “cards” displaying V6’s different features. Here’s one of the sites that inspired us:

This is darn fine use of parallax scrolling

And here’s the V6 scroll:

We found a way to display all of V6’s features in an unobtrusive and interesting way

We also wanted to show users the progress of the build, but we wanted an interaction that was as eye-catching as it was informative, without interrupting the flow of the page. We added a slider that displays the 3D render of the site against a live camera view we used to show the actual status of construction:

Users can slide between the 3D render and the current state of construction

Other Awesome Features

As excited as we were to make something that looks great, we also knew that the site had a job to do: get people to request tours of the facility. To that end, we added virtual content that helped a prospective buyer to actually experience the center before it was even open. If you’ve ever cruised the Hall of Awesome, you know that we’re big fans of VR. We’re always pumped when we get to add VR functionality to a project. For this build, it was a perfect application to pique the interest of prospective tenants. Other additions to the page include a CTA for an informational video on V6, a content offer and, of course, a form to request a tour.

VR Tour of Vantage’s V6

Putting the Cherry on Top

This particular project was one of our favorite recent builds. It gave us a chance to do what we love best: use good user-centric design as an essential demand generation tool. It’s pretty much what we live to do. This build also challenged us to think through how to best balance disruptive design, displaying all the pertinent information and providing a positive user experience. If you’re thinking through similar challenges or want to find out how we can make you look good, drop us a line. We’d love to chat.

Sketchy Opinions: Featured Sketch Plugin – Magic Mirror

Sketchy Opinions: Featured Sketch Plugin – Magic Mirror

It’s no secret that we love the professional digital design tool Sketch. Not only is the UI incredibly simple to master, but there is also a huge community of developers and designers that make a dizzying array of plugins, templates, and other Sketch goodies to make it an even more useful tool. In this HoA series, we take a look at some of our favorites. Today, we’ve got the skinny on Magic Mirror, a plugin that lets users manipulate the perspective of images in Sketch.

Our clients make technical products–many are online platforms or other types of software. When we’re designing the front-end design of a new website or web page, we often like to show off the product as a potential user might see it–within the actual device.

Showing the product “in device” (whether it’s a laptop, mobile or another type of screen) makes an intangible product, like software, tangible. It’s also just more visually appealing. If you want to change the perspective of an image (e.g. viewing the device at an angle, rather than straight on), things can get a little tricky.

You may be asking yourself, “Is that a dinosaur riding a penny farthing?” Yes, yes it is.

Manipulating the image’s dimensions to believably fit into the perspective view without making the image look like crud takes some skill. There are many tools in your average designer’s toolkit however that make it a relatively straightforward process. Adobe Photoshop’s “Smart Object” feature is particularly powerful. But if you’re building a wireframe or design on a tight timetable (a pretty common occurrence), you may not want to have to sift through Adobe’s sometimes byzantine labyrinth of tools or have to switch back-and-forth between apps. You just need to make a thing fit into another thing quickly and easily. That’s where Sketch plugin Magic Mirror comes in. It makes perspective transformations in Sketch a snap so you can create realistic, eye-popping perspective product mockups on the fly.

Getting started

Although it is possible to create a perspective mockup with pre-existing Sketch features, it’s hard to do it quickly, efficiently and convincingly. Magic Mirror, on the other hand, not only makes the process effortless but updates your perspective mockup automatically.

The talented team at MagicSketch released Magic Mirror 3 this year, and it doesn’t disappoint. The newest version offers up to 4x image quality; support for the Symbols feature; support for the Slices feature; and corner-radius support. Although no longer a free plugin, you can get Magic Mirror for as low as $1.99/month with a yearly subscription and a 14-day free trial.

The easiest way to install Magic Mirror is through Sketch Toolbox, a Sketch plugin manager that you should also install if you haven’t already. Once Magic Mirror is installed, it couldn’t be easier to use. For the most common use case, just open up the Sketch artboard you want to transform. Then create a second artboard and use the vector tool to draw a shape on it, such as the trapezoid-shape of a smartphone held at an angle. Finally, open up the Magic Mirror plugin either through the menu or through the shortcut Ctrl+Shift+M. You should see your selected image adopt the perspectival shape automatically. Not only will the transformed image look realistic, but the plugin preserves all other layers you add to it, such as a reflection on the surface of a smartphone.

Key features

You can now access all of the following functions through the Sketch inspector panel, which shows up as-needed to help you along. You can flip and rotate Magic Mirror artboards; change the image quality; select or exclude layers, and refresh—all from the panel.

Replaced the screen with an image of the “product.”

Image Quality Selector

Just as the name implies, the image quality selector feature allows you to choose the resolution quickly, and thus the Sketch file size, from a drop-down. Magic Mirror 3 has improved color and image quality and offers you the option to choose between Auto, 1x, 2x, 3x and 4x resolutions.

Layer Selector

The layer selector allows you to quickly isolate the layer that you want to perform a perspective transformation on. You can even find your layer by typing its name into the corresponding field in the Sketch inspector panel. The plugin also has a checkbox on the panel to exclude a layer from the image layer selector, assuming you never want it shown.

Smart Selection

Artboards, Symbols, Groups and multiple selections are all supported by Smart Selection, which displays their layers in the Sketch Inspector Panel.

Flip, Rotate and Refresh

Within the inspector panel, you can one-click flip or rotate the transformed image. The refresh feature also found on the inspector panel, allows you to transfer all the changes from the artboard to the layers you’ve selected.

Work some magic

Magic Mirror is a perspective mockup-maker extraordinaire. Although it is conceivable that with enough talent you could perform perspective transformations in Sketch on your own, Magic Mirror makes it effortless. A modest monthly subscription will get you one of the most powerful and useful Sketch plugins available, including features such as Image Quality Selector, Layer Selector and Smart Selection. Within minutes, you will find yourself making remarkable transformations, showing what your new design will look like, for example, on a tablet or smartphone lying on your client’s desk. Magic Mirror makes it happen.

Don’t forget to drop us a line to find out what kind of magic we can work for you.

Smoothing the Handoff from Design to Dev

Smoothing the Handoff from Design to Dev

Photo by Charles Deluvio on Unsplash

One of the most critical stages in the process of creating a website, feature or app is the handoff from design to development. If the design team fails to prepare for the handoff correctly, much of the beauty and efficiency of their design can get lost in translation. So let’s take a good look at a few best practices to ensure that developers have everything they need to build what the designers have envisioned.

Use apps to help with the handoff

Here are a few apps that help with one or more aspects of the design-to-dev transition:

Lingo

You might want to consider moving your image files out of their numerous independent folders, where they can get lost, and into Lingo. With this visual library app, you can search, track, organize, browse and above all share your visual assets more efficiently.

InVision’s Inspect

If you’re building a mobile app, Inspect will help you achieve a “pixel-perfect” design handoff for both iOS and Android.

Sympli

This design-handoff tool has plugins for both Sketch and Photoshop. Once enabled, the Sympli plugin will automatically create specs, style guides and visual assets for you to share with the dev team. Sympli also has plugins for Android Studio and Xcode, as well as a standalone web app.

Zeplin

Zeplin is a design sharing tool that streamlines the entire design handoff process. The design teams at Slack, MailChimp, Pinterest, Starbucks and Shopify (just to name a few) all use Zeplin.

Use a version control system

When we think of version control systems, we think of developers and Git. However, version control systems work wonders for designers as well. While designers can also take advantage of Git for their versioning, there are some dedicated design versioning tools, such as the widely used Folio. Whichever versioning platform you choose, don’t skip this key preparatory piece of the design handoff.

Only share the intended design

In the course of creating a site, feature, page or app, you’re bound to try out a slew of alternative approaches. It’s tempting to include those files with the handoff. At the very least, it shows how much thought you’ve put into the process. However, including all those extra files can draw attention away from the intended design and confuse the development team. So unless you’re undecided about the design and specifically want to offer the development team selections to choose from, then it’s best to leave the alternatives and earlier versions out.

Don’t forget secondary pages and screens

Without a meticulous handoff checklist and protocol, the handoff process will certainly have at least a few missing files. These generally won’t be pages and screens that belong to the primary user flow. Rather, they will be subsequent pages/screens such as the “forgot password” page/screen that it’s easy to overlook. All the same, they still need design treatments, and if they don’t make it into the mix, there will be trouble down the road.

Pay close attention to your copy

Be sure to have all of your copy carefully organized along with your screens. Moreover, the dev team needs to know the precise context, situation or trigger that will call for each piece of copy.

Perfecting the handoff

The design handoff is a critical stage in the process of creating a website, feature or app. If the handoff from design to dev gets flubbed, the end-user will never get to experience how beautiful or awesome the product could have been. Here’s the TL:DR version of your design-to-dev handoff best practices:

  • Use apps, like Zeplin, to help with the handoff
  • Use version control software, such as Folio, to keep all your versions in order
  • Only pass on the intended design, not alternatives and earlier versions
  • Don’t forget to include all secondary pages/screens
  • Pay close attention to the copy, as well as the context where each piece of copy will arise. If you’re able to incorporate all of these best practices into your design-to-dev handoff, you’ll begin to approach the ideal workflow.

 

Not to toot our own horn, but we’ve got the whole design and dev thing pretty locked down. If you’re the maker of a technical product or service, get in touch with us to find out how we can increase your visibility and improve your customers’ overall experience with our bold designs and strategies.

Light Field Capture for Awesome VR Experiences

Light Field Capture for Awesome VR Experiences

Different Way of Capturing Images

The light field capture photographic system is something different. When you take a picture with one of these cameras, the camera gets the direction of the light rays as well as the intensity and color of the light. The light sensor records all this information so the exact image can be reproduced when the image is viewed. The camera has an array of many small lenses placed one focal length in front of the camera sensor so that what is eventually captured is an array of stereoscopic images. The first such cameras demonstrated at the Stanford University Graphics Laboratory in 2004 employed 90,000 micro lenses. Using this array means there are no truly unfocussed parts of the image–the focus can be restored for any part of the image when it is viewed.

Five Revolutionary Advances

  1. Light field capture has the same 3D virtual reality capability for real life images as synthetically produced images have had up until now.
  2. The images are recreations of what was really there at the point the images were photographed. Within the space, a viewer can turn and move around while lighting and textures remain consistent.
  3. The light field capture system does not record a large number of complete image graphics. The recording system is based on ideas developed in holographic technology. Instead of images, it stores detailed light-flow information which is later reconstructed and played back. This kind of recording amounts to a compression technique which increases potential storage capability.
  4. The 3D capability of the light field capture is enhanced by the fact that the light information incorporates multiple binocular pairs of potential images.
  5. The light field capture system is sold as a unit including all that is needed to produce a full-hour of 360-degree 3D virtual reality content.

Lytro

“Light field photography is different from traditional photography because the cameras can measure the geometry of the light that strikes the image sensor…with enough computer power, Lytro’s software can then reconstruct the scene that was captured in three dimensions.”

Lytro, a company founded by Ren Ng, a graduate of the Stanford University Graphics Laboratory, developed and marketed

  • The first consumer light field camera is a neo-box camera with 8GB (350 images) or 16 GB (750 images) of built-in memory.
  • The ILLUM, which came out in 2012 has a 30 to 250 mm (35 MM equiv.) f/2 lens. The image stored on the memory card could be refocused on viewing so that any detail can be brought into focus. The Lytro still field cameras never made a substantial impact on the marketplace. The viewing system was too cumbersome for professional photographers. The adjustable focus option was not enough to attract them.
  • The Lytro Immerge was announced in November 2015. This light field capture system was designed as the Future of VR, creating virtual reality (VR) content.

VR Image Cameras

The Lytro Immerge camera entered the market in 2016. It comes as a complete system, providing all the necessary hardware, software and services to capture, process, edit and play back 360 video content. It features a flexible, configurable dense light field camera array as well its own server for storage and processing, an editor system, and a playback engine for VR and other viewing platforms. The Immerge server can store up to one hour of light field capture. The server can process the light field data.

Because all the data about a given “light field” is captured, Immerge allows for virtual 3D views from any point, facing any direction, and with any field of view. Immerse places viewers in the action by replicating natural light flow. It corrects stereo alignment to keep the scenes consistent as viewers move their heads. This potential creates a highly realistic immersive VR experience.

The Lytro Immerge system is described as “a five-ringed globe that captures what Lytro is calling a ‘light-field volume.'” The system consists of layers, each of which fully captures a cubic meter of light rays. The final output yields five cubic meters of space that are fully actualized. The camera captures all the light rays in the volume of light surrounding the camera. The software plays back all the rays at very high frame rates and high-resolution. The viewer can move around the light ray array.

The output of the Immerge system is designed to be compatible with the next generation of VR viewers, such as the Oculus Rift, HTC VIVE, and Sony Play Station VR. It also works with smartphone systems mounted in VR viewers.

The Lytro Cinema promises to take the Immerge model light field cinema camera one step further, correcting some of the artifacts that can be distracting in the Immerge images.

Mighty and True helps companies that make technical products create awesome experiences for customers. If you want to find out how we can help you, feel free to contact us .