Sandstorm Blog

Rachael
Color Alone is Not Enough: 7 ways to support the use of color on your website - paint buckets showing different colors

For many sighted website users, color is a useful way of sorting and coding information. But it’s important to remember that being sighted is not the “default” condition; the World Health Organization estimates that approximately 2.2 billion people have some kind of visual disability. That’s nearly 30% of the world’s population!

People with visual disabilities, including those who are red-green colorblind, blue-yellow colorblind, low-vision, blind, or deaf-blind, may not be able to see the differences between colors, regardless of the level of contrast between them. Therefore, relying on color alone to communicate information could deny important content information to a significant portion of your users.

This isn’t to say that you can’t use color to convey information - in fact, it’s a useful way to reinforce information for users who can perceive color differences. But to ensure that visually disabled users can access your content, the Web Content Accessibility Guidelines (WCAG) require that websites include at least one non-color visual cue to communicate the same information. As is often the case, solutions designed with accessibility in mind will benefit non-disabled users as well - including people who prefer to print things out in black and white.

What can I use to support color for accessibility?

There are many different ways that you can visually communicate information that does not require color. There is no one-size-fits-all solution, and which mechanism you use depends on your situation and what information you’re trying to convey.

Tools that can be used to support color accessibility may include:

  1. Patterns, fills, & textures (e.g., solids vs. stripes or dotted line vs. solid line)
  2. Symbols (e.g., add an asterisk, checkmarks or X’s)
  3. Adding text labels & cues
  4. Underlining, bolding, or italicizing text
  5. Changing typeface
  6. Increasing or decreasing font size
  7. Adding or changing shapes (e.g., a square becomes a circle)

Common cases where color is used to convey information & alternatives

Charts & Graphs

Color is useful in pie graphs, bar graphs, and other data visualizations to indicate different categories of data. When using color in a chart or graph, it’s best practice to use different tones of the same color (i.e., three different shades of blue rather than red, green, and blue) to ensure that the colors appear different if converted to black and white. Common supporting visual cues for charts and graphs include different fill patterns and text labels for each category of data.

Menus

Color is often used in menus to communicate where a user is currently “located” in a site or which menu item has been selected by the user. Common supporting visual cues here include adding an underline or an outline to the relevant item.

Buttons & Links

Color changes are often used in buttons and links to convey hover states and focus states (i.e., which item is about to be selected by the user if they click their mouse or hit “Enter” on their keyboard). They are sometimes also used to communicate visited states, or which buttons and links were previously selected by the user.

The presence of a link is usually communicated by using an underline and a different text color from the body text. To maintain good UX, you should keep your links underlined. Therefore, changes in the typeface itself could communicate a focus, hover, or visited state (e.g., all caps, bolding, or italicizing the text).

Users don’t expect button text to be underlined, so that would be a great way to communicate a state change. You could also add text elements like brackets, or change the shape of the button itself.

Error Messages

Form fields are often outlined in red to communicate an error, such as a mismatched username and password or an empty required field. Adding asterisks or warning symbols are common ways to communicate error messages. To go a step further, consider adding text that explains the error and how to correct it.

Support Color Differences with Visual Cues

Color can be an effective way to communicate information for those who are able to perceive it. But to ensure the most impactful user experience for everyone, WCAG requires that there are additional visual cues to support color differences.


Need help identifying areas to improve your website’s usability? Contact us today to learn more about our accessibility audit.

This blog was posted by Rachael on December 7.
Rachael, a white woman with curly, shoulder-length hair, smiles at the camera. She wears a mauve top and a brick building is reflected in the window behind her.

About the Author

Rachael Penfil

Rachael is UX Manager and co-leads the accessibility team. Rachael advocates for users while keeping client needs in the forefront of her mind.

Devin
Accessibility keyboard

Adding alternative text (“alt text”) to images seems like a no-brainer when managing your website. But ensuring image alt text is implemented properly and follows ADA and WCAG accessibility compliance is a little trickier than you think.

What is Alternative Text and Why Is It Important?

Alt text is a tenet of inclusive and accessible web experiences for all users and provides users with visual disabilities access to key visual non-text content including photos, infographics, logos, icons, and other images.

