harmonizeHR

Design Challenge & Goals:

The challenge here was taking a highly technical solution – HR system integrations, which involve APIs and data workflows – and presenting it in a way that non-technical HR managers could easily grasp. The site’s content had to educate visitors on how harmonizeHR could solve their integration pain points, without overwhelming them with jargon. Key goals included: a compelling homepage that immediately answers “What is harmonizeHR and why should I care?”, sections to detail features and integrations available (for example, showing logos of systems they connect, like Workday, Greenhouse, etc.), and a clear call-to-action for scheduling a demo. Another goal was to establish credibility, as a relatively new product, by showcasing client testimonials or partnership logos. Visual design needed to be modern and trustworthy – aligning with enterprise software aesthetics (clean, minimal) but also a bit vibrant and optimistic to set harmonizeHR apart from stodgier competitors.

Process:

Kickoff & Content Strategy:

Collaborated with the harmonizeHR founders (Jon Barth and Geoff Mueller) to understand the unique selling points of the product. We identified that a big pain point for their customers was the clunky user experience of existing integrations – so a key message to highlight was how harmonizeHR focuses on the end-user experience of integrations, making them seamlessharmonizehr.com. We outlined the main pages: Home, Integrations (a gallery of systems harmonizeHR connects, each with a brief description), Features/Automation (explaining specific capabilities like data syncing, custom workflows), About/Team, and Contact/Demo. We also planned an FAQ section to handle common technical questions (security, how it works, etc.).

Research:

Looked at websites of other B2B integration and automation platforms (e.g., Zapier for a broad sense, and niche HR tech integrators). Many had abstract graphics and were heavy on marketing buzzwords. We aimed to differentiate harmonizeHR by making the site feel more personal and problem-solution oriented – using plain language to describe benefits (like “Eliminate duplicate data entry between HR systems”) and perhaps including a real case study scenario. Also gathered some statistics and quotes about HR tech challenges to possibly incorporate as persuasive content.

Wireframing:

Created wireframes starting with the homepage: a hero section with a tagline and a striking visual (perhaps an abstract illustration of connected systems), followed by an overview of key benefits in 3 columns (e.g., “No More Manual Updates,” “Better Data Accuracy,” “Faster Onboarding Workflows”). Next, a section to showcase logos of popular platforms harmonizeHR integrates with (to immediately signal capability), then a brief “How it Works” step-by-step graphic, and finally a call-to-action banner (“Ready to Harmonize Your HR Tech? – Schedule a Demo”). Also wireframed a dedicated Integrations page listing each integration with logos and a short blurb, and a Features page that could expand on technical details for those interested (with maybe diagrams or screenshots of the product in action). The contact page wireframe included both a form and direct contact info. 

UI Design:

Developed the visual design using the product’s existing branding (the harmonizeHR logo and color scheme). The palette was comprised of a bright blue and green (conveying tech and growth) along with neutral grays. I used a lot of white space for a clean look. For imagery, rather than generic stock photos of people, we opted for custom illustrations: for example, an illustration of two software application icons with a “handshake” between them to represent integration, and another showing a simplified HR workflow. These graphics used a consistent style (flat design with the brand colors) to visually tie the site together. Typography was chosen to be modern and legible – headings in a slightly rounded sans-serif (to feel friendly) and body text in a clear sans-serif. On the Integrations page, I used recognizable logos (iCIMS, Workday, Salesforce, etc.) in a grid format, which instantly communicates what systems are supported. Interactive design: added hover effects on integration logos to show the integration’s name, and accordions for FAQs. During design reviews, I got feedback from the harmonizeHR team – one piece was to include a short video or animation if possible, explaining the product. In response, we designed a placeholder for an explainer video at the end of the homepage.

Development:

Built the site using a responsive design approach. We chose to implement it as a static site initially with plans to integrate into a CMS later when content might expand. Ensured that illustrations and graphics were optimized (SVGs for the flat illustrations for crispness and small file size). Implemented subtle animations on scroll – e.g., as the user scrolls to the benefits section, each benefit card fades in sequentially, which adds a dynamic feel. Integrated an email capture form for a “Join our mailing list for HR tech tips” in the footer to support marketing efforts. For the demo request, we created a form that fed into the company’s CRM (via an embedded form script). We also paid attention to accessibility: all images have alt text, colors were checked for contrast (the bright green was adjusted slightly to meet contrast ratios against white for text).

Testing & Launch:

Before launching, I did a content review to ensure the technical descriptions were accurate and easy to understand – involving both the founder and an advisor who was in HR (to make sure wording resonated). The site launched, and I monitored its performance via analytics in the first weeks to see how users interacted (which sections they clicked or ignored), allowing for minor post-launch tweaks.

Tools & Technologies:

Figma (design system and high-fidelity mockups), Illustrator (creating custom illustration assets), WordPress CMS to expedite front-end development,  – the site was built and hosted on WordPress which allowed easier content edits for the team), Google Analytics and Hotjar (analytics and user behavior tracking).

Results:

The harmonizeHR website succeeded in clearly communicating a complex product, contributing to the startup’s early growth. The client testimonial that we featured prominently (“harmonizeHR’s integrations are robust, secure, and built focusing on the end user experience”) resonated with visitors. The harmonizeHR founders were very pleased with the professional yet approachable look of the site, and they continue to use it as a key sales tool. 

Website: https://harmonizehr.com