UX Design for Smartphone Conversions

5 UX Optimizations to Improve Smartphone Conversions (Part 1)

Those of you satisfied with your ecommerce smartphone conversion rate, say Y-E-A-H! (chirp, chirp, cricket, cricket) No, seriously though, if you are satisfied you might want to quit being basic and keep reading—there is always room for improvement.

Adobe’s 2016 mobile retail report stated, “while 26% of shopping carts on desktop turn into an order, smartphone carts only see a 16% success rate— conversion rates are nearly 3x higher on a desktop than on a smartphone.”1

adobe analytics conversion trend by device

adobe analytics conversion by deviceWhen it comes to improving your ecommerce site’s smartphone conversion rate the first thing you’ll want to examine is the user experience. You’re probably thinking, “our site is responsive, isn’t that a good thing?”.

Well, yes and no.

“Responsive design is a tool, not a cure-all. While using responsive design has many perks when designing across devices, using the technique does not ensure a usable experience (just as using a gourmet recipe does not ensure the creation of a magnificent meal.) Teams must focus on the details of content, design, and performance in order to support users across all devices.”2

At the minimum, every ecommerce site should utilize a responsive design. However if you really want to improve your conversion rate, custom optimizations to the mobile experience can make all the difference.

Users spend 20x more time on apps than the mobile web3 because apps tend to be more focused and optimized for a smartphone users’ needs.

app vs web usage

Clearly all this data shows that something’s amiss on the smartphone experience and tailoring the experience is key to fixing certain issues.

Therefore, this post series covers a high-level set of user experience (UX) best practices that can help improve smartphone conversion.

Best practices aren’t the end-all be-all of optimization. In fact, they’re best used as a baseline. Start here, but don’t end here – because best practices don’t work for everybody, and best practices are rarely actually the optimal solution.”4

That being said, follow these 5 optimization tips and you’re sure to see some conversion improvement.

1 Focus on what’s important.
2 Think about content.
3 Pay attention to layout.
4 Make it scan-able.
5 Design for speed.

1 Focus on What’s Important

Smartphones naturally have much less screen real estate to work with then desktops. The average desktop view port is 1024×768 pixels or higher5, while a smartphone is closer to 360×640 pixels6. While a couple pixels here and there might not seem like a big deal, they are and the vertical nature of a smartphone only adds to the challenge.

This is why it very important to consider your customers’ needs when it comes to their shopping experience on a smartphone and prioritize your content and functionality accordingly.

Below are several ways you can optimize your the limited real estate available on a smartphone.

Condense the Header

Reduce the height of the site header a much as possible. You can do this by using an alternative logo treatment, implementing a hamburger menu, and labeled icons.

Header before and after

Before / After

Expose the Search Box

“Shoppers who use internal site search converted at a 216% higher rate than those who do not.”7

This is HUGE. Exposing the search field at all times helps bring it to top-of-mind. If exposing the field on all pages isn’t practical for your site, consider doing it for just the homepage and be sure to display a search icon in the header.

Mobile UX search field

 

Highlight Location Specific Information

Is your brand available at brick and mortar stores? If so, prioritize your location information so that it is easily found on a smartphone.

You can do this by featuring a store locator on the homepage or within the header. Also, provide your customers with useful location content such as the store address, hours or operation, one-click link to directions, and if possible wait-times. Both Atheleta and T-Mobile do a good job of this.

Examples of mobile UX - location information

 

Support Navigation in Spite of the Hamburger

The hamburger menu has become the go to solution for mobile navigation because it is a fantastic space saver. However, it has its share of shortcomings.

“On mobile, people were 15% slower when the navigation was hidden.”8

There are several reasons for this, but for the most part customers have to do extra work to figure out what your brand is selling and it’s not a common UX pattern that a typical desktop user is familiar with.

The good news is that you can counter the negative effects of a hamburger menu by including additional navigational links. Old Navy and Sephora do this well by featuring top selling categories either as links of buttons on the homepage.

 

Examples of alternative mobile navigation

 

Optimizing a smartphone user’s experience by focusing on what is important to your customers can help reduce the time they spend looking, ease friction and frustration and in turn improve their path to conversion.

Stay tuned for Part 2 – Think About Content

 


 

1. Source: Adobe 2016 Mobile Retail Report  2. Source: Responsive Web Design  3. Source: Comscore 2016 US Mobile App Report  4. Source: Conversionxl Ecommerce UX  5. Source: W3 Schools Browsers Display  6. Source: Device Atlas Mobile Viewport Size Statistics 2017  7. Source: WebLinc – Boost Conversion and AOV with Site Search  8. Source: NNGroup.com Hamburger Menus

Transactional Emails

Brand and Deliver: Unpacking the benefits of custom transactional emails

Imagine you’re shopping at Bloomingdale’s, and instead of stepping out onto 5th Avenue with their iconic ‘Brown Bag’ in hand, you’re toting a thousand-dollar watch in a plastic sack with ‘Thank You” printed in garish red letters. Bloomingdale’s would never let this happen; they’re proud of their proprietary branding and managing how they’re perceived at all stages of the consumer lifecycle. Even if your online store isn’t quite at their scale, would you risk sending your customers home with a lack-luster takeaway? It feels cheap, and they’ll notice it, too. That’s a lot like sending generic transnational emails.

The online shopping story doesn’t end when a customer taps the ‘Place Order’ button or scans their thumbprint to buy with ApplePay. As a retailer, if you’re tracking completing checkout as your primary conversion, you’re missing the big picture. Refocus on the follow-through: What are you doing between checkout and fulfillment to keep customers coming back?

Don’t’ be basic!

Instead, close the loop: A quality post-purchase exchange creates the illusion of seamlessness between ordering and fulfillment.

Before you hit send, brand your transactional emails.

Plan for multiple touch points

Bridge the virtual experience of shopping via touch-screen with the actual experience of physically touching an object (in to 2-3 business days, anyway). The steps that come between — transactional emails like order confirmations, shipment and tracking details, arrival notifications, and satisfaction surveys — have the potential to excite and engage your customers. But only if you treat these emails like extensions of the storefront.

Reassure and inform your customers, while also rewarding them with VIP treatment.

Build suspense

While they anxiously await shredding open the box and popping the bubble wrap when their package arrives, remind your customers that they can order almost anything they want…in their pajamas; it’s practically magic! Branding your transactional emails makes their experience memorable from start to finish — and back again. Of course, that means incorporating your site’s User Interface (UI) elements, like logos, colors, buttons, and link styles. But it also means stripping out any scripted language and replacing it with your brand’s unique tone-of-voice.

