Sandstorm Blog

Janna
How color can help with website accessibility

Color is a critical part of a brand. A branded color palette creates a beautiful experience, differentiates from one’s competition, and drives how users/consumers perceive and engage with a brand.

We all know the brand colors should be as consistent as possible in all marketing tactics, including digital, email, print, email, in-store, etc. This consistency is key in building a coherent brand experience and instilling consumer confidence.

Colors do not play well in all marketing tactics

However, the colors defined via printed materials sometimes do not translate well into the digital space. Many times colors are not dark enough or too similar. This is especially clear when we consider the requirements for an accessible digital experience.

Digital branded experiences for all users

Many of your website users have some level of color deficiency–1 in 12 men and 1 in 200 women in the world. Using the term color blindness is not accurate since 99% of all colorblind people are not really color blind but have a color deficiency.

Knowing many of your users will have some form of color deficiency, one must review the brand colors to be accessible. If not done, not only could your brand integrity be impacted or just not legible, your user experience could be hindered.

Creating accessible brand experiences is good UX

UI designers use color to help identify key call-to-actions through buttons and text links. We also use color as a navigation element and to establish visual hierarchy. But if those CTAs or that navigation is missed since the user cannot read the button label or the navigation is not legible due to lack of contrast, what will this user do? Well, they will leave your site and go to your competition.

Accessibility is more important today than ever before

Still not convinced you need to focus on accessibility? Here are a few things to consider:

  • Inclusion and reach. Between 10-20% of internet users experience disabilities. Ensuring proper access extends your reach and your ability to fulfill your mission.
  • It is the law. Just as you would make sure your building has hand ramps and elevators for wheelchairs and braille on signs, we need to take specific steps to ensure your digital experience and content is available to all visitors. Over the last few years, lawsuits related to the accessibility of websites have increased by nearly 10 fold.
  • Goggle bonus! Most accessibility improvements also improve search engine optimization since they make your markup and metadata clearer and more robust.

Now that you know why accessibility is so important, how do you go about making sure your brand colors are accessible?

Tone up your branded colors

At the beginning of a new project, the Sandstorm user-interface designers study all the colors in a branded palette. We use two online tools to identify how the colors should be used. These tools help us segment the palette into tones that can be used as buttons, navigation, color blocks, text links, and those colors that cannot or those that need to be adjusted for use on the web.

Build an accessible color palette

https://toolness.github.io/accessible-color-matrix/
We found this easy to use color palette builder. It allows you to quickly look at a range of colors on various backgrounds to see if they meet a contrast ratio of 4.5:1. When they do, great. When the colors don’t pass, we can immediately fine-tune the hue to identify the values that do pass.

Checking color contrast

https://webaim.org/resources/contrastchecker/
WebAIM’s contrast checker is a go-to tool for making sure the text color and background you are using are accessible. It provides instant feedback for WCAG AA and WCAG AAA ratings.

Once we have studied the colors, Sandstorm reviews the accessible colors with the client and their brand team through the creative process as well as an updated color palette. We never just change a palette, rather we embody a “Yes, And” mindset to review the colors and accessibility considerations collaboratively with our clients so they are informed and understand the rationale.

Ratio, WCAG… What???

If your head is spinning with WCAG and ADA lingo, don’t worry. It’s a lot to soak in and we want to help. Determining the level of accessibility can be defined through the level of WCAG accessibility. Most of our clients determine AA compliance is their goal. Only one has tackled AAA.

But you are not in this alone. Sandstorm conducts accessibility audits and can help to prioritize your list of issues. Our approach combines automated scans of your site along with a manual review of the accessibility of the brand including content, colors, and interactions. All of this resulting in a detailed report, which we review together to determine high priority areas.

Schedule continued accessibility reviews

Once your brand is validated and accessibility is made a priority, it’s important to not let all the hard work fade away. And color contrast is just one aspect of creating a truly accessible web site. There are always ways to improve, and your brand should never be left to stagnate. Select a timeframe that’s manageable and something you can adhere to. We recommend quarterly, to reassess your digital brand and make sure you address any new issues.