Alt text lives in HTML code inside the alt attribute, which is embedded in an image element. It’s important to code this correctly to ensure a smooth, accessible, and delightful experience for users with access needs.

So how do you write good alternative text? Here are 5 best practices to improve your skills.

  1. Identify and convey the purpose of non-text content

    When you have a lot of images on your site to write alt text for, it’s easy to go on auto-pilot and just describe the image. However, this is not going to create an accessible experience for users with visual disabilities (like blindness, deaf-blindness, or low vision), who may be using assistive technologies, like screen readers, to access the information conveyed by images.

    An example is the magnifying glass icon. Good, accessible alt text would be “search” not “magnifying glass” - the aim is to convey the purpose of the text, rather than just a literal description.

    If the image acts as a button or a link, you will need to add the action keyword to initiate, like an icon of a cart. Instead of “add to cart” as the alt text, try “ Click add to cart.” Having the action as part of conveying the purpose makes it easier for users to identify a button or link and is crucial for those that need to speak the action aloud to get the button or link to open.

  2. Remember that screen readers read the alt text aloud

    Screen reader users can program them to translate the text to other outputs, Braille, or voice command devices.

    A quick way to test alt text is to read it aloud to a user that does not know what the image is. If they can identify what the image is trying to convey based on your alt text alone, great!

    However, for optimal results, conduct testing and collaborate with screen reader users and users with disabilities to improve your site’s accessibility and overall user experience. They know how they interact with web content better than anyone else.

  3. Complex images require a long description with alt text

    When the alt text alone is too short to describe your image, you should add a long description (also called an image description). In these cases, alt text is still required and is used as “directions” to point to and access the long description.

    Long descriptions are needed for complex images like graphs, charts, medical illustrations, infographics, detailed photographs, etc. to fully describe the more complex purpose of that image. For example, bar graphs present data that will need to be fully described, as well as the intended conclusion to draw from the data presented.

    You can hide these long descriptions using the appropriate ARIA labels, however, it’s best practice to make them available to everyone. For example, if there is a bar graph on a webpage, users with dyscalculia may have difficulty interpreting the graph and may not use a screen reader to access the text alternatives. A great solution is to have the long description available to all users in the surrounding text near the graph image. So for this, your alt text can look like “Annual Revenue per Quarter, see long description in next paragraph.”

  4. The rules are different for decorative images

    How do you know if an image is considered decorative? If the visual content provides no information, then it is considered decorative.

    Because alt text is required, in this case, you would leave the alt attribute blank, like alt= “ ”. This tells screen readers to “skip over” the image. If you don’t include the empty alt attribute, the screen reader will read the image file name instead. Remember, screen readers, render the alt text into speech or Braille outputs for users who can’t see the content. If just the image file name is being conveyed, rather than the purpose of the image, the experience will be inaccessible and frustrating for users with disabilities.

    When images are identified and described fully by the surrounding text, like an icon that supports surrounding link text, the rules for decorative images apply. When the link text or surrounding text is the same as alt text, it will create a repetitive experience for screen reader users.

  5. People count too! Photos of people should be described fully

    And to the best of your ability! This is because otherwise low vision and blind users are denied important contextual information that sighted users have available to them. When a photo including people is chosen for your website, it was probably selected to show diversity and/or target audiences. It’s important to provide this information to low vision and blind users as well. By describing people in images, you can provide a fully accessible and more inclusive experience for users in the disability community!

    When you’re describing images of individual people, you can either use alt text and a long description or use an informal short description embedded in the alt attribute (or in other words, in place of the alt text). Short descriptions are more common for alt text for images of people and are generally about two sentences long.

    When you are describing people in an image, it’s a best practice to ask the person in the image how they would like to be described. If you can’t ask, you can follow some general guidelines.

    Characteristics you should include are:

    • Descriptions of skin color, not necessarily race or ethnicity. Use descriptions like light-skinned, medium-skinned, medium-light skinned, medium-dark skinned, or dark-skinned.
    • Descriptions of gender presentation instead of assuming someone’s gender. Use descriptions like female-presenting instead of woman, female-presenting child instead of girl, or male-presenting instead of man. There are many different words used for gender expression!
    • You can also use non-binary for folks that do not identify with female or male genders and provide this identity information publicly. Again, it’s best to ask the person directly if you’re able to do so!


    If it’s helpful to understand the context of the image, you can describe additional features of individuals, like hair color and style, height, clothing, age, etc.