Look for patterns

Although for ecommerce, amazon.com may not be renowned for visually-stunning page designs, the company is THE customer service trailblazer. And branded transactional emails are a cornerstone of their digital strategy. Within each email, Amazon sets customer expectations by identifying milestones in linear steps, linking to the order details on the site, providing terms and conditions, and even offering related products. Essentially, they teach us the three main reasons you should be branding your emails, too. Branded transactional emails:

1. Show your customers that they can trust you.

2. Increase customer loyalty by reinforcing your brand voice and mission.

3. Give your customers not just the information they need, but also the information they didn’t even know they needed.

…But always be yourself

Unless you’re uncharacteristically ambitious, you didn’t plan for your ecommerce site to compete with the likes of Amazon. Your brand has an online presence first and foremost to generate awareness. Even though Amazon’s transactional emails boast cool features like the ability to dynamically pull in recently-viewed products, they are designed to appeal to every demographic, everywhere. So, while these emails are effective and have a broad reach, they lack flavor.

However, because you likely have a narrower audience, it’s easier to determine their personas and use language and features that really speak to them. No one wants to feel like they’re the average customer. So why be the average retailer?

Stand out by doing what big marketplaces can’t do: Curate transactional emails for your specific customers.

To show how implementing custom branded transactional emails leads to satisfied return customers, let’s look at examples by brands that are bringing their A-game.

Show you are trustworthy

Something Digital recently launched an ecommerce site for Riley Home, a startup luxury lifestyle brand that specializes in high-quality, affordable sheets, duvets, comforters, pillows, towels, robes, and gifts. Recognizing the challenge for new brands to generate buzz and build credibility, our digital marketing strategy included customizing transactional email templates.

Riley’s emails go with the flow.

They share the same UI characteristics as the website, incorporating the color palette, icons, and web-safe versions of the headline and body fonts, so text renders virtually the same across email clients. The emails also scale responsively and can be easily accessed from smartphones, tablets, and laptops alike. This seamlessness gives customers confidence that they’ve made a good investment.

Riley Email Example

Riley delivers a guarantee that customer’s personal information is safe because they look, feel, and read like the ecommerce site. Instead of relying on generic subject lines and filler copy, Riley adds their personal touch. Remember that default language doesn’t represent you. Messages that do what they promise to do, in a familiar tone of voice, are more likely to be delivered to your inbox and less likely to be mistaken for marketing ploys or phishing scams.

Riley also makes the fulfillment process transparent, notifying customers when their orders are placed, invoiced, and shipped and what they can expect when the package arrives. Setting expectations at regular intervals leads to fewer customer service calls, headaches, and follow-ups.

Riley shows accountability by getting it right the first time.

Reinforce your brand voice.

If you wanted transactions to be cut and dry, you wouldn’t have made the effort to design a beautiful ecommerce store. Transactional emails supplement that rich experience. Thank customers for their purchase on the site, while drawing them back to shop again through the words you use in your communications.

Take Native, for example. Native is website dedicated to a single product — natural deodorant — in a variety of scent and strength options. The company’s success is up against two big limitations: a uniform inventory and demand. Do customers buy deodorant in a pinch or are they able to wait for an online order to ship? Are they willing to buy their personal hygiene products from different stores? Are they likely to buy more than one bar at a time? How likely are customers to send personal hygiene products as gifts?

Judging by Native’s transactional emails, they have master-minded a strategy to keep customers coming back for more, even if their medicine cabinets are fully stocked with sweet-scented, non-toxic freshness.

Native Email Example

From a design perspective, Native’s order and shipping confirmation emails are clean and understated, much like the ecommerce site. But the enthusiastic subject lines and bold, personalized headlines are loud and proud. The marketing copy empowers the customer and gives positive reinforcement. Plus, light-hearted, colorful, if fictional, narratives describe how your order was warmly received by the customer service team and how they carefully handled the order to fulfillment.

You might think, “Five paragraphs before the order review table? TL;DR”, but it’s so charming that you get hooked after just one sentence. Personalization brings a kind of intimacy to the buyer-seller relationship. Customers feel cared for and important.

By controlling the content of the email, you can choose what matters to your customers, rather than making concessions for the average consumer. Customers value real interactions, not automations; They want to feel seen. The proof that authenticity works is in Native’s site reviews. Nearly 5,000 customers have rated the shopping experience with 5-stars and they even campaign for the brand on social media.

Engage your customers.

Transactional emails are the gateway drug for marketing engagement. An order confirmation email isn’t just a receipt if it also links to a referral program, cross-sells, or provides coupons for future use.

Third Love, a body-positive lingerie brand, uses inclusivity to its advantage. Their transactional emails welcome customers into a community and offer incentives to return to the site. Essentially, Third Love closes the loop, and from there on out, they invest in maintaining meaningful customer relationships. They appeal to their customers’ needs, reducing subscription fallout.

Third Love Email Example

Within its post-purchase emails, Third Love encourages customers to refer friends for mutual savings, take a quiz to discover their fit for their body, and shop for complimentary products recommended based on their personal tastes. Third Love even reminds customers to show their appreciation by leaving product reviews, which are overwhelmingly stellar.

If your products tell a story, gear up your customers by linking to related blog or social media posts in the order confirmation email. Anticipate that they might not know how to care for or use your products, so include a mini FAQ or demo video in the shipment confirmation email. Keep in mind that not everyone is home to receive their packages, so send a shipment arrival notification to allay delivery fears.

Although not everyone uses gmail, if most of your customers do, consider giving Google’s amp feature a test run. Adding cross-sells and up-sells to transactional emails is a no-brainer, but with amp, they dynamically update to show products that your gmail recipients recently viewed on your site.

And, as always, monitor and A/B test your special-sauce over time to see what resonates with your loyal fan base.

Ship it!

Loyalty is long-game. Regardless if you’re starting up or just getting rebooted, branding your transactional emails can build trust, reward customers, and drive repeat conversions. It is one of the least-expensive customer retention methods with the greatest potential for return on investment. The upfront cost is worth it, because if your customers feel both safe, special, and satisfied, their loyalty lasts a lifetime.

Are your transactional emails missing the mark? If so, we can help! Give us a holla ›

Written by: Gina Angelotti, Interactive Designer

How a Branded UI Can Improve Conversion

An ecommerce site first and foremost needs to be useable. You certainly can’t checkout if it isn’t clear where the checkout button is. Design details can seem trivial to merchants, especially with the monumental checklist of features and technical integrations needed for launch. But the customer’s perspective might differ.