Good accessibility is good usability. Let us help you make your digital brand accessible. Contact us today to schedule a time to review the accessibility of your website!

This blog was posted by Janna on November 23.
Janna Fiester

About the Author

Janna Fiester

Sandstorm's VP of UX & Brand Innovation, Janna, is a design-thinker. Showcased in several design publications and exhibited at the Art Institute of Chicago, she is talented in taking nuggets of good ideas and nurturing them into solutions that are always strategic, engaging and visually delightful.

Andrea Wood
Designing History: The OI Centennial Website

How do you tell the story of saving a 2,000-year-old language over 9 decades, using fragments of tablets and inscriptions on ancient winged bulls to reveal a 6,000-year-old culture? Or tell the story of 100 years of research exploring 10,000 years of history?

This was our charge when we took on the responsibility for creating the Oriental Institute’s centennial site. To tell the stories that are the beginning of us, our lives as humans, together.

Founded in 1919, The Oriental Institute (OI) at the University of Chicago is a leading research center and world-renowned museum devoted to studying the civilizations of the ancient Middle East. The OI Museum exhibits one of the largest collections resulting from archaeological fieldwork in the Middle East, including more than 350,000 artifacts with roughly 5,000 on display on the University of Chicago campus.

Originally funded by a handful of visionaries including James Henry Breasted and John D. Rockefeller Jr., the OI has been a groundbreaking institution for over a century.

The Challenge

With a centennial approaching and over 10,000 years of stories to tell, the OI had a new challenge: find an interactive storytelling way to share the wealth of information uncovered over the years as well as present new expeditions and discoveries going on today. The OI needed a partner to create a digital experience celebrating its Centennial year and showcasing its 100 years of connecting ancient places, people and issues. The OI selected Sandstorm to lead this effort.

The Solution

Sandstorm and the OI team underwent a thorough UX and creative UI process while leveraging the new branding that was being designed specifically for the Centennial and the rebranded identity for the OI itself. The primary goal was to deliver an interactive, high-touch, narrative experience while showcasing the incredible depth of research projects and overall work of the OI. 

In addition, a key goal was to drive users to engage with the OI: registering for the Centennial Gala, donating, becoming a member, visiting the museum, or even adopting a dig. Making sure these CTAs and conversions link back to the main OI site was key, while also elevating the Centennial as a major milestone for the organization. 

Sandstorm implemented a new Drupal 8 instance for the OI centennial site and configured the CMS for design flexibility in the future. Over the course of a few months, Sandstorm transformed key content related to the OI’s history, research projects, fieldwork, and museum collection into a well-curated, digital microsite experience.

“The OI needed a website that would display a wide range of media types with pictures and videos but we really wanted to focus on interactive elements as well and find the most engaging way to display their research to users,” said Jeff Umbricht, lead developer of the Centennial site. “With work all over the world, we decided to create an interactive map that presents a visual navigational tool to explore key discoveries.”

To encourage museum visits and membership, Sandstorm also included an easy to access events page for visitors to experience OI events throughout the year.

Key elements of the experience:

  • Emphasis on displaying a wide range of information in a concise, scannable way.
  • Extending Drupal modules and features for strong content editor control and flexibility.
  • Interactive map to display research efforts in key locations in the Middle East. The solution provides an ideal balance of performance and interactivity.
  • Mobile-first approach that ensures the user has the same level of interactivity and scannability from any device.
  • Built targeting WCAG 2.0AA accessibility standards

Results

With the website complete, the University of Chicago has begun promoting the Oriental Institute’s Centennial, which kicks off in September with a Centennial Gala followed by a public event and includes activities throughout the 2019–2020 academic year. 

Visit oi100.uchicago.edu to learn more and be sure to visit the museum in person on the University’s campus in Hyde Park Chicago.

