scroll down

Kim Weed Consulting

A warm and welcoming website design and production

May 1, 2018

PROJECT LENGTH:

8 Weeks

MY ROLE: 

UX Designer and Developer

PROJECT:

Kim Weed Consulting started in early 2016. Kim contracted me to design and develop her a responsive website.

PROBLEM:

Kim had built up a substantial client base, including: Microsoft, Outreach.io, St. Michelle Wine Estates, etc. She did not have a website for clients and potential clients to find information about her business nor did she have any branding established i.e. logo or colors.

SOLUTION:  

I worked in collaboration with two graphic designers to design and deliver Kim a beautiful and responsive website and brand guidelines. I did this by conducting user research and reviewing industry best-practices to discover and intercept brand-worthy colors and typography.

RESULT:

Website was launched in June of 2018, with ongoing updates being pushed on a monthly to quarterly basis. User feedback continues to be positive.

Kim Weed headshot

"Working with Josh has been amazing! My clients tell me how beautiful and functional my website is on a regular basis. I really appreciate his thoughtfulness and purpose when it comes to design. I'm glad that I chose to work with him." - Kim Weed, CEO

RESEARCH: Interviews, Observations, & Surveys

It became evident quickly that this project was going to take a lot of user and market research during and in-depth strategy meeting with Kim in Seattle that kicked things off. This experience helped to uncover how important it was to represent her brand in the perfect light. I needed to understand who she wanted to target and why they would visit her site.

I researched a few local HR consulting companies to learn what they were doing in the industry, their brand voices, and how to stand apart from them. I found features on their websites that I liked, as well as others that I did not.

ANALYSIS: Personas, Scenarios, Synthesis

I determined two user personas. The first was the corporate client. They would be looking for help with things like diversity training, interactive team workshops, and leadership training. I needed to represent Kim's 20+ years of experience in these areas, and also relay social proof to instill trust upfront.

The second persona was the professional individual that was looking to grow their career and advance. Similar to the corporate client, I needed to appeal to their needs. They would be looking for help with things like resume revisions, career coaching, and interview prepping. These services needed to be advertised upfront.

DESIGN: Workflow, Wireframes, Prototypes

I started off with some low-fidelity wireframes (drawn on paper) then moved to wireframes in Adobe XD. I mocked up a few layouts and reviewed them with the client.

PRODUCTION: Visual Design, Development, & Testing

In creating a color and brand guide worthy of Kim Weed Consulting, I needed to consider the language of colors. I did not want to over saturate her brand with color, but I did want to make a worthwhile impression. Ultimately we went with a 5-color palette: green, blue, purple, grey, and whites (with off-whites). The main colors we chose very intentionally. We chose green to symbolize new birth, blue for trust and loyalty, and purple for calm. The Los Angeles Film School goes into detail about color psychology here.

When it came to the logo and icons, I found two designers that I liked. First, the logo needed to be on point. We were looking for simplicity and elegance. Something that could stand the test of time. The goal was to incorporate her name into the logo for brand recognition. I needed a 1:1 favicon for her social pages and website, as well as a full width "Kim Weed Consulting" next to the favicon. Because we had already picked out the color palette, we were able to move from concept to production relatively quickly.

Below are two of the original mockups form the designer. We loved the gradient logo because is flowed together nicely, looking modern, clean, yet simple. The only modifications we made was rounding out the square favicon to a 100% border radius and moving it to the right hand side of the text.

Initially, I launched the website on a staging site for the client to review as well as some users. This was helpful to gain live feedback to make appropriate adjustments and modifications.

For brand messaging, I explored her work with previous clients. It was clear in her clients' feedback how Kim approached each product and the why. Kim clearly has a passion for helping people, as she has demonstrated so obviously with her past work. We needed to send two messages: Kim's caring comes from a place of authenticity and she is very skilled at what she does.

It was important to establish trust very quickly with her website visitors. Studies show that client testimonials significantly help to build trust with users. We stepped it up a bit by adding client photos and company logos, making the quotes more relatable. We also wanted to showcase some of her top brands that she has worked with, so underneath the landing hero image there is a social proof grid.

LAUNCH:

I used HTML, CSS, and Javascript in a way the allowed for customization and ease-of-use. Every line of code that was injected was with the theme of simplicity in mind. I used one external JS library that I love called AOS.js. This allowed for me to inject custom animations.

On the back end we used a simple CMS called Squarespace. The reason I chose this system was to allow for future updates to be executed quickly and simply for any team members at Kim Weed Consulting, even if they had limited technical exposure.

At the end of production, I deployed 7 unique pages with a fully mobile responsive design. During the final touchups, I added a few 3rd party plugins like Hotjar for data analytics tracking and Drift for easy communication.