I recently came upon a beauty brand ecommerce site in search for the perfect skincare product. As I was browsing, I noticed all of the UI elements were gray and basic-looking, the product images were poor quality, and the checkout form was buggy. I ended up purchasing a different product on Amazon instead, simply because I didn’t trust the outdated site.

This is where a branded UI truly matters. As designers, it’s our job to portray the credible voice of a brand, both subtly and overtly throughout the experience, all while keeping UX best practices top of mind.

You’re being judged

First impressions matter. Think of your site as being judged up and down by a scrutinizing interviewer. The interviewer wants to know they can trust you and wants to be sure you’re genuine. The same mentality goes for your ecommerce store. When a customer lands on your site, they will be able to get some sense of your brand persona within one second. And in this one second, customers will subconsciously form an opinion about your brand, good or bad.

A hue difference

Choosing colors wisely for the web can make your site not only stand out from the rest, but also ensure no customer is left behind. There are several different types of colorblindness, and at SD we ensure color contrast is compliant for AA accessibility standards. Ensuring all customers, including those with visual impairments, can read your Calls-to-Action (CTAs) will help them convert. Color can also be used strategically. For instance, using brighter CTAs or specific sale messaging, to further guide the customer through checkout.

Just the right type

It’s not only what your messaging is saying that’s important, but it’s the feel of the letterforms themselves. You might literally be telling customers your brand is trustworthy and credible, but your typography choices could be saying the opposite. Your fonts should match your brand’s voice. At SD we typically suggest using one typeface for <h> tags and another for body copy. This is to give the typography on the page a little more depth and contrast, which improves legibility overall.

Hummel’s typography matches the brand’s voice and provides a clear hierarchy with the use of multiple font weights.

 

Better legibility ultimately proves for a better experience and a quicker workflow for the customer.

Please click here

Without buttons and links there are no actions. Now, how can we make those buttons so cool that they’re practically irresistible? Enter a cool hover effect that’s relevant to your brand.

Blonde Salad’s header delights with adorable hover animations in their utility navigation.

 

What if they were even informative to boot? A button with a loading animation built in informs the customer that something is happening.

Villa features an add to cart button combined with a loading animation when clicked.

 

A fancy hover animation isn’t appropriate for every brand, but with a little thought your buttons can visually stand out and drive customers to click.

The subtle power of animation

Think of animation as finishing touches on a site that give the brand a boost. They can significantly enhance the feel of a brand when implemented subtly and smoothly.

All Birds incorporates playful animations throughout their homepage that gives a playful yet credible feel to the customer.

 

Movement on a page will automatically draw the customer’s eye, so it’s best to incorporate animations subtly, or allow the customer to initiate larger aminations on hover or on click. Reconsider including any animation that slows down the speed of the main workflow. Frustrated customers won’t care that your lazy load looks awesome if it’s slowing down their purchase speed.

Paintbox’s logo moves together as the customer scrolls down on the homepage.

 

Consistency is crucial

At SD, designers place all their branded UI elements into a web pattern library that is referenced by developers when building the site. Keeping these elements consistent provides customers with the confidence they need to quickly and easily achieve their objectives. Anything that looks out of place could be viewed as a bug, which lowers credibility. Patterns in layout and UI elements improve efficiencies, leaving your customers feeling they’ve spent their time wisely.

Brand recall

It’s important to remember conventions exist for a reason. Not every convention should be or needs to be changed to achieve a successful, unique branded customer interface (UI). For instance, studies have shown customers are 89% more likely to remember your brand when your logo is placed in the top left of the page.1 It may be tempting to try to be unique, but in this case, customers are so used to seeing the logo placed here, that it only makes sense to follow tradition.

Think through everything

The tips above are only the beginning. There are other details such as the styling of the header, loading animations, icon styling, 404 error page styling, and modal styling that should be considered when thinking about designing a successful branded ecommerce experience. The designer has done her job when the customer leaves your store with a positive feeling and a desire to shop again.

There are many nuances to a branded UI, and when implemented thoughtfully and consistently your shopping experience will shine. Many brands today have dedicated time and resources to perfecting their UI, as they should. When the customer’s impression is one of confidence, it’s certainly time well spent.

Did you like this blog? Check out out Part 1 and Part 2 of ‘Why Attention to Detail Matters’ or contact us if you have UX, UI, or design Q’s.

Written by: Lindsay Stork, Interactive Designer

1. Whitenton, K  (2016, February) Website Logo Placement for Maximum Brand Recall. Retreived from
https://www.nngroup.com/articles/logo-placement-brand-recall/

 

 

 

 

 

Every Little Thing, Part II

Every Little Thing: Why Attention to Detail Matters, Part II

In our last installment, Every Little Thing: Why Attention to Detail Matters, Part I, we talked about the benefits of being detail-oriented and the drawbacks of perfectionism. We also briefly walked through Something Digital’s Quality Assurance testing process, in which thinking critically and carefully impacts designers, teams, stakeholders, and users alike. Now, we’ll look at an external site through a critical lens to show how something as small as margin or font size can impact usability, accessibility, and brand loyalty. Regardless if your goal is to serve a community, to build a following, or to to stand out among your competitors, investing in a well-planned, well-executed, serviceable design is one of the best long-term business strategies. Paying attention to detail matters. Design matters, period.

Think Compassionately

“The single biggest problem in communication is the illusion that it has taken place.” – George Bernard Shaw

Alongside monitoring analytics, conducting regular UX audits helps us to gage the health of a website and pinpoint areas for improvement and growth. If we only skim for quick answers to explain why site performance is down, we might overlook hidden roadblocks or miss key details. During an audit, we investigate forward, backward, inside and out. We don’t just scan for existing mistakes, but we also note what is working well, compare competitor sites, and suggest enhancements that can later be measured with analytics. It’s much like how we weighed design decisions in the original discovery exercise, only now, we have live visuals, real customer engagement, and data.

Coming out of an audit, we want to validate if our designs work in the real world, if they are user-friendly, and if there are any failures in communication, that we have practical recommendations for fixing them. To illustrate our approach at SD, let’s put on our designer goggles and comb an example web page — something neutral and widely read: a New York Times feature  — and call out small details that positively impact usability, readability, and legibility (and what could be done better).

Desktop Visual Examples of NYT Article Top: The site header and article hero image; Center: Related articles; Bottom: An image with a descriptive caption

 

Mobile Visual Examples of NYT Article
Left: The site header and article hero on mobile; Center: White space around advertising; Right: The submission form

Usability