“Sandstorm’s work creating a digital experience for our Centennial celebration is a key element of our year-long effort focused on sharing not just the legacy and historical impact of the OI in understanding, revealing, and protecting the earliest human civilizations, but also recognizing that through our ongoing research and public outreach we can offer new ways of thinking about what connects us and why.”

- Dr. Kiersten Neumann, Curator of the Oriental Institute Museum, and Research Associate and Communications Associate of the Oriental Institute

Sandstorm wins Marcom Gold AwardHermes gold award 2020

 
This blog was posted by Andrea Wood on September 26, 2019.
Andrea Wood

About the Author

Andrea Wood

Andrea is Sandstorm's Managing Director and leader of our marketing strategy team. Like Goldilocks, she found her "just right" spot at Sandstorm after working in various large international and smaller startup agencies. Andrea loves tackling all kinds of problems and sees them as opportunities to do more, better or differently.

Janna
How to make your website more inclusive by design

If your website was a physical location, would you build it without access for people with disabilities? Of course not. You’re not a heartless monster. But a surprising number of websites forget about the needs of people with disabilities. Inclusive design seeks to change that.

The principle behind inclusive design is creating products and services that everyone can use. Not only does that provide accessibility to your website for people with disabilities, it creates a better experience for all of your users.

Color contrast is a big part of inclusive design and web accessibility. As one of the most important tools in our utility belt, color choice is a big part of a designer’s work. We use it for emotive and illustrative purposes. Red, for example, can be a great color to highlight importance and urgency. Contrasting it with white type can help draw the eye, and that color combination is great for getting users to address alerts.

So what happens when a user has difficulty seeing the color red? Well, it turns out that white text on a red background is completely invisible to people with color blindness—something we discovered during one of our usability studies. In fact, there are a number of color combinations that cause problems for the visually impaired.

Luckily, there are organizations like World Wide Web Consortium (W3C) to create standards for accessibility issues like color contrast. In fact, W3C went so far as to establish extensive Web Content Accessibility Guidelines, and the web community responded by developing tools that help designers create more inclusive sites.

Some of those tools, like WebAIM and Colorable, focus specifically on color contrast. To meet WCAG, normal, non-bolded text should have a contrast ratio of at least 4.5:1; for large text it should be at least 3:1.

What else can you do to start making sure your website is more accessible and inclusive?

1. Add Alternative Text to Images

“Alt text” is essential to web accessibility. Assistive technology, such as screen readers, relies on alt text to turn images into braille or speech for the impaired.

Most content management systems, like Drupal or Kentico, include an alt tag field for images. Start with your company logo, then add descriptive alt text for each image on your site.

2. Use the Right Heading Structure

Correctly ordering the HTML headings on each page makes it much easier for screen readers and the visually impaired to navigate your site. While design considerations might require this order to shift, try to follow it where you can. At the very least, make your page title and h1 consistent—it’ll help the people using screen readers to make sense of the content.

3. Stop Using “Click Here”

For many reasons, please stop using “click here” as link text. Not only does it make content seem outdated, “click here” is a vague and confusing link description for people who use screen readers. Instead, use strong verbs that tell users what you want them to do and what they get in return:

  • Register for the event
  • Request more information
  • Download this report

4. Utilize Free Web Evaluation Tools

In addition to color contrast tools, enterprising developers have created lots of free tools that evaluate your website’s accessibility.

WAVE, for example, provides a breakdown of errors, alerts, and features in a list form and a visual overlay so you can identify opportunities to improve your site.

Web accessibility isn’t a cut-and-dried, check-it-off-the-list process. But when you design with all of your users in mind, you make your website a more inclusive place to be. And who doesn’t want to be a part of that?

This blog was posted by Janna on August 2.
Janna Fiester

About the Author

Janna Fiester

Sandstorm's VP of UX & Brand Innovation, Janna, is a design-thinker. Showcased in several design publications and exhibited at the Art Institute of Chicago, she is talented in taking nuggets of good ideas and nurturing them into solutions that are always strategic, engaging and visually delightful.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Sandy
Chicago Web Design Firm, Company, Agency

