The Council for Entrepreneurial Development (CED) is an organization dedicated to promoting the success and prosperity of entrepreneurial companies in North Carolina. Founded in 1984, CED offers support for new and expanding entrepreneurial companies through programs such as Connect to Capital and the Accelerate Series as well as a platform for established companies designed to advance North Carolina’s entrepreneurial community through various mentorship programs.
CED also organizes and hosts an annual conference, Venture Connect, that attracts investors and entrepreneurs from around the country and beyond. The three-day conference features multiple speaker sessions and presentations targeted to Technology and Life Science entrepreneurial-stage businesses.
In the process of transitioning their customer engagement model, CED partnered with DesignHammer to assist in the creation of a web communication strategy that better aligned with their new organizational priorities. As a primary means of digital marketing and engagement, CED’s new website needed to reinforce the new model and allow them to better connect with their identified audiences: Entrepreneurial Companies, Partners, Builders, Investors, Collaborators, and Explorers.
In order to deliver a final website that covered the desired functionality and stayed in the approved budget, DesignHammer’s solution leveraged several third-party solutions. The core site was developed in WordPress with a custom responsive theme. Form processing was handled by FormAssembly and Jujama was used for agenda/scheduling support. Finally, a custom Salesforce synchronization based on Object Sync for Salesforce was implemented to connect information from CED’s SalesForce instance to the new website.
WordPress: The new WordPress site utilizes an information architecture developed by DesignHammer in collaboration with CED. The top navigation bar is designed to guide users to a landing page connected to an audience they identify with. Additionally, there is a super menu available for direct navigation to any page. The site was designed with responsive functionality in mind and follows best practices for accessibility and usability.
Theme: For the new website, CED supplied DesignHammer with design concepts to guide in the development of a custom, mobile-responsive theme. When DesignHammer’s user testing revealed the original menu design to be too difficult to navigate, DesignHammer revised the theme to match the design provided. DesignHammer determined the requirements for a new menu in collaboration with CED and implemented the current top navigation plus super menu configuration.
Salesforce: To leverage CED’s vast data housed in Salesforce, DesignHammer implemented a Salesforce sync using the Object Sync for Salesforce plugin to publish content to the new website. Some data components were not supported by the plugin, so DesignHammer developed a custom plugin to support additional data elements.
CED has found that the new website is very effective in connecting to their target audiences. CED was also able to simplify their administrative workflow by leveraging FormAssembly and the Salesforce integration with the new WordPress site.
“Our website is far easier to navigate now as a result of the group efforts of our handpicked team; DesignHammer, our creative director, and our conversion copywriter."
– Kristina Sandine, Marketing Manager
Railinc Corporation is a for-profit subsidiary of the Association of American Railroads (AAR) that delivers both data as a service (DaaS) and software as a service (SaaS), offering a compelling suite of commercial and industry products, as well as valuable information resources to employees in the freight rail space. The Railinc website attracts two different types of customers: Industry users (comprised of Class I Railroads and other authorized organizations) and Commercial users (all other organizations seeking to leverage Railinc’s unique tools and data). The access to Class I Railroad data and targeted tools for both types of customers sets Railinc apart from other players in the fright rail technology space.
Before development on the industry website began, Railinc contracted DesignHammer experts to do a 14-week long, comprehensive assessment project on the existing site to identify its pain points and potential, and to provide recommendations for the future website build. This data-driven analysis of the assessment project findings became a fundamental building block in the Project Plan, which DesignHammer collaborated with Railinc to compose. The primary goals outlined in the Project Plan were to create a new, modern website with improved linking of content, better information architecture, and an updated look and feel to make a more effective marketing tool. A key component of this website build was to migrate a large amount of existing content (including 1500 total files, 40 product pages, and 15 supporting resources) from Railinc’s existing CMS in order to preserve tagging and redirect URLs that were already used within supporting documentation.
Discovery Meetings were held with various Railinc stakeholders and teams to capture details of existing functionality and workflow. DesignHammer and Railinc collaborated to determine areas where improvements could be made and to determine if any functionality was no longer necessary. These discovery meetings covered design and user experience; content entry, support, and maintenance; hosting; and content migration.
Design, Theme, and User Experience DesignHammer and Railinc collaborated to determine desired design features, user experience, and look and feel. It was important to Railinc to stay connected to their existing customers by maintaining their brand identity, but it was also important to reach out to new potential customers by modernizing the look and feel, and overall statement of the brand. Railinc wanted to emphasize their position as a technology company that supported railroads. One of the unexpected challenges in the design phase was the wide variation of trains! An early iteration of the design had a European train in the hero image, and as Railinc supports the North American railroad system, this was not desired.
Once the look and feel and user experience were well defined, DesignHammer produced a custom theme for the Railinc website that reflects their identity as a modern software and technology provider supporting the North American rail system.
Content Entry, Support, and Maintenance Based on the conversations with the Railinc Technical Writing team DesignHammer implemented a system of content types and modules to support content revisions, attached file versioning, redirects, and approval workflows.
Hosting Contegix was selected to host the new sites. DesignHammer has worked with Contegix often in the past. Contegix setup two servers, one for the development and test environments, and one for the production environment. To satisfy additional security requirements from Railinc’s Security team, access to the servers was restricted via a VPN with two factor authentication.
Content Migration The most complicated part of the new website build was migrating the content from the existing Liferay site to the new Drupal site and maintaining the relationships between pages and content as well as the tagging on the existing content. DesignHammer configured a custom migration process that was able to parse archives from the existing Liferay site and import the data, complete with tagging, into Drupal content types. Redirects were also programmatically created to provide consistent access to the newly migrated files to support existing applications that used these files for documentation.
Electron/Vue.js High-Def Video Kiosk
A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 4-week turnaround, white-label project for their Fortune 500 client. The agency sought to build a multi-screen video presentation to be set up as a promotional installation at a major industry trade show. The installation would provide users with a self-guided tour of the client’s product through a variety of case studies.
The case study content was to be presented as a series of 4k animations, displayed on massive 72-inch touch screens, with the ability to function without an active internet connection. The installation required a UI for navigating through the various chapters and pages, seamless playback of the various intros, loops, and outros for each video segment, an accessibility mode, and handling for idle timeouts when a user moves away from a screen. Lastly, the solution had to include a flexible mechanism for content updating after initial deployment, as the client was rapidly modifying their content right up to the day of the event.
An initial discovery and planning process revealed that a strictly browser-based implementation would not work due to the size of the multi-GB videos in question and inconsistent internet access. DesignHammer elected to instead create a desktop application using a combination of Vue.js and Electron; as their open-source, cross-platform nature is cost-effective and enables fast turn-around times with multiple developers working on the project simultaneously.
A custom HTML5 video player capable of seamless playback of 4K looping video content was ultimately constructed. An entirely custom UI layer, designed to match a set of premade storyboards and animations, was also built on top of the video playback. Swipe and multi-finger tap gestures were enabled for the custom elements, as well as an accessibility feature that accommodated positional access (standing/sitting) to the navigation controls. A follow-up project resulted in the ability to set different target physical display sizes, allowing for the presentation of the same video content on much smaller displays, whilst showing the custom UI at a relatively larger size.
The experience was delivered on time and on budget, all while supporting a number of last-minute content changes. The application provided an easy set-up process for event administrators and a stable experience for the whole event; several additional instances of the experience have since been shipped at other trade-shows and events around the world.
Vue.js Interactive Quiz Experience
A reputable marketing agency with limited available development resources approached DesignHammer for additional assistance with a 2-week turnaround, white-label project for their Fortune 500 client. The concept was a highly interactive quiz-style experience to be displayed at a conference kiosk, challenging attendees to answer five questions correctly. The installation was to ultimately serve as a marketing tool, with the content and messaging around the questions and scoring methodology specifically designed to highlight the value of the client’s product.
The quiz experience needed to run all day on a set of large 4k touch panels on a conference show floor without internet connectivity. Storyboards with layout mockups were provided by the client, but they did not include any specific guidance for animations or transitions between scenes. Sound effects needed to be added, which included a looping music bed that was intended to play while users interacted with the quiz. UX was the top priority for the quiz kiosk. How the user felt about their time with the quiz would directly correlate with how they felt about the product offering. This meant that every aspect of the presentation had to feel seamless and the developers had to ensure that the animations ran smoothly in 4K.
The application was broken out into a number of screens each handled by a full-page Vue component. The screens corresponded with each particular scene provided by the client’s storyboards. The development structure was designed to allow for multiple people to work on the application without interfering with one another. The architecture of the quiz system was set up to allow all aspects of the visual display to be adjusted independently. This made it easy to refine the parameters over the course of the project in response to user testing.
Approximately 30 hand-tuned animations were created to enhance the [experiential] impact of every single visual element within the quiz. By optimizing the elements for the Electron browser’s rendering engine, the final experience ran smoothly and maintained a crisp frame-rate during multi-element fullscreen transitions. A seamless looping music player was built similar to the video kiosk and smooth volume fading was added.
The quiz was delivered on time and on budget, all within the proposed 2-week turnaround time. The agency was appreciative of the professional judgment and the creative initiative we took to construct various aspects of the animation and design.
Also, despite initial objections to running the experience in a standard web browser, a successful initial deployment motivated the client to begin presenting the quiz online for more users to experience.
While not initially built for the web, the successful initial deployment motivated the client to request a version that could be deployed on their own marketing site. We were able to update the existing codebase to support generating a browser-based version of the quiz. Our decision to use the Vue.js and Electron build tools made this process fairly straightforward.
Duke University Health System is a world-class hospital and health care network including three hospitals in central North Carolina (Duke University Hospital, Durham Regional Hospital, and Duke Raleigh Hospital), as well as outpatient, wellness, and hospice care.
Physician engagement is an important aspect of Duke Health's mission. Previously Duke Health had worked with external vendors to deliver the Clinical Practice Today website and newsletter to physicians. Duke Health sought to centralize and streamline these efforts in a single Duke Health subsite, leveraging technology used for dukehealth.org.
To maximize physician engagement with the new subsite, Duke Health conducted market research and determined that the physician audience wanted their own dedicated web portal and online tools for making patient referrals. Physicians wanted the control to search by different criteria, such as physician name, or by specialty rather than condition/procedure, which was not supported by the patient-oriented “Find a Doctor” search tool on dukehealth.org.
In order to provide a tailored solution for referring physicians, one that was simple, fit their clinical workflow and encouraged repeat visits, DesignHammer and Duke Health began the project off with a robust discovery and planning process. This included competitive analysis of other prestigious health systems to determine best practices in content organization and navigation, card sorting to identify appropriate homepage content and navigation structure, and tree testing to validate the proposed navigation.
DesignHammer created the new website in Drupal 7, Duke’s preferred website development platform. The website provides users with multiple search interfaces including a Mini Specialist Finder for the homepage, a full Specialist Finder, and a Search by Doctor’s Name–all to better connect referring physicians to Duke specialists. The system relies on Apache SOLR for search results. Specialist data, including Specialist Profiles, and auto-complete suggestions, utilizes the data provided for the patient facing “Find a Doctor” system to minimize staff overhead related to data maintenance. The administrative interface also provides content editors with similar functionality to dukehealth.org.
To provide continuity and enhance SEO authority, the new website incorporated the previously standalone Clinical Practice Today website content (including appropriate redirection), adding landing pages for targeted specialties and CME (Continuing Medical Education) content. Clinical Practice Today delivers timely articles on Duke Health research, innovation, and other continuing medical education.
To ensure access for all, the new website was developed in accordance with Duke’s latest standards for accessibility for users with disabilities. To this end, DesignHammer and Duke Health focused on delivering accessible navigation for all major site content.
DesignHammer created a new platform for physician engagement that fit seamlessly into Duke Health’s internal workflow and facilitated physician referrals to Duke Health. The new Specialist Finder provides referring physicians with instant access to the latest specialist listings, with the added benefit of reducing Duke Health’s staff time by leveraging the same data source as the “Find a Doctor” search.
Most importantly, the project delivered new ownership to Duke Health of the dissemination of Clinical Practice Today CME content, in parallel with Duke bringing the ownership of email marketing of CME in-house. This consolidation provided the Duke Health marketing team with full control of previously outsourced content.
“DesignHammer’s work gave us a strong platform on which our in-house team could further develop the website, based on user testing and analytics. Since launch, we have been able to further improve the Find A Specialist and specialist profile pages. Without the original development work, those enhancements could not have been possible.”
–Seamus O’Reilly, Duke Health Digital Engagement Director
Established 2014 in Statesville North Carolina, Highland Composites is the composite structures division of Highland Industries, Inc. (see their recent Django Upgrade here). Highland Composites utilizes a full range of braided, woven, and raw fibers together with proprietary, state-of-the-art technology to create composite products for use in a wide variety of structural applications.
As a new player in the marketplace, Highland Composites needed to demonstrate their unique capabilities and value proposition. Composites manufacturing is a complex industry that can utilize many different technologies; Highland specializes in braided composites, composite overbraiding, and open architecture composite structures (proprietary to Highland Composites). The Highland Industries website was not attracting appropriate customers for the Highland Composites brand and did not effectively feature their Composites offerings.
DesignHammer built a custom WordPress website for Highland Composites to showcase their capabilities and attract leads. The new website featured high-resolution photography and videos to quickly educate prospects on how Highland Composites’ technologies can make parts faster, lighter, stronger, tougher or more consistent, as well as highlighting the differences between composites and conventional process. To better position themselves and appeal to their target prospects across multiple industries, the new website featured case studies with application examples tailored to the best use of Highland Composites technologies. Social sharing buttons (Facebook, Twitter, and Vimeo) were integrated into relevant content to facilitate multi-outlet media campaigns. Google Analytics was configured to track website traffic and appropriate conversions (contacts from prospects). To help the Highland Composites business development team quantify results, custom reports were also configured for specific advertising efforts.
Highland Composites focuses their business development efforts on conferences, trade shows, and industry meetings. This team can now leverage the website to reinforce their capabilities with identified prospects. Highland Composites measures the success of these efforts by increased traffic and website interaction during and following targeted business development events. Following a recent trade show, Highland Composites tracked an impressive 100% increase in page views, a 50% increase in new users, and a 50% increase lead acquisition via the website.
Founded in 1990, the North Carolina Center for Nonprofits is a private, 501(c)(3) nonprofit organization that serves as a statewide network for nonprofit board and staff members, an information center on effective organizational practices, and an advocate for the nonprofit sector as a whole. They offer services directly to all sizes and types of 501(c)(3) nonprofits and work closely with other local, state, and national groups that assist nonprofits.
The NC Center for Nonprofits identified obstacles related to advocacy, member services, communication efforts and capacity. In pursuing its mission to support North Carolina’s nonprofit community, the Center relied on an antiquated website including a very complicated, largely custom, and undocumented Salesforce integration which no longer functioned correctly. With limited staff and resources the Center struggled to manage client interactions, often due to confusing or broken website features. The site couldn’t just be repaired as it was built using Drupal 6, an obsolete version of the CMS that was no longer supported. This combination of factors threatened to compromise the Center’s fundraising efforts and ability to secure donations from companies and other foundations.
The project began with a discovery and planning phase, including strategic consulting and business process analysis. Usability and user testing methodologies were employed to improve overall user experience and usability including site architecture and navigation structure. Business processes were simplified and customer functionality was extended to decrease the need for staff to perform customer service tasks. The integration was simplified with much of the previous custom code replaced or removed in favor of community-supported Drupal modules. A new Drupal 7 site was built featuring a mobile-optimized, responsive theme. As part of the rebuild, some features were removed to provide better-defined workflows. Finally, site content was migrated from the Drupal 6 website, and data was synchronized from Salesforce.
In the four months since deployment of the new website, the North Carolina Center for Nonprofits has tracked a 21% increase in the use of Job Boards, as well as a 7% increase in organizational membership.
Most importantly, with the new website working as a resource multiplier rather than an overhead liability, staff members are now better able to allocate their time helping member organizations and supporting the Center’s mission as opposed to being inundated with website-related customer support emails and phone calls.
- 2018 Gold dotCOMM Awards
- 2018 Summit Creative Finalist Award
- 2018 Communicator Award of Distinction
- 2018 Hermes Creative Honorable Mention
Qualyst came to us as they were transitioning from a services company to a services and products company. They needed a website that reflected that change and that would appeal to a variety of specific markets. Additionally, the existing website had become dated and didn't display correctly on mobile devices.
We started by working closely with Qualyst during the design phase to ensure a clean, attractive, and relevant design was produced for their audience. As part of keeping their target segments in mind, we recruited a marketer with a track record of collaborating with scientists and creative professionals to use words, images, videos, and animation to convey complex scientific ideas. With the planning and design complete, we were able to move forward into production of a website to help Qualyst take the next step in their marketing goals.
The previous North Carolina Alliance for Effective Care Transitions (NCACT) website architecture made it difficult for users to quickly find desired content. Most user interaction was primarily presented as links in the body content, making it very easy to overlook. It was also difficult to add new functionality related to gathering organization profiles and member sharing.
DesignHammer migrated their existing content to a new WordPress website, vastly improved the navigation, and increased user interaction. With the ability to quickly add and customize new web-forms NCACT was able to get the information they needed from organization members. This also simplified the submission process. This allowed them to build a large database of healthcare organizations which benefits the users who need this information.
NetOne operates a Drupal 7 website for members of their network of independently owned security companies for the residential and commercial markets. When NetOne approached DesignHammer, they were having multiple usability issues: account registration was confusing and overly complicated; many of the styles were "default Drupal" instead of matching the look and feel of the NetOne theme; the site was not 100% mobile-ready, creating a sub-par experience for an increasing number of mobile users. There were also issues with forum notification emails and MailChimp list subscription. Additionally, NetOne needed on-going help maintaining Drupal and working closely with the CTO to create new features to make the NetOne website even more useful for security professionals.
DesignHammer helped NetOne through a number of usability audits, where we conducted in-person testing using both a desktop setup with keyboard and mouse, as well as a mobile device that recorded the user's interactions with the website. Through this testing, we were able to generate recommendations to help improve the user experience for the NetOne website.
We re-wrote a number of NetOne's custom modules, simplifying account registration from three pages down to one, adjusting the forgotten password tool messaging to clarify the process, and cleaning up the user profile editing interface. NetOne's theme stylesheets were converted to using Sass, a CSS pre-processor that makes it easier to organize a highly complex set of styles. Our designers created mobile-ready styles to fix the issues discovered during our UX testing. We also rebuilt the integration with MailChimp, so that users were subscribed correctly to the NetOne mailing list during registration and profile editing, as well as forum notification emails for the user's interests.
DesignHammer continues to work closely with NetOne, creating and maintaining features such as a parts exchange system for sharing inventories, a yearly "Grand Champions" event sub-site with an event registration system, as well as a revamped file resources library.