Button Text

KDG Website

mockup of isometric screens for KDG website

My biggest project at KDG was a redesign of our website. The company website was last designed in 2016 and didn’t reflect the company's revised mission, service lines, or target audience.

For this project, I worked closely with stakeholders at KDG to design a content-oriented experience that has successfully increased page views and conversion rates. As the lead designer on this project, I was responsible for designing all wireframes and mocks. I then brought those designs to life on the web using WordPress as our CMS.

The project started in January 2019 and the initial redesign was launched in September 2019. We continually made updates and added new features throughout my time with the company.

skills

Business + Brand Strategy, Web Design, UI/UX Design, Content Audits, ADA Compliance

All photos courtesy of KDG and Tony Hoffer Photography.

old KDG website homepageold KDG site services page

Stakeholders felt that the old website didn’t clearly define our vision or level of subject-matter expertise.

Planning + Strategy

To kick off the project, I dove into previous documentation from the weeks before I had started at KDG. This documentation included personas, proposed navigational structure, and ideas for wireframes. From a UI/UX perspective and from the perspective of a brand new employee, it was imperative for me to understand who KDG’s target audience was and how I could change the website better serve them.

After reviewing pages of research and planning, as well as the site’s existing Google Analytics, I worked with our marketing manager to find both pain points and measures of success for KDG employees to better understand what they were looking for in a new website. Together, we worked to further define users of the website, both internally and externally. Our primary personas included:

New small business owners + tech managers

These users want to eliminate/reduce manual processes, track analytics to make better business decisions, and want a partner with expertise to explicitly tell them what they need. They are likely to look at blogs, webinars, whitepapers, etc. as helpful  and informative resources.

Established mid-market business professionals

These users are looking to revamp their currently outdated company processes without alienating both employees and current clients. They are results-driven and want to see case studies and client testimonials to know that KDG is the right choice for them.

Experienced job-seeker

These users want to work at a professional organization where they can influence change. They want to see evidence of employee buy-in, feedback, and contributions.

Young + educated career-seeker

These users are younger professionals who are either self-taught or recent graduates. They are looking for a place where they can learn and want to be proud to work at a company with a strong reputation.

Internal content manager

She wants a simple way to add content (blog posts, landing pages, and forms). She doesn’t mind reaching out for help with larger requests, but she needs to be able to publish content without touching any code.

Internal sales + marketing director

She wants to be able to track website visitors and prospective clients. Analytics and data are important to her and so is a CRM integration. She wants to be able to easily add landing pages and campaign tracking for better decision-making.

Wireframes + Explorations

In the original set of documents, there were wireframes but the internal teams at KDG could not come to a consensus on the primary goals of each page. After re-working the personas to have clearly defined goals, we decided to create new wireframes in order to gain alignment and solidify direction. This really helped to clarify the stakeholders’ vision. Once wireframes were approved, we moved into the design phase; however, whenever the user experience was unclear, we referred back to these wireframes as a reference.

Moving into the design phase, we explored a variety of different elements to help bring KDG’s new brand to the web. We began with the homepage, asking:

When I'm on the homepage, I want to...

  1. Understand what KDG does, so that I can decide whether they provide the services I want.
  2. See case studies, so that I can see if my organization would be a good fit.
  3. Know that KDG is reputable and is up-to-date on industry news.
  4. Easily find career opportunities and get a feel for who works here.

As you can see, there are many mindsets; however, we focused these down to one action: self-identification. Our users what to be able to self-identify and see themselves alongside KDG. With this information, we decided to gravitate away from large CTAs and pitches on our homepage; instead, we have a masthead to help explain what we do, followed by a set of randomized images to get the user to start exploring based on their interests.

screenshots of wireframes for KDG site
Initial wireframes for the home, about, and areas of focus pages.
screenshots of initial concepts for KDG homepage
Early stages of the design phase felt too much like a creative agency instead of a software consulting firm.

Final Designs

After various iterations, we decided on a mix of high contrast colors with pops of blue and purple to drive the site. As the brand expanded, we also implemented illustrations, new whitepapers, and various types of content.

In our design process, we also updated the site architecture further than we did in the wireframes stage. We restructured the website to streamline the service discovery process. By implementing improved templates for each page type, we made it faster and easier for prospective clients to find the right reference materials for their project.

Visitors shouldn’t feel overwhelmed by KDG’s history or its wide array of services. We used a simple design system and an intuitive layout to create a website that’s user-friendly and visually engaging.

KDG website style tile

From a design perspective, we wanted to appeal to the brand’s more sophisticated target audience, so we used a blend of dark purples and white to offset the more vibrant accent colors.

screenshot of whitepaper and related services on KDG site
Later designs took a more traditional approach with clearly defined sections.
careers callout on KDG site
The brand palette expanded a bit to include more gradients for visual interest.
screenshot of case study and client testimonials on a services page of the KDG site
The redesigned site had more opportunities to feature client testimonials and case studies.
gif of hidden animation on mission, vision, and values page on KDG site
I made a hidden animation on our Mission, Vision, Values page to keep users on their feet!

Web Development

Once a homepage design was selected and refined, I began designing in WordPress using a combination of a theme builder and custom WordPress development; meanwhile, the marketing manager and I met every week to gather content, write SEO, and add tags to photos. Along the way, some of the design changed to fit the content that was generated and to meet all project stakeholders’ requirements. When more custom search functionality was needed for our “Professionals” page, we brought in another developer to help us achieve the goals of that feature.

One of the biggest lessons I learned during this process was the importance of testing. In the beginning of the process, we were not as thorough with testing, but as time has gone on, we have gotten more predictable results by testing out features on smaller scales before implementing them across the site. Since our stakeholders are results-driven, we’ve also done a lot of work with A/B testing and keyword planning, reviewing results each week in order to make timely adjustments.

The website launched in September 2019 and has been evolving ever since then. The website was awarded a 2019 gold MarCom award for business to business website shortly after its launch date as well as Silver Award of Distinction in the 2020 Communicator Awards.

In Q1 of 2021, the next planned updates included: revisions to the homepage to reflect the company's updated values, a more interactive version of the customer feedback page, and a proposal generator to help both prospective clients and sales team members craft better proposals.

full-length screenshot of KDG homepage

An updated website has positioned KDG more competitively in their targeted technology market.

Credits

  • KDG

    Lynette Wills
    AVP Client Engagement

    Keri Lindenmuth
    Marketing Manager

    Nicole Kutos
    Brand + Web Designer

    Kalyn Kates
    UI/UX Designer

    Mike Dranginis
    Associate Developer

Next Project:

Mount Aloysius College Website Redesign