Inside the mind of our creative web design team

We work hard. We design hard. We push our own creativity and the creative expectations of our clients with our "yes, and" philosophy. We have this undeniable desire to make our clients feel "wow'd" when they see our design concepts. And we often work late getting each concept just right so it's aligned creatively, strategically, and research-based reducing the subjectivity of our work. 

Our software interfaces, data visualizations, and web design transformations are driven by our usability expertise. The big difference in our creative execution is our practical thinking along with a desire for beautiful web design. We ask, "Can our users find the information that they need with this particular web design concept?" and "Does this work represent our best work?"

This blog was posted by Sandy on November 14.
Sandy Marsico, Founder & CEO

About the Author

Sandy Marsico

Sandy Marsico is the founder & CEO of Sandstorm®, a digital brand experience agency that turns consumer insights into engaging user experiences through our unique blend of data science, brand strategy, UX and enterprise-level technology.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
John
Hermes Platinum Award

The Hermes Creative Awards has honored Sandstorm Design with a platinum award for the agency’s redesign of the CLR Brands® website. The 2018 award winners were announced by the Association of Marketing and Communication Professionals (AMCP), which administers the annual Hermes Creative Awards international competition.

Sandstorm’s reconstruction of the CLR Brands® website—which showcases CLR® and Tarn-X®, two of America’s favorite household cleaning products—delivered a clean, intuitive design and a significantly upgraded user experience. The site was built on the Kentico EMS platform, which enables enhanced integrated marketing automation, site searchability and personalization.

Kentico named the CLR Brands® website one of its top 10 sites for June 2018.

The Hermes Creative Awards recognize the messengers and creators of traditional and emerging media. The annual competition is judged by the AMCP, an international organization consisting of thousands of creative professionals. Entries are received from corporate marketing and communication departments, advertising agencies, PR firms, graphic design shops, production companies, and web and digital creators.

This blog was posted by John on June 19, 2018.
John Rausch

About the Author

John Rausch

Over his 25 years in the advertising industry, John has produced award-winning work for many B2C and B2B clients. He is a passionate believer in the power of the brand and brings a strategic approach to every piece of creative.

Emily Kodner
NICB Drupal 8 E-Commerce Site

At Sandstorm®, we take security seriously. For the not-for-profit National Insurance Crime Bureau (NICB), that means preventing insurance fraud and theft across the United States. NICB turned to Sandstorm to design and develop a brand-new website that could better help them advance their mission.

The launch of this site represents a significant shift for NICB. The previous website addressed two audiences: the general public and current members. By focusing on non-member audiences, NICB can more clearly convey their message and raise awareness with common consumers.

With an iterative, user-centered approach that utilized usability testing to refine navigation items and page layouts, we designed an intuitive user experience that we developed in Drupal 8. By building in the newest version of Drupal’s content management system, we were able to give NICB a robust e-commerce platform with an intuitive administrative interface.

We are honored to help NICB raise awareness of their mission and help combat insurance fraud and theft. Check out the new NICB website for yourself.

This blog was posted by Emily Kodner on November 21.
Emily Kodner

About the Author

Emily Kodner

Emily is our Senior Director of Client Delivery. She consults with clients, leads projects and works alongside our team of creatives and developers to provide solutions to complex business challenges.

Sandy
Building a Website RFP needs these essential elements

Having trouble putting into words what you are looking to accomplish with your website? Not sure how to get all of your web development agencies aligned with your goals and objectives?

Writing a request for a proposal (RFP) is a challenging process if you don’t know where to start. By taking a moment now to think about your organization and your users’ wants and needs, you’ll save time later and increase the possibility of attracting the best agency to deliver success.

We can help! By following the website RFP response template below, you’ll have a clear strategy and a solid start for your next initiative:

 1. Brief Overview of the Project
Describe your current website situation or desired campaign and a description of what your investment will entail.

 2. Project Goals and Objectives