Remember, screen readers and other assistive technologies translate alt text through speech and braille outputs, so consider the context in which the image is being used.

Get into the practice of asking yourself….

  • What is the text content talking about?
  • Why was this image chosen?
  • What is it trying to communicate or show?

Keep in mind, the CDC reports that 1 in 5 Americans live with a disability. The result of proactively choosing accessibility will open your website up to reaching a bigger audience while saving you time and money over the long term. Added bonus! Your hard work will also increase SEO while improving the perception of your company and brand.

Are you unsure if your website meets the current requirements for accessibility standards?
Contact us today to schedule an accessibility audit of your site or discuss your accessibility challenges!

This blog was posted by Devin on November 5.
Devin Owsley-Aquilia: light-skinned non-binary person smiling, with dark blonde hair pulled back, wearing a black turtleneck against a grey wall

About the Author

Devin Owsley-Aquilia

Devin is Scrum Master, Agile Master Certified, co-leads the accessibility team and leads complex, enterprise web development for a diverse set of higher ed, consumer, and B2B clients.

LauraC
Food Export: When a Website Redesign Turns Into a Rebrand: 5 Steps to Getting It Right

The Sandstorm team recently presented at the ASAE Annual Meeting 2021 on “How to Declutter” a brand. In sharing the details of our work with the Food Export Association of the Midwest and Food Export USA - Northeast, we reflected on the journey and how we got there.

It’s not uncommon when undergoing a redesign project, that organizations quickly realize that the new design of the website can be less impactful if the branding does not align. Our partnership started out similarly -- focused first on a redesign and update of the website.

But through primary research via 1:1 stakeholder and user interviews, the team quickly realized there was a deeper need beyond just the website. There was a real opportunity for Food Export to rebrand itself to better connect with its target audiences.

Sandstorm and Food Export pivoted our plan to integrate these 5 Rebranding Steps with the website redesign, in order to invigorate the brand and give it new life:

Step 1: Research, Research, Research

Sandstorm quickly immersed itself in Food Export’s brand, culture, market, and competitive set through primary and secondary research. The team quickly learned that the Food Export Association of the Midwest and Food Export USA - Northeast brands were unclear.

Even the most established companies with a clear mission statement, vision and values, don’t always have a clear brand and brand platform. This can create confusion and without a defined brand, organizations often struggle with trying to communicate everything to everyone. For Food Export, this was evident in the pages of copy walls on the website and dense copy within its marketing materials.

Sandstorm’s goal was to create a clear, distinctive, and cohesive brand. Through 1:1, in-depth interviews (IDIs), the team was able to get a deeper understanding of the brand and positioning by not only speaking directly to its constituents but also reviewing the current market, industry, and competitive landscape.

Step 2: Define the Brand Platform

From there, Sandstorm defined the organization’s desired position in the market and developed a brand platform to guide the personification of the brand. This is comprised of:

  • Brand Essence is the single, simple idea that lives at the core of the brand. And is the internal reason for being.
  • Positioning is the core idea that ultimately sets you apart from your competitors. To work, it must be believable, distinctive, and relevant.
  • Personality defines the character of the brand in human terms to shape the feel and tone of communications.
  • Promise is the way the brand will satisfy expectations, fulfill needs and establish trust.

With the brand now established verbally, the team set out to align this with the visual elements of the brand, beginning with the logo.

Step 3: Refresh the Logo

Brand logo refreshes or updates can feel overwhelming, from aligning on new logo requirements or considerations to getting stakeholder buy-in, to the stress of a global internal and external roll-out. However, this is a critical step to ensure the brand will continue to resonate with its target audiences (current and future).