DESIGN DETAILS AT WORK
Header: A sticky navigation follows users on scroll, giving them access to the main menu, search, and sharing tools. Notice the soft shadow clearly separating the header from the page content. Within the navigation, the title of the article displays, allowing users to refer to what they’re reading, regardless of where they are on page.

Feedback: Hover states, like color changes on social icons or the zoom tool on images, inform users when something can be clicked. The number within the comments icon updates regularly, letting users know there’s a lively discussion happening around the content that they can participate in.

Related content: A sidebar of related articles includes contextual images and headlines to give users a holistic view of how the story has been covered in the past and prolongs their engagement with the site.

DESIGN DETAILS TO REVISIT
Because the article is long, a ‘Back to Top’ button could help users jump to the beginning of the article. Likewise, if the sticky header was enabled on mobile, users browsing on their phones could easily access the navigation.

Readability

DESIGN DETAILS AT WORK
Typography: There is a maximum width on paragraphs, limiting the number of characters per line, which makes long blocks of text easier for users to read. Additionally, there is a clear typographical hierarchy. Content is broken up by subheadlines, quotes, and sidebars, and each type is consistently styled.

White Space: There is a substantial amount of breathing room between advertising and the article, so that users can distinguish paid content from brand content.

Mobile: All of the content that was overlayed on a hero image on larger screens drops below the image on small screens, so that users can easily see, read, and tap it. No features are lost from device to device.

Clicks to Conversion: The design doesn’t ask the user to do more work to get more content, like hiding the story within tabs or behind a ‘read more’ link.

DESIGN DETAILS TO REVISIT
Paid ads could be deferred or relocated, so that they don’t break paragraphs. Also, if the total estimated time for reading displayed at the start of the article, users could anticipate how much time they need to invest to read it, potentially reducing abandonment.

Accessibility

DESIGN DETAILS AT WORK
Links: Font colors meet accessibility contrast requirements, and most links are additionally underlined. Multiple visual indicators distinguish links from static copy for users with impairments like low-vision or color-blindness.

Images: Each photo in the article is methodically captioned, which is helpful for blind users who require a screen reader to navigate the site.

Microcopy: The submission form features labels the clearly specify what should be entered into each field, minimizing confusion. Additionally, microcopy preemptively outlines required fields, input character limits, and terms and conditions.

DESIGN DETAILS TO REVISIT
While the submission form has specific labels and calls to action, the search box does not. However, both forms could benefit from higher contrast borders and larger inputs for mobile users (at least 40px).

Overall, has communication been made successfully? Yes. Can communication be improved? Always. In this example, we only brushed the surface. But we can conclude the designer thoroughly iterated and tested their work, adding features — not flourishes — to serve users at every move.

Think Strategically

“Integrity is the essence of everything successful.” – R. Buckminster Fuller

Do thousands of marketing emails stuff your inbox per week? Is it even possible to commit to inbox zero in today’s e-commerce ecosystem? For a designer, a more important question is: What qualities do the few you actually open all have in common? I’ll venture a guess that they:

  • Use charming, witty, or persuasive subject lines.
  • Exhibit high-quality photography.
  • Mirror site patterns, so that the email-to-site click-through experience is virtually seamless.
  • Have a strong brand voice setting the tone of every interaction.
  • Do all of the above consistently.

 

The question I always have for winning marketing campaigns is rhetorical: “How are they always this good?”

The answer is obvious: Nothing is accidental. Designers pay attention to every detail, head to toe, err, header to footer.

To show how attention to detail impacts brand integrity, let’s review an email marketing campaign. Again, to be neutral, we’ll look at a vertical outside of SD’s current client roster: Outerwear. In the example below, we chose just three qualities that link Patagonia’s standout UX strategy to their longevity.

Visual example of Email
A few examples from one recent Patagonia email marketing campaign

1. The subject asks a question, and the layout answers it.

Designers aren’t necessarily copywriters, but even if they don’t directly contribute to the marketing calendar, they are responsible for weaving the planned theme through the visuals (Note: SD’s Creative Team are BOMB copywriters). The subject asks for input, so users can opt in. Contextual photography of real customers, earing the product in real environments, provide the answer. In case you doubted Patagonia’s authenticity or dedication to outreach — both brand hallmarks — the designers even included captions and credits.

2. The typography is big, bold, and legible, and it’s mostly html.

Why is that last part so crucial? Not only is content visible to all users, even if their email clients have disabled showing images by default, but it also scales better. Often, embedding text within images ignores how most people read email: on their phones. If you can’t read the CTA, was it ever truly even there? For designers, it may seem risky to display html content instead of embedding text because it means giving up control over how the design will be rendered by different email clients. But a good designer is one who delights in problem solving, and therefore doesn’t mind going through multiple rounds of test sends to get a result that is flexible and accessible.

You might argue that some email clients can’t render webfonts, so embedding type on images is the only way to stay 100% on brand. But in the case of Patagonia’s emails, they’ve done their research and chosen google fonts — along with a defined stack of backup web-safe fonts — that closely resemble the ecommerce site typefaces. Being adaptable > leaving users out. The email reads clear and crisp on all screens by all users. If Patagonia promotes corporate responsibility, every design choice must, too.

3. The color isn’t just for kicks.

First, the email is stripped of color, save for the rich photography and buttons, which are the same hex values as the ecommerce site CTAs. Second, there is ample whitespace surrounding each content block so that they are digestible and free of noise. Third, the monochrome logo is isolated header and the navigation, also black, is minimized.

Color is thus reserved for clickable content — and all of it really pops! Essentially, the designers forge the trail they want users to follow, without having to give directions. Attention to detail leaves no one guessing. As an even more subtle detail, the buttons leading users to Patagonia’s shoppable categories are orange, while the buttons navigating to influencer, blog, and informational content are purple. I suspect that over time they have A/B- and user-tested everything down to button color and taken into account what resonates with their recipients, particularly the many that have become lifetime customers.

Although we only grazed the surface in this example, we validate that designers have the power to reinforce brand awareness and loyalty. They find common ground between design principles and core brand principles. They elevate copywriting and use visual language to say what words alone can’t about the brand. And if they’re dedicated — and always testing! — they can engender a unique brand voice that stands out — and thrives — on the internet.

The Takeaway