Define the motivation for your project. Why are you making this investment (i.e. expanded services, growth, new target audience, lead generation, attract job candidates)? What do you hope to accomplish? List your objectives.

3. Current Web Statistics
Include relevant web analytics such as top content, goal conversions, traffic sources, bounce rates, keyword phrases driving traffic, social referrals, mobile traffic, etc.

4. Technical Requirements
Are you integrating with any existing systems? List them. Do you require a specific programming language (e.g. .php or .net)? How is hosting currently handled?

5. Usability Requirements
How many different user groups do you have, and who are they? Are you interested in conducting usability testing? How about user research or developing a persona? 

6. Functional Requirements
What features and functionality do you need on your site? Some needs might include:

  • Secure user/password
  • Contact forms or dynamic forms
  • File uploading option
  • User account management
  • Social media integrations and social sharing
  • Database development
  • Video integrations
  • Member dashboards
  • Content management system (Drupal, Kentico, Wordpress, etc.)
  • E-commerce
  • Newsletter sign up
  • White paper lead capture
  • Blogs
  • 3rd party API integrations (LMS, AMS, HubSpot, Salesforce, etc)

7. Content Requirements
Approximately how many pages are on your current site? Do you have a content strategy? Who is going to be responsible for writing or editing your content? How will your social media channels be integrated?

8. Mobile Requirements
We only build websites that respond to your user’s device (i.e. mobile, tablet, desktop) – so we have that covered. Do you have any other special mobile needs that we should be aware of? 

9. Budget
Has your budget been set and approved? What is the range?

10. Timeline
What is your ideal project completion date? What is driving that time (i.e. trade show, new product launch, leadership change, board of directors, it should have happened last year)?


Ready to rock?

This website RFP response template can be the perfect tool to align all stakeholders on the essential building blocks for your project. It ensures you have a solid, thoughtful, and organized plan to guide your chosen agency, too.

A little upfront thinking and decision-making goes a long way in constructing an optimal site experience or campaign. You’ll be the rock star whose project launches on time, within scope, and under budget.

[Once you’ve completed all these steps, please send it to us. Sandstorm might be the right partner for your new project.]

This blog was posted by Sandy on April 3.
Sandy Marsico, Founder & CEO

About the Author

Sandy Marsico

Sandy Marsico is the founder & CEO of Sandstorm®, a digital brand experience agency that turns consumer insights into engaging user experiences through our unique blend of data science, brand strategy, UX and enterprise-level technology.

Jason

For awhile there, in the land of web design, it seemed that sans serif fonts were taking over. Arial, Verdana, Geneva, and even san-serif itself. Google got in on the action too, ditching its long time faith in serif fonts for its new logo a few years back.


 

Serif fonts have come back into vogue. Errol Morris, filmmaker and author, ran an experiment in the New York Times in 2012. Readers thought they were merely reading an essay and deciding whether or not they agreed with a statement about security. This was, supposedly, to tell whether they were optimists or pessimists, however Morris was actually testing something else. He was testing fonts. He chose several serif and sans-serif fonts to see if readers showed a favoritism toward any type of font. Which font was more convincing? Baskerville, a serif font, won hands down.

I’m guessing one study from 4 years ago isn’t enough to get you back on the serif train. Well, just this year, another serif font Times New Roman, was voted “most trusted typeface” by UK company, solopress, following a survey of 1,000 people (Comic Sans came in second place, so no survey is perfect).
 

That’s not all, though. The US National Library of Medicine, the Centers for Disease Control, as well as others in the crossroads between government and medicine recommend a serif font: “Serif fonts are usually easier to read than sans-serif fonts. This is because the serif makes the individual letters more distinctive and easier for our brains to recognize quickly” (PDF).


A few google searches will show you that serif fonts have a reputation for readability, but also for conveying nostalgia and authority.