Logos do not need to change often, but they should be re-evaluated when:

  • Business has evolved by either changing or expanding its offering
  • New competition and market changes occur
  • Speaking to a new audience(s) with new products or services
  • Reflecting new brand platform to bring brands to life visually
  • Aligning with shifts in industry and technology, as a brand’s logo can not only feel aesthetically tired, but the design may not be compatible with trends today

For the Food Export Association of the Midwest USA and Food Export USA - Northeast the latter two were major drivers behind updating the brand. Previous logos had gradients and details that were dated and did not translate to digital mediums.

As a result, the team underwent a refresh of the logo, which helped to not only modernize the brand experience but also deliver important consistency for how the brand should be used across Food Export’s ecosystem.

Step 4: Create the Brand Identity

With logos established, the next step was to complete the rest of the brand identity. The brand identity set out to capture the global opportunities that Food Export offers through use of vibrant colors, bold authentic photography and a layering of elements to create depth and richness to the creative. Branding elements, typography, imagery, font usage, primary and secondary color palettes, as well as example brand applications were developed and then pulled together in the brand guidelines. This serves as the digital ‘rulebook’ for all aspects of the look and feel of the brand and provides important brand consistency for all Food Export’s communications.

Step 5: Activate the Brand

With the refreshed visual and brand identity complete, the next step was to internally roll out the brand to get buy-in, input and generate excitement with key stakeholders, employees, and leadership, while delivering the assets they needed. From there, Sandstorm moved into the external launch of the brand, which was tightly integrated with the launch of the website and most prominent digital and print asset - www.foodexport.org.

The new site included personalization (key messaging, personalized pricing options, related content) while providing a much more tailored and focused experience. In addition, Sandstorm updated key brand and visual elements, while modernizing infographics and critical tools like its Program Guide, making it easier for its members to engage with the content.

Measuring Success

Not only has Food Export Midwest and Northeast received incredibly positive feedback on the new brand and website experience, but the analytics show a significant lift in website session duration, overall clicks, and impressions, as well as a much lower bounce rate, so users are finding what they need much more easily in the new experience.

And the icing on the cake was winning a Hermes Gold Award for the work we completed on the brand refresh and website.

Check it out! www.foodexport.org

This blog was posted by LauraC on September 22.
Laura Chaparro

About the Author

Laura Chaparro

As Sandstorm's Senior Account Director, Laura helps clients grow their businesses. She has worked at both big and small agencies, with small local and global brands garnering extensive experience in B2B, B2C, and retail marketing.

Amanda Heberg
How the Agile Process Helped Launch a Boat (Show)

The Agile Process

Scrum? Agile? Waterfall? Kaban? You likely have heard of these concepts and maybe adopted some version to your software, application or website development projects.

In its simplest form, Agile methodology is a project management process.

Scrum comes from the sport of rugby, where in a scrum formation everyone plays a specific role working towards a quick adoption of strategies. In complex projects just like on the rugby field, scrum facilitates team collaboration and iterative progress towards a goal. Teams practicing Scrum use Agile methodology.

As a Scrum Master, I make sure the team lives agile values and principles and follows team processes and practices. The responsibilities include establishing an environment where the team can be effective and clearing obstacles along the way.

For a look into how we put all this into practice, here is work we did recently in partnership with the nation’s leading trade association representing boat, marine engine, and accessory manufacturers, the National Marine Manufacturers Association.

The Challenge

The National Marine Manufacturers Association (NMMA) has an expansive ecosystem of websites across multiple business units and the boat, marine engine, and accessory manufacturer audiences it serves. Primary among these websites are more than 15 websites that serve the Boat Shows happening across the country, like the Chicago Boat Show (www.chicagoboatshow.com), which hosts hundreds of thousands of attendees.

Over the past two years, NMMA made significant investments in Acquia (Drupal’s Platform as a Service, PaaS) and moved its websites to the Acquia Cloud and Digital Experience Platform (DXP), with the goal of centralized site and application management and reducing the time required for labor-intensive infrastructure management.

Following the transition to Acquia, NMMA asked for Sandstorm’s support against clear goals for the project of providing centralized management of the multisite environment, uniform content blocks and streamlining code as well as fully optimizing the site for performance, SEO, user flow and content administration.