Being perceptive to the details in the world around us isn’t just about what’s in our immediate surroundings and what’s urgently signaling us right now. It’s important to see — and foresee — how every little thing can impact the future (and the users living in that future, interacting with that world). It’s the duty of designers to meticulously observe everything, so that they can identify problems and make educated decisions to help solve them. It’s also our duty to notice and learn when to take a step back. Through our examples, we’ve given you insight into SD’s internal design process and demonstrated how designers double as strategists. On one end of the spectrum, we can be nit-picky perfectionists (and we know it!), but on the other, we can be the best ally for your business by generating and sustaining a loyal following, guiding those users through conversion workflows, and advocating for their needs. Attention to detail pays off. We see it. Do you?

Special thanks to swiss-miss  for the continuous supply of design inspiration and inspirational quotes, some of which are featured here.

Written by: Gina Angelotti, Interactive Designer

Every Little Thing, Part I

Every Little Thing: Why Attention to Detail Matters, Part I

Think Critically

“Pay attention to what you pay attention to!” – Amy Krouse Rosenthal

Here are two arguably true assumptions about designers:

Designers are admired for their attention to detail.
Designers are mired by their attention to detail.

Designers have a reputation for caring too much about details that no one else notices outright. Conversely, we are known for taking care of seemingly insignificant details that, when incorporated into the greater whole, significantly and noticeably influence how everyone interacts with the world around them. While our work can seem imperceptible, it is highly intentional. In fact, good design is ingrained in everyday life without any of us — designers included — even noticing.

Admittedly, designers can be meticulous to a fault. Zeroing in on minor details can take us off course when our vision becomes too myopic. Other times, we arduously sweat the small stuff, which can bloat project budgets. We’ve all been there. And we learn, over and over again, the importance of stepping back, evaluating design choices in their entirety, and discerning when the end justifies the means.

Now here is one assumption about designers that is inarguably true:
Designers steadfastly attend to detail.

Whether to our detriment or success, designers pay close attention to details because it’s our calling. If we’re truly present and thoughtfully examining everything we see, feel, and touch, real problems reveal themselves. More and more companies are adopting design thinking not because it’s buzz-worthy, but because honing design skills, like the ability to perceive, empathize, and iterate, helps solve problems that matter.

Let’s explore at how a web designer’s attention to detail can improve user engagement with a product or site. First, we’ll share an example of how it plays out internally at Something Digital.

Think Aesthetically

Creative Team QA Tests
QA Testing at Something Digital

White-glove attention to detail is part of every step in SD’s process, from discovery to deployment. But a prime example of when design thinking takes center stage — and is occasionally controversial — is during front-end QA testing.

For every project, the design team conducts an end-to-end comparison of mockups and pattern libraries to live sites. We’re not only looking for fidelity, ensuring that meticulously predefined rules are followed, but we’re also regulating consistency, cadence, and continuity. We report bugs that range from margin issues — adjusting space between elements so that content is evenly distributed, logically grouped, and legible — to functional errors, in which a page or an element on a page impedes the checkout process.

We’re not aiming for pixel-perfection, which is an impossible task given browser and device irregularities. The goal is to meet an acceptable standard. But that doesn’t mean attention to detail falls by the wayside. All documented QA issues are collaboratively classified as low, medium, high, or critical. And every issue is eventually addressed in order of priority.

Much to the chagrin of designers, margin and padding flaws are often considered low issues, because to technical teams, project managers, and clients, they are aesthetic and don’t directly prevent a user from accomplishing a task. And while true, designers will counter that these flaws could be proven over time to slow down or frustrate users, indirectly decreasing conversion. What if users can’t tell which step of a form they’re completing because the margins between the labels and fields is too great? What if they’re checking out on a phone and they can’t tap the correct input for payment method because the radio buttons are grouped too closely together?

It’s the role of the designer to see problems at more than face value, foresee how they might persist in the future, and critically examine if resolving them, however small, is worth the effort.

It can be a mistake to be nit-picky, jeopardizing scope. It can be a mistake to ignore details, jeopardizing usability. Designers walk a fine line, but if we’re self-aware, user-aware, and openly communicate with our co-workers and clients, our attention to detail can be what separates a functional website from a thriving one.

For more in-depth examples of how the SD creative team digs into detail, see Every Little Thing: Why Attention to Detail Matters, Part II.

Special thanks to swiss-miss  for the continuous supply of design inspiration and inspirational quotes, some of which are featured here.

Written by: Gina Angelotti, Interactive Designer

E-commerce team

Designing with Users in Mind

At Something Digital (SD), we prioritize designing best-in-class User Experiences (UX). During our project discovery phase, we invite clients to tell us who they believe their users are — and who they want their ideal customers to be. Then we validate that perspective against quantifiable data. We start by zeroing in on two user types, and review analytics to determine their general demographics, like age range, socio-economic background, and geolocation.

However, we get that users aren’t numerical statistics; they are humans with real-life concerns, independent of what we tell them they want and need. We can’t know everything about each lifetime value (LTV) customer — it would be invasive to dig that deep — but based on their shopping patterns, we can glean their attitudes toward ecommerce, identify their habits, and anticipate how to best meet them where they are.

So, we create personas: illustrations of specific users, describing their daily routines, behaviors, values, hopes, and even anxieties. We paint a slice of life.

If we start out empathizing with well-defined primary and secondary personas, we design interactions that work for many people. Then, we track engagement over time, continually A/B test, and iterate on the experience so that ultimately, our designs work for as close to everyone as possible.

Having empathy means being vulnerable: opening ourselves up to possibilities outside of our own limited understanding and letting go of attachment to our personal preferences. We don’t have to completely abandon the design trends we’re into, typefaces we worship, and slick page transition animations we’re crushing on, but we do need to holistically consider how our design choices impact people who aren’t us.

Our job is to think big: we don’t design User Interfaces (UI) and interactions for only our clients, their stakeholders, or ourselves; we design for a sum of people who want to be heard, welcomed, and respected.

SD follows a strategic process when including and excluding design features.

Before proposing a feature, the answer must be ‘yes’ to at least one of the following questions:

1. Is it necessary?

2. Do we believe it will measurably improve the overall experience (and can we back that claim up in advance with research)?

If the feature passes this litmus test, we ask a series of questions guiding us to make conscientious decisions about how best to present and implement it.

To put our checklist into practice, let’s create a case study around a design feature. And to convey how even a simple feature can be controversial when it comes to user-centric design, we’ll refer to a no-frills homepage content block. The example we’ll asses is a static promotional block featuring three product categories.

Desktop Content Block Visual

Who does it serve (and does it, really)?

If we were to draw a Venn Diagram asking, ‘Who does a design serve?’, there would likely be three circles of varying size: ‘Stakeholders and Administrators’, ‘Designers and Developers’, and, finally, ‘End Users’. Initially, it probably looks something like this:

Venn Diagram Example 1
Our job is to radically reshape those circles, giving precedence to users and finding the sweet spot where our design expertise intersects client and user requirements. Practically, it should look more like this:

Venn Diagram Example 2

In the case study example:

— The block directly nods at the stakeholders — we see the parent company announced in the headline, subsidiary brand logos on product images, and buttons featuring those brand names.

— But it speaks to users, too. The headline copy purposefully welcomes users to ‘meet’ the subsidiary brands, the subheadlines casually address users with the familiar ‘you’, and the photography shows users what to expect.

— The content block follows the client’s brand guidelines and sparks the user’s curiosity.

check iconCheck!

 

What do we want the feature to do? What do users want the feature to do?

When I design a homepage, I personally want to be proud of it. I also want it to knock both the client’s socks off. I wonder, ‘what elements of this can I animate?’ and then scour inspiration and photography sites for the perfect image to perfectly crop and perfectly color-correct to account for any text that displays over top. But that’s ego getting in the way of business. We’re not designing sites for stakeholders or ourselves; we’re designing for everyone.

Take pesky pronouns out of the equation, let go of subjective ideas of perfection, and get to the bare bones. Our most basic objective is to design something useful and user-friendly. Even if we know, like us, our clients want magic, what users need matters first.

In the case study example:

— Target presumably required a straightforward content block that efficiently drives users to specific categories, and therefore drives conversions.

— As for users, let’s divide them into two types — new and returning — and ask, ‘what do they need?’ New users visiting a homepage might look for a range of the products or services being offered. Returning users might look for fresh content from a brand they trust. ALL users want to navigate to the content they need as quickly and frictionless as possible.

— The designer introduces customers to new products and directs them shoppable categories not too far below the header navigation.

check iconCheck!

Think of a site that oozes ‘wow factor’. Sure, the designer eventually added the bells and whistles that make it exceptional, but they likely first aligned their clients’ and their users’ goals before asserting their own aspirations and inserting their own assumptions.

 

What does the feature do in practice?

Break the feature down into its fundamental ingredients. How does each UI element work within the design?

Mobile Content Block Visual

In the case study example, we see:

1. A Headline, which provides context.

2. Images with brand logos, which in addition to being contextual, help to distinguish the different categories.

3. Subheadlines, microcopy that expresses the voice of each subsidiary brand and specifies what kind of products the categories contain.

4. Buttons, which take users to the next phase of their journey.

— While the headline and subheadlines use persuasive marketing copy, these buttons would arguably benefit from actionable language (e.g., ‘Shop the Collection’ instead of ‘A New Day’).

— On the other hand, many bases are covered here. Because the brand logos are embedded in the images, they are large enough to be legible on small screens.

— Additionally, the buttons repeat the brand name in plain text for users with visual impairments who may not be able to see the images at all.

check minus iconCheck minus.

Now, let’s repeat this exercise, but with UI attributes like colors, fonts, and photo art direction. How do our design choices work for the design?

In the case study example, we see:

1. A gray background, which separates this content block from the ones surrounding it. Visually compartmentalizing the content makes it easier for users to digest.

2. A light-weight headline, which conveys elegance and doesn’t compete with the subsidiary brand logos.

3. Single-subject images with pastel backgrounds, which contribute to an approachable look-and-feel. While the compositions vary (left-aligned, centered, right-aligned) and the subjects differ, the selection feels intentional, unified, and balanced. The soft backgrounds make the products pop.

4. Rounded corner buttons, which, alongside the gray borders identify the content as clickable. The size is large enough that it can be easily tapped on a small device.

— Overall, the UI attributes grab attention, establish a content hierarchy, and express the brand. Our color, typography, and imagery choices work hard and often unperceptively to make it easier for users to accomplish tasks.

— We could further improve the design by assigning buttons a color background or border, instead of the gray and white, to better contrast with the gray outer container.

— Also, more closely pairing the buttons with their related content would help users select the correct category when shopping on a mobile device.

check minus iconCheck minus.

The more we assess the design choices we make, we are more likely to make thoughtful decisions over short-sighted ones, and the better equipped we are to defend our designs to clients and stakeholders.

 

Is it ready to ship? Is it ready to iterate on?

Are we ever really ready for anything? Is anything really ever finished? Continuously evaluating how a design performs for users — and tailoring it to their evolving needs — sets a good design on the path of becoming a design paradigm.

Have real people test a working prototype. Observe them and ask:

1. Is it intuitive?

2. Is it memorable?

3. Does it integrate with the overall experience?

If the answer is ‘no’ to any of the above, take a step back. Sometimes we fail to think of ways a design could be potentially harmful to users or, after multiple rounds of client feedback, we trim out something that made the design stand out in the first place.

When we design with empathy, we try to look at our work through many different lenses and if necessary, dismantle our hypotheses, however well-researched they were. Ask if a design can be simplified without stripping its personality and push back if a design decision negatively impacts the UX. Through deep inquiry, we can find meaningful solutions to the cracks in our design before they become craters.

Once we’ve workshopped a design and it meets the required criteria, we test it. SD recommends A/B testing, via experimentation platforms like Optimizely. Alongside usability testing, we compare A/B test results with analytics data over a controlled time to figure out if our target users understand what a feature does and they follow where our design choices are guiding them. Whether we decide the design is effective or defective, we incrementally test solutions to improve it.

Designing with users in mind is a job that is never over. User’s tastes, habits, and needs change over time, not unlike an ecommerce store’s inventory, branding, and profit goals. Being empathetic, critical, and flexible is essential. We weigh the variables, we wireframe the possibilities, we audit our work, and we test it over and over. Because the true testament of success is that we’ve done our due diligence to create user experiences that serve as many real people as possible.

Written by: Gina Angelotti, Interactive Designer

Writing effective headlines

Using your Words Carefully: Part 2 – Headlines

Last week, we talked about the value of serving your customers the content they deserve. We also outlined that smart copywriting, which include the following tips:

– Gets to the point quickly
– Uses active verbs
– Is concise, clear, and consistent
– Anticipates and answers questions
– Has a distinct voice
– Puts customers (or others) first

Today, let’s take a closer look at writing headlines, supporting copy, and microcopy that follows these six rules we have already listed. Lastly, we will look at some real world examples and how they apply in a business setting. I’d also like to highlight a handful of design best-practices guaranteed to give your words an even greater impact.

Improve Your Headlines

Let’s rank the following headline iterations:

1. SD is the source for free writing tips from industry experts (Meh)
2. Our industry experts offer free writing tips online (Ok)
3. Get free writing tips instantly from industry experts (Better)