One of our recent clients, Vibrant (Formerly DHCU) came to us with a rebrand. For this client, we needed a way to merge the fun and friendly atmosphere of their business, while not undermining the trust and reliability you’d expect from a financial institution. Our solution was a mix of exciting and engaging color for their brand married with a serif font for their logo to keep their brand grounded in the financial world.

 

 

If your website could use a new look, or you're looking to build trust and confidence with your brand, Sandstorm can help.

 

Now get your serif on (go ‘head, be gone with it).

This blog was posted by Jason on January 27, 2017.
Jason Dabrowski

About the Author

Jason Dabrowski

Jason is one of Sandstorm’s designers and also helps keep the office running smoothly. As a veteran of the theatre—from acting to directing, lighting to set design—he knows the value of hard work and a positive attitude. Look for his unique voice on the blog.

Joshua
Ensono, branding, tech, mainframe, brand strategy, content strategy, marketing strategy, web development

Machines possessing hopes and dreams is a classic theme explored in science fiction. Sandstorm® explored this theme when Acxiom IT restructured their organization and needed a rebrand to reflect their new position as a tech company that dreams of the future.

Acxiom IT recently became a standalone infrastructure management services business, which required a new name and brand strategy to set them apart from their former parent company. Sandstorm® was hired to guide the 46-year-old business as they developed a new corporate identity. The result: the Ensono brand and a vision for the future.

Sandstorm®'s first step was diligent research. We examined the client's history, needs, behaviors and desires to understand where they've been and devised a marketing strategy to help them reach where they wanted to go. In speaking with their senior leadership, it became clear that they wanted to position themselves as a solution that meets the needs of the present and the future. Although they offered industry-leading mainframe solutions, Ensono needed help representing themselves as a company that develops and innovates for the future.

With renewed focus on addressing current client needs while engineering solutions for the demands of tomorrow, we turned to creating a new name. Sandstorm® went international while exploring the concepts of progress and dreaming: "enso" is a Zen concept that refers to strength and creativity, and "in sogno" is an Italian expression meaning "in dreams." By merging these words and concepts together, Ensono, or the company that dreams, was created. This idea of inventive and adaptable thinking followed through the positioning statement, key messages, content marketing tactics, and digital marketing strategies.

Sandstorm® assisted Ensono with their brand launch and website development and has continued to partner with them on many projects including: collateral materials, promotional video, product campaigns, corporate signage, and assisting with the interior design of their new office space.

If you are dreaming of a new marketing strategy, Sandstorm can make it a reality.  

 

This blog was posted by Joshua on August 4, 2016.
joshua sovell

About the Author

Joshua Sovell

As the Marketing Manager Joshua is in charge of crafting the Sandstorm narrative via compelling blog content and community engagement.

Joshua
Hydrology responsive website.  beautiful bathroom picture

The Paris runways are not a normal inspiration source for home decorating projects. But that is exactly what inspired Sandstorm® when Hydrology came to us for a new website. Hydrology, a high-end purveyor of kitchen and bath furnishings in Chicago, wanted an online user experience that mimicked their sleek & luxurious products. To capture that opulence, Sandstorm® tapped into the ambition and extravagance of the fashion world.

 

The home furnishing industry standard is nearly the opposite of runway glamour. It features flat and transactional product images that focus on product details while ignoring the bigger task of a completed room. This limited industry representation was an opportunity to set Hydrology apart. Pulling inspiration from fashion designers like Burberry, Sandstorm® crafted the new online experience to feel less like a product website and more like an editorial spread of your dream house.

 

The photography-focused site presents an aspirational goal, while highlighting individual products. We utilized Masonry, a JavaScript gird layout library, to allow the photos to speak for themselves. The navigation is subtle so as not to distract from the quality products or the end goal of an exquisite environment.

Check out the new Hydrology site here

This blog was posted by Joshua on June 2, 2016.
joshua sovell

About the Author

Joshua Sovell

As the Marketing Manager Joshua is in charge of crafting the Sandstorm narrative via compelling blog content and community engagement.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 

Pages