The Solution

The highest priority for NMMA was tackling the Boat Show sites, as there were UI updates and improvements that needed to be implemented. We also needed to re-architect the multi-site management so the collection of roughly 15+ sites used consistent theming, features and components along with the set-up of continuous integration. This meant creating a deployment structure to support clear data management of the different sites, including content blocks and forms and controlling the changes to be tested through one branch.

Given the time-sensitivity and breadth of the work needing to be done, Sandstorm and NMMA collaborated through an Agile development methodology, using the Scrum framework. This supported a combined Sandstorm & NMMA team with clear roles, an ability to prioritize what stakeholders needed the most, and the ability to adhere to a tight timeline with productive, incremental sprints.

Each sprint was prioritized by NMMA to include enhancements, structural updates, and process improvements while keeping close management of the backlog, so we could reprioritize as the needs of the business shifted. Sandstorm led a daily scrum where the full team communicated tasks, updates, challenges, etc., which provided a continuous cycle of teamwork-led solutions each day.

The Results

There were several successes from an agile-led partnership for both NMMA and Sandstorm, including:

  • Improved administrative user experience and streamlined management of the NMMA Boat Shows websites within the multi-site framework.
    • Allowing for one branch update to affect multiple sites and changes to be adapted faster with no rework for the individual sites.
  • Improved technical documentation. By managing development features and notes via Jira cards, we were able to instantly improve technical documentation and help structure the deployment processes.
  • Stronger NMMA ownership. With an integrated approach and stronger team-wide knowledge and documentation of the systems and processes, NMMA was able to take more ownership of the product and had the tools in place to support current and future team members.
    • This was key for the multi-site deployment process and management of the separate databases per show site.
    • The development and deployment process can be controlled by the NMMA team and not one single team holds the keys to that process alone.
    • The NMMA team became sufficiently knowledgeable in managing their improved Acquia & Drupal 8 website’s structure and can stand on their own.
    • This allows NMMA to leverage Sandstorm’s expertise for future code enhancement implementations instead of spending budget resources on day-to-day management.

With this implemented Scrum framework, the combined Sandstorm and NMMA teams were able to build features efficiently, easily prioritize work and progress through the project quickly and successfully.

Want to learn how our integrated Agile and Scrum methodology can help move your development efforts forward? Contact us today to learn more!

This blog was posted by Amanda Heberg on February 26.
Amanda Heberg

About the Author

Amanda Heberg

As the VP, Business Development, Amanda leads new business development, sales, partnerships and marketing strategy across Sandstorm. Amanda collaborates closely with new clients to build strong, long-lasting partnerships while aligning Sandstorm's capabilities to solve client business problems.

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 on September 26.
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
ACOEM's New Website Wins a dotCOMM Gold Award for It’s Intuitive UX and Enriched Member Experience Built In Kentico

About

American College of Occupational and Environmental Medicine (ACOEM) is the leading association of medical professionals who advocate and oversee the health of workers, the safety of workplaces and the overall quality of environments.

The Challenge

ACOEM’s website and several related microsites utilized an outdated technology, an ineffective user experience that did not reflect the mission of the association nor the user needs of the occupational and environmental medicine community. The content was extremely deep and relied on a poor search experience, which often led to users contacting the help desk, putting unnecessary strain on their staff, or abandoning the site.

Goals of the redesign included: ensuring the site informed users about occupational and environmental medicine (no tree-doctors need apply); Single sign-on for critical member benefits; reaching emerging professionals entering the workforce (career ops, connecting with peers, educational content); and offering special interest communities to connect and increase member engagement.

The Solution

The new site needed to be clean, intuitive, mobile-first with integrated faceted search, while delivering a robust administration experience for ongoing content management by ACOEM staff.

ACOEM wanted the new site to work from the existing marketing materials, but not be a slave to the printed brand. Sandstorm knew going straight to visual UI layouts would not give the teams the opportunity to work together—to “Yes, And”, which is one of Sandstorm’s guiding principles for our creative work. Because of this, Sandstorm began the UI process with brand/mood boards in order to gain alignment on the visual direction. Once a brand/mood board was selected, Sandstorm quickly transitioned into visual user interface designs with a mobile-first strategy.