Although headline 1 is informative, the text is lengthy and doesn’t speak to anyone. Headline 2 is less wordy and includes a less passive verb, but still leaves out the customer. Therefore, headline 3 is the best option because it invites customers to participate, introduces the active verb ‘get’ and keyword ‘free’ right away, and adds one more incentive: time. But wait, can we trim even more?

Get free expert writing tips now (Best)

Landing page headlines arguably have the greatest impact on bounce rate because customers are likely to skim the headline’s text and stop reading when they find the information they came for (or leave if they can’t find it). Headlines must captivate, impress, and satisfy a customer — all in under a second. No biggie, right?

Your want to write headlines that are direct, helpful, and empathetic:

– Place actionable keywords up front
– Expose problems and offer solutions
– Recognize how customers might feel before coming to the site

Invision.com HomepageInvision’s Homepage headline is active and inclusive.

Handy.com Welcome MessageHandy’s welcome headline reassures customers above all else.

AirBnB.com HomepageAirbnb engages customers to interact and incentivizes it.

Copy writing expert Dane Maxwell suggests combining these three key elements for writing an effective headline:

– The result (What the customer wants)
– The period (When the customer wants it
– The objections (What happens if the customer doesn’t get it when they want it)

While there’s no fail-proof method for writing an engaging headline, Maxwell’s formula is a strong foundation because it’s structured, expresses urgency, and prioritizes the benefit to customers.

Trim Your Body Copy

When you text your friends, you’re likely sending as few words as possible (or not even, because the laughing crying face emoji says everything) and you probably aren’t typing full sentences on where to meet for coffee. Like texts, the supporting copy on your site should express both your personality and the customer’s mood and desires in just enough words to avoid confusion (‘Let’s meet the one on St. Marks w/ the tall (Canadian flag) barista’).

Supporting copy too often focuses only on marketing goals like boosting SEO and appeasing stakeholders, which is helpful for robots, but is not for the real people who want your products or services. Effective supporting copy packages the necessary keywords, legalese, and product details into brief, useful, digestible units.

Try these dos and don’ts when writing meaningful supporting copy:

Don’t:

– Rely on it to explain workflows
– Dumb it down
– Write complete sentences or paragraphs
– Exhaustively list product features

Do:

Make it easy
– Design an intuitive UX first. Smart headlines, calls to action, and User Interface (UI) interactions allow customers to move through workflows even without supporting copy

R-E-S-PECT
– Respect your customers’ time, circumstances, and intelligence. Get to the point quickly with the simplest language possible. Keep in mind that efficient copy makes a big difference to customers who access the site from small screens, use screen readers, or require translation.

Break it up!
– Break copy into bulleted or numbered lists, setting reasonable limits on the number of list items. Be willing to cut any text that doesn’t directly serve customers.

What’s in it for me
– Highlight the benefits. Describe what a product’s features will mean to your customer.

One more tip: Some of the world’s most recognized brands use a writing principle called the Rule of Threes. That’s because three is the smallest number required to make a pattern, and as humans, we’re wired to memorize them. When we bucket key takeaways into groups of three — and keep them brief — they are more likely to stick with customers.

Capser.com Homepage Casper pairs three benefits with icons for extra punch.

AllBirds.com Homepage Allbirds backs up a personal story with three related product features.

WealthFront.com Homepage Wealthfront includes not one, but three main headlines on their homepage to reinforce exactly what they do.

Maximize Your Microcopy

Imagine rushing to make a connecting flight in an unfamiliar airport. You listen for announcements, look for gate numbers, follow the flow of passengers, and eventually make it to right terminal. But if those cues are communicated in a foreign language you don’t understand, what do you look for? First, don’t panic! You most likely will scan the crowd for customer service agents, look for corridors with signs that feature iconography and subtitles in multiple languages. It’s the smallest details that put you at ease and get you where you need to go.

Likewise, microcopy is the unsung hero of website content. However, it goes largely unnoticed, yet these seemingly insignificant snippets of copy do a great service. Accounting for buttons, links, form placeholders, instructions, error and success notifications, tooltips, loading messages, and more, microcopy shows customers where they are within a workflow, drives conversions, and assures them that their private information is secure. To better meet customer expectations, plainly outline your expectations of them.

Write compelling microcopy that:

1. States exactly what to do
2. Reassures customers
3. Catches attention
4. Reinforces site tone
5. Clearly labels icons and forms

If auditing the microcopy on a site, focus on Calls to Action (CTAs), which are sometimes one-word and too generic (e.g., ‘Submit’, ‘Send, and ‘Go’). Not only do vague buttons and links lack personality, but they can also confuse and frustrate customers. Temper their concerns by specifying what will happen when they click (e.g., ‘Complete Your Registration’, ‘Send Your Comment’, ‘Get the Newsletter’).

Casper.com Calls to Action Casper’s buttons specify the product page they lead to. (Also notice the ‘magic’ number of buttons).

Lulu Lemon Shop  Lululemon’s promotional banner and footer forms feel personal, using microcopy to relate to the customer.

WildFang.com Homepage Wildfang’s Calls to Action matches the young, spirited brand voice.

Design for Content

Have you ever reviewed a design mockup and wondered what ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit’ means? It’s ok if you flunked Latin, we’ll translate it for you: ‘You and your design team aren’t on the same page about content strategy.’

Avoid waiting until the design phase to start collaborating and compiling sample copy. In fact, it’s impossible to gauge how a site will authentically look and feel, or how much content the client will need to add or trim, if populated by dummy copy. Build a content library in advance containing copy that is representative of the brand voice.

Now let’s say you’ve handed over that perfect, polished site content to the design team. Well-written, targeted copy will fall flat if not organized within a visual system. Designers can enhance good copy by applying the following UX and UI design best practices:

– Starting with the smallest screen sizes in mind
– Establishing a consistent visual hierarchy that prioritizes content based on font size, weight, color, and orientation
– Left align copy vs. center align
– Setting the maximum number of characters per line to 45-75
– Distinguishing primary CTAs by size and color
– Reserving certain colors within a palette for clickable objects only
– Meeting minimum accessibility color contrast ratios
– Stacking forms to follow common eye patterns

A few examples:

Apple.com Example Apple prioritizes headlines, distinguishes supporting features in a digestible way, and highlights CTAs using a single color.

CuratedKravet.com Product Page Curated Kravet’s Product Detail page buy form has a strong type and color hierarchy and is aligned for fastest completion.

MaddieStyle.com Mobile ExampleMaddieStyle.com Mobile Example Maddie, like all SD ecommerce sites, was designed mobile first.

Test Your Copy

At this point, we’ve given you a comprehensive checklist of copywriting tips, we need to re-emphasize that ‘Customers Come First’ is the most important rule of all. Scribble it on a note and stick it to your monitor, write it in magnetic poetry on the office fridge, get it tattooed like a cheat sheet on the palm of your hand (ok, maybe don’t do that one).

How can you ensure that your copy not only appeals to your customers, but also keeps up with your customers’ needs? Always A/B test. Using tools like Optimizely, you can compare variations of headlines, body copy, and microcopy being served to customers against a conversion metric to get real-time, data-driven feedback. As a result, you will Display the ‘winning’ variations — the copy that gains the most traction — and continue to refine it over time as your customer base grows and/or changes. A/B testing your copy helps customers help you.

Kickoff time is now! Your project team is formed and you’ve assembled an audience. It’s time to draft a game plan for headlines, supporting copy, and microcopy for your site. Uncap your red markers and circle these three key copywriting plays on your dry erase board, captain:

1. Keep it real. You succeed if your customers succeed.
2. Keep it short and sweet. Say what you mean, in your voice, in the simplest language possible.
3. Keep it fresh. Prioritize copywriting from the start, test it, and refresh it over time.

Copywriting strategy starts and ends with your customers. So, if you follow our tips and write smart, both you and your customers win big.

Written by: Gina Angelotti, Interactive Designer

Writing effective headlines

Using Your Words Carefully – Part 1

We’ve put together a list of tips and best practices to help you become a ‘web copy writing God’. Below you’ll see why it’s important to approach content strategy from a user perspective. Follow our tips to ensure your business goals and target customers needs are equally met.

When planning website content, the first questions to ask yourself are:

– What conversions do I value?
– What do I want customers to do?
– How do I want customers to feel?

But remember: Websites succeed when customers succeed. It’s not only about what designers, content strategists, or stakeholders want.

When customers visit a website, they’re initiating a conversation. Talk, listen, and respond to them.

For a successful user experience (UX), ask your customers:

– Who are they?
– Where are they coming from?
– How do they feel right now?
– How are they accessing the site?
– What do they need?

Then ask:

– How can I help them fulfill their needs?
– How will they feel navigating the site?
– What will make them feel more comfortable and safe?
– How will they feel when they accomplish their goal?

If you get to know your customers, you can anticipate their needs and better meet their expectations. You can plan content that:

– Meets them where they are
– Guides them through workflows easily, quickly, and transparently
– Communicates what you want to help them accomplish
– Instills confidence

There is plenty of data to identify which demographics most frequently visit your site, but customers identify themselves as more than their age, gender, ethnicity, and residence. They are real people with complex lives.

A key step in content planning is creating personas, specific examples of customers who use the site and their backstories. With personas in mind, you can tailor copy that personally and effectively speaks to your core customers. Personas are an especially useful tool if a website lacks substantial analytics data because you can make decisions that appeal to a defined target audience, if not a sample of actual users.

Ultimately, from a business standpoint, you value conversions, you want customers to complete certain tasks, and you want them to feel good about it. But to achieve that desired outcome, you have to put ego aside and communicate directly, specifically, and compassionately.

Now, imagine you’re having real face-time with your best friend. As a model BFF, your role is to ask her what’s on her mind, what’s missing in her life, and what you can do to help her. And you will go to extremes to show her that she’s the center of your attention.

Approach customers with the same intention. No, the delivery may not always be so casual depending on the service your website provides, but you should be communicating to users as if one-on-one. Standout copywriting speaks to individuals.

Like a friend offering wise advice, smart copy:

– Gets to the point quickly
– Uses active verbs
– Is concise, clear, and consistent
– Anticipates and answers questions
– Has a distinct voice
– Puts customers (or others) first

Getting real with your customers is just the first step. Next week, in the second installment of ‘Using Your Words Carefully’, I’ll be sharing practical applications of these six copywriting rules as well as design strategies to make your content shine. Stay tuned!  

Written by: Gina Angelotti, Interactive Designer 

Infographic Alert: Personalization

personalization infographic

Personalization 

is the practice of dynamically tailoring the content of your site to suit the wants and needs of each individual user.

How to Achieve 

Use personalization to achieve your business objectives and increase revenue with tools like A/B split and multivariate testing, content profiling and segmentation targeting.

Benefits

Benefits of personalization include more conversions, traffic, repeat visitors and happier customers. Imagine the possibilities when your website has the ability to sense and adapt to what each visitor wants.

Attention Span

The average human attention span decreased from 12 seconds to 8 seconds¹. Great content isn’t enough to stand out. Brands need to make an instant connection with their audiences by providing information that is custom-tailored to the user.

Marketing Costs

Content is one of the most inexpensive customer acquisition tactics. Traditional marketing requires the use of aggressive push mechanisms. Marketing through personalization brings audiences, leads, and customers to you².

Sources

https://www.sitecore.net/Learn/Blogs/Best-Practice-Blogs/Topics/Persona-and-Personalization.aspx

http://www.evergage.com/blog/7-stats-that-reveal-why-personalization-is-the-future-of-content-marketing/

https://www.sitecore.net/Platform/AIDA/Decisions/Personalization.aspx

¹Statistic from Statistic Brain 2013
²Statistic from Demand Metric
Vectors adapted from Freepik.com

Photography and Web Design

photographyinfographic

The internet is a visual medium. Visitors judge with their eyes and will only digest the content if you make the whole experience a pleasurable one.

“No matter the images you have in your library they will rarely be suitable for the task.” – Kris Jeary, Squiders

FIT FOR PURPOSE

You need photography that:

1. Has been taken by a professional.
2. Has a brief from both client & designer.
3. Shows products in high resolution.
4. Will render well on various devices.

DIRECT THE SHOOT

Benefits of allowing a web designer to direct the shoot include: clear vision, images that work with site, obtain images with purpose, and boost sales.

BUT…

“What about stock photos?” – Your Subconscious

PEOPLE BUY FROM PEOPLE

Good photography will show off the product and foster a sense of trust. Make the visitor trust you more than your competitors, let them know you are real people and not machines.

WORKING WITH A PROFESSIONAL

Choose your professional carefully. You want someone who:

1. Ask the right questions
2. Wants to understand your goals
3. Has web photography experience
4. Can balance different types of shots

IN CONCLUSION

Give you designer the tools to best meet your goals and present your product in the best possible light.

You won’t regret it.