Creating a small site for a big client

Micah Johnson
Design Responsively
5 min readJan 1, 2017

--

Designing user interfaces is my passion. Especially interfaces that make a positive change in the lives of those who use the design. And that is one of the reasons I was excited to team up with The Rainwater Charitable Foundation and the Fort Worth Star-Telegram to create a site that would provide “a new scholarship program created to provide Tarrant County students who have overcome adversity with resources and experience to continue to excel in college and beyond.”

Where it all started

Six months ago, a friend of mine suggested I place a bid for a web design job for the Star-Telegram in Fort-Worth. She suggested this because she personally knew the decision-maker, and we had worked well together on a few web design projects in the past.

So I placed a bid. A series of introductory emails where pleasantries were exchanged, proposals and resumes provided, then a question was asked that I didn’t expect from a large, corporate client: “Would it be possible for you to provide me with a name and contact information for a reference that I could reach out to?” I thought, this is awesome, as a previous client will sell me to them far better than I could ever sell myself. I quickly reached out to a long-time client and asked if it would be okay if I shared their information. And boy were they thrilled with the opportunity to help.

A previous client will sell me to them far better than I could ever sell myself.

After a week of waiting, I found out that I won the bid, but what was more surprising was that the Fort Worth Star-Telegram said I won the bid because of the testimonial. Not because my bid was less than the competitors, or my proposal was more comprehensive, but because of the testimonial. They said, “Your client couldn’t stop gushing about you.”

That meant the world to me.

Using the presentation style of Aaron Draplin

Though I won the bid, I still needed to present my ideas. It was, and always is, imperative that everyone knows the goals, and how we plan to accomplish them.

I think the worst part about a web design project is when those involved are confused, or have different goals in mind. To prevent any misunderstandings, I needed to make sure that I laid everything on the table in our first meeting.

There are a couple ways of doing this, but PowerPoint is the easiest and most common. That said, a PowerPoint can become very boring, but I’ve seen a few presentations by Aaron Draplin where his slide style kept me engaged. Bright colors, bold text, and plenty of white space on each slide. So, to keep it interesting, I took this style and made it my own. You can view the entire presentation here.

I think the worst part about a web design project is when those involved are confused, or have different goals in mind.

They loved the presentation, and it opened them up to ask questions that helped everyone better understand our goals.

Creating a mockup before leaving the office

With the excitement in our sails, I wanted to keep the momentum going. So I decided to create a mockup before leaving their office.

I knew that this would knock their socks off, and also keep the dialogue going about content and design, but I needed to be quick. I only had an hour before I would need to leave the office. I buckled down, created a mood board of inspirational sites, and began designing.

Typically, I lean toward a very clean layout, without any distractions. However, with this site having a demographic ranging across many age groups, I decided to use a lot of the graphical assets that had already been used in print materials, which would be fun for the young, and maintained the white space and sectional layout design for easy information consumption for older users.

They were so excited to see how quickly our first meeting had materialized into something tangible that they were on board with the first iteration.

Using Trello as a project management tool

Now that we were on the same page, we had to maintain communication, and the best tool that I have been using to manage projects has been Trello. It has worked well for me because of the UX, and because of how easily even new users can pick up the basics.

If you don’t know, Trello is a task management app that gives you a visual overview of what’s being worked on and who is working on it. It uses the Kanban system, which was developed in Toyota as a system to keep production levels high and maintain flexibility. You can think of it as a whiteboard filled with post-it notes. Each post-it represents different tasks involved in the project. With this type of visual project management tool, it has been a cinch to onboard clients to use it, and use it well.

Our setup included lists for Notes, To Do, Doing, and Done. Under each list, we included relevant items, like “Example Sites” under our Notes list. This type of structure allowed for all involved to see the progress of the project, add relevant documents or information where needed, and ask any questions.

Using Webflow for an easy hand-off

Webflow is becoming a formidable tool in my toolbox, and has made CMS hand-offs extremely easy. That fact alone is why I decided to persuade my client to use Webflow instead of WordPress. Editing the content on the live website with the Editor is so intuitive that I have been able to hand off sites with less documentation on how to update the content.

The setup for hand-off was fairly straightforward. After I created the site in Webflow, I edited the settings to include the following: website icons, hosting that would automatically bill the client through Webflow, multiple custom domains (eight in total), and the ability for collaborators to edit the site.

Very little support needed

Now, that The Rainwater Charitable Foundation has control of the website, and their team is completing all additional updates, they have needed very little support. They have been able to quickly complete updates, and really utilize their website to their liking.

Handing off websites that the client is completely satisfied with is what makes my job enjoyable.

--

--

Micah Johnson
Design Responsively

Turning a ball-of-questions into a cup-of-solutions. Webflow development & internal dashboard experts that create custom solutions and custom API endpoints.