We also identified the navigational structure was going to be broad and deep resulting in a dense navigational structure. ACOEM was extremely motivated to use a unique mobile-first drawer pattern for the navigation on all viewports. This innovative navigation resulted in a very clean experience that was user-friendly and unique within the association space.

Sandstorm’s UX and Kentico-certified development team worked collaboratively to build the page layouts using a form-based model instead of an open structure. This approach enabled the site to embody a consistent user experience while making site content and image updates intuitive and easy to manage for the ACOEM team. Knowing search was fundamental to the overall user experience, we leveraged Kentico’s tagging, categorization, Google sitemap, and Smart Search to significantly improve the relevancy and findability of key content; in addition to integrating with Fonteva’s AMS to deliver a personalized member experience.

The website was a critical part of ACOEM’s overall digital transformation journey led by our partner, .orgSource, as they helped modernize the technology landscape including new software for the AMS, finance and workflow analysis.

The Results

The dotCOMM Awards honored the American College of Occupational and Environmental Medicine and Sandstorm with a Gold award honoring excellence in web creativity and digital communications in the association space. Check out the new ACOEM site.

The 2019 dotCOMM Awards is administered and judged by the Association of Marketing and Communication Professionals (AMCP), one of the largest, oldest and most respected evaluators of creative work in the marketing and communication industry.

Since launch in January 2019, ACOEM has seen significant improvement, including:

  • User interactions (sessions) increased 32%
  • Return visitors increased 18%
  • New users (no prior sessions) increased 13%

Sandstorm continues a strong partnership with ACOEM and provides ongoing UX/UI improvements, development and AMS integration support and maintenance for the site, including data analytics in order to drive key insights for optimization. In addition, to further extend the Kentico platform, Sandstorm is underway with building much improved Member and Find a Provider searchable directories that leverage key user data stored in Salesforce (Fonteva), as these are highly visible (and highly utilized) features of the site.

This blog was posted by Janna on August 20.
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.

Amanda Heberg
Search-driven web experience for the National Business Institute

The National Business Institute is a professional association providing continuing legal education (CLE) for attorneys and paralegals for over 35 years and delivering over 18,000 in-person and on-demand resources.

The Challenge
While NBI’s live seminars and OnDemand resources lead the industry, their website and subscriber experience were trailing behind. NBI partnered with Sandstorm—to create a personalized, user-centric (and most importantly, revenue-driving) experience for existing subscribers, transactional customers, and prospects.

The Solution
Sandstorm began with user research that identified the motivations and expectations of each type of customer. Then, we crafted a myriad of user flows based on user groups, extensive site map, navigation, wireframes and creative to align each step in the purchase process with those expectations.

By conducting usability testing, we uncovered user needs, expectations, and insights, including:

  • The use of key statistical information vs. the use of customer testimonials on the homepage was much more impactful to key audiences.
  • Including specialty credit details in the search results, since this is a key identifier in the selection of a course and purchase process for users.
  • Users wanted stronger use of colors throughout the experience, but still honoring the blue that NBI was well-known for.

Because findability and conversion were primary goals, we needed to determine how to best integrate a robust search throughout the experience. The final site includes multiple layers of search exposed within the experience to ensure users can quickly and easily find desired courses and find them in the format they wish to consume them.

Personalization was also key. Sandstorm worked closely with NBI’s development team to build in targeted courses based on a users’ geolocation and schedule (recommended courses, happening soon, and best sellers).

As NBI was shifting its business model to more emphasis on a subscription model vs. one-off courses, the conversion path to becoming a subscriber needed to be clear and slightly varied experience from an individual visiting the site for the first time.

And, knowing the mobile experience was critical to these users, we crafted and deployed a fully responsive designed experience, including personalization based on returning users vs. new users to the site.

Finally, we extended the user experience and creative via front-end development and collaborated closely with NBI’s in-house development team to ensure the experience seamlessly integrated with NBI’s back-end CMS, technology and complex e-commerce systems.

The Results
The Hermes Creative Awards honored the National Business Institute and Sandstorm with a Gold award for the agency’s redesign of the NBI website.

The 2019 award winners were announced by the Association of Marketing and Communication Professionals (AMCP), which administers the annual Hermes Creative Awards international competition.

In addition, the website has experienced significant improvement, including:

  • Organic SEO positioning has increased by 20%
  • Conversion rates are up 12% year over year
  • Experienced higher search and filtering traffic that converts at a much higher rate than the prior site experience
  • Received extremely positive feedback from its subscription-based customers via the streamlined and much-improved checkout flow

 

“Thank you for your help. The site looks great and we couldn’t be happier with what you did for us.”

Jim Embke - Managing Director, National Business Institute

This blog was posted by Amanda Heberg on April 30.
Amanda Heberg

About the Author

Amanda Heberg

As the VP, Business Development, Amanda leads new business development, sales, partnerships and marketing strategy across Sandstorm. Amanda collaborates closely with new clients to build strong, long-lasting partnerships while aligning Sandstorm's capabilities to solve client business problems.

Amanda Heberg
The Society of Actuaries innovates with an Interactive Toolkit in Drupal 8

The Society of Actuaries (SOA) is the pre-eminent association for the actuarial profession. With over 30,000 actuaries as members, the SOA’s mission is to advance actuarial knowledge and the ability of actuaries to provide expert advice and solutions for financial, business and societal challenges.

The Challenge

In line with their mission, the SOA wanted to take the conceptual idea of an Actuarial Toolkit and bring that to life in Drupal 8 as a web application. The SOA's existing Glossary App needed to be redeveloped into a web app, in addition to incorporating data from multiple websites.

The SOA kickstarted the project internally with some baseline requirements and initial design mock-ups to support the reimagined Actuarial Toolkit. Sandstorm was able to quickly collaborate with the SOA and build upon the work completed, in order to begin transitioning into more detailed user experience and technical requirements. 

The Solution

The SOA partnered with Sandstorm in order to build an interactive web application that delivered a variety of online resources for actuarial candidates, actuaries, and actuarial analysts. We identified with the SOA that Drupal 8 would be the optimal platform that would offer a high level of flexibility and a scalable development framework to support the desired interactions along with a robust mobile experience.

With a Drupal-based solution and our proposed technical architecture, we were able to provide a scalable framework for the SOA to expand and grow to support the other SOA applications. The goal was to make it simple for the SOA to build out new solutions over time, without significant investment each time. The architecture also supports opportunities to transition to a headless Drupal solution (if desired in the future), which could be used to drive native mobile apps.

In addition, the Actuarial Toolkit supports the longer-term vision and consolidation of its online tools to support the Actuarial Profession.

The Actuarial Toolkit includes the following features:

  • Interactive Actuarial Glossary including over 500 peer-reviewed definitions, concepts and practice area terminology for those working with Actuarial Science
  • Bookmarking to save favorite pages in the toolkit
  • Flashcard function to display glossary terms saved for quick access and review
  • Main hub for practice areas, giving users access to pre-defined mathematical definitions and data templates used in the profession including curated live illustrations of actuarial and mathematical concepts using R
  • Integrated Single Sign-On experience with the SOA’s Association Management Software system and website so users can move seamlessly through the entire web experience

The Results

The SOA launched the new Actuarial Toolkit after working for many months curating the content and finalizing the industry definitions and terminology to ensure a highly usable, high-touch, personalized experience. Overall feedback has been incredibly positive from the SOA membership and community, not only offering an interactive suite of tools to advance learning in the profession but also giving the users even more personalized experiences that they can control.

https://actuarialtoolkit.soa.org/

This blog was posted by Amanda Heberg on April 22.
Amanda Heberg

About the Author

Amanda Heberg

As the VP, Business Development, Amanda leads new business development, sales, partnerships and marketing strategy across Sandstorm. Amanda collaborates closely with new clients to build strong, long-lasting partnerships while aligning Sandstorm's capabilities to solve client business problems.

Sandy
3 Digital Trends Associations Should Start, Stop and Continue Doing

As part of our annual review process we use the start, stop, continue retrospective technique. We've found it's a great way to recognize successes and opportunities for growth for individuals, teams and organizations. Thinking about the digital transformations we've seen with associations lately, below are some retrospectives on what we see trending with membership organizations. 

START
Creating a culture of data. Using data to inform your decisions and weaving that into everything you do is critical to success. We are working with an association today where we're collecting and analyzing data to identify educational gaps and drive new products (and revenue). We're also utilizing data to drive content and functional requirements on new website builds to improve the member experience. By taking a fresh look at member data for a global membership organization, we were able to re-interpret the data and create new marketing campaign messaging to increase membership and product sales. The combination of qualitative and quantitative data helps associations turn subjective decisions into objective ones. Even when we're talking creative and UX – data science for us plays a huge role.

STOP
Stop building websites in proprietary technologies on a web dev shop's server as you are trapping yourself and it’s completely unnecessary now. Many leading associations are utilizing off-the-shelf content managements systems like Drupal, Kentico, etc. to integrate with their AMS and LMS systems, provide personalized member experiences, and track analytics and KPIs. Then you have options when it comes to supporting your chosen system. You can choose to have the original digital agency maintain and support your site, you can select a new partner for support, or bring it in house. We also recommend you own the hosting relationship with a 3rd party provider such as Rackspace, Azure, or AWS so you are never "stuck". We have taken over the maintenance and support for so many association websites that didn't get the service, attention to detail, nor strategic thinking to drive their association forward, and it was all possible because of the CMS they selected (and it's always a smoother transition when a 3rd party hosting provider is involved but not necessary). 

CONTINUE
Continue focusing on member engagement, member value and the overall member experience. This is what we love most about associations. It doesn't matter if you're a trade association or medical, large or niche, everyone shares a common mission to help your members become more than they can on their own. One of the most common challenges and motivations we've seen for launching into a new website overhaul was to improve their members' online experience and increase online member engagement. And we get it – we, too, are all about the user. When you look into the member journey, continue at all touchpoints to remember we're all just people trying to be the best version of ourselves. Keep the humanity alive in your organization that you have already mastered.

This blog was posted by Sandy on February 19, 2019.
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.

Jeff
Sandstorm developers Joe Ruel and Jeff Umbricht at DrupalCon 2018

Every year since 2005, the Drupal community has flocked to DrupalCon to learn, explore and share. This year, the Sandstorm® team headed to Nashville, Tennessee–site of DrupalCon 2018–to get the latest updates on one of our favorite CMSs, find inspiration, and get our hot-chicken fix. Here are a few of the things we took away from this year’s conference.

1. “Clients buy solutions not code.”

Software wizard Vladimir Roudakov reminded us that no matter how impeccable and innovative our code looks, what’s most important to our clients is that our code solves the problems they’re facing. It was a great message to ground us throughout our time in Nashville.

2. By 2020, there will be more than 50 billion connected devices
                      and
3. Most traffic on the internet is non-human

Developer advocate Emily Rose made a pretty compelling case for why we’ll be developing for humanoids in the not-so-far future. With 61% of the internet made up of bot traffic and connected devices estimated to outnumber people 6:1 in two years, that’s a concept that’s hard to argue with.

4. Increasing page speed by one second can increase conversion by 27%

Google announced that by July 2018, pagespeed will be a ranking factor for mobile searches. For businesses to reach that coveted first position in the search engine, they’ll need to make sure their site loads lightning fast. And the reward—a big bump in conversion rate—will be worth it.

5. Drupal makes big dreams a reality

To celebrate the total solar eclipse, Miles McLean and Ken Fang used Drupal to create a once-in-a-lifetime viewing experience, integrating more than 20 video feeds and real-time tracker. Forty million people used the tool to see the solar eclipse.

If you’re looking to do big things with your website, drop us a line.

This blog was posted by Jeff on May 2.
Jeff Umbricht

About the Author

Jeff Umbricht

Jeff is an Illinois native with a passion for web development. Making code into great things drives him every day. He’s often busy building awesome experiences for Sandstorm clients, and there’s a high probability that he’s rocking out to metal while he codes.

Pages