User Experience Design (UXD) Case Studies

UXD 2014

This is an end-to-end walkthrough of my full-stack user experience design (UXD) workflow to rapidly launch lean and agile websites.

Project

This project is for a client who owns a fitness center and was interested in launching a niche microsite specifically dedicated to the women’s fitness programs.

strategic hero

Here’s an outline of the steps I brought the project through. I unpack each section below.

  • Project
  • Questionnaire
  • Mindmap & Outline
  • Userflow
  • Wireframes
  • Visual Design
  • WordPress Development

Questionnaire

There are general questions that most projects will have answers to, and to remove friction from my relationship with the client I like to share a questionnaire to provide me with foundational information upfront. I let the client know I will send over some questions, and when they have a moment to please circle back with responses. The questionnaire is personalized to the client’s project based on what I’ve gathered from them thus far, and includes a few simple questions that help the client think through the abstract elements to articulate precisely where they are, where they want to start, and where they want to end up. The questionnaire is designed to provide me with information to get started in the user experience design process as well.

A basic questionnaire for a small project like this one – a microsite – for an existing business will have questions such as the following.

  • What is the name of your business?
  • What locations would you like displayed on the front-end?
  • What is the tagline of your business?
  • Who is your customer?
  • What problem do you solve for customers?
  • What products/services do you offer?
  • What are the three most important benefits a customer will get from using your products/services?
  • What form fields would you like included in the contact form?
  • Do you have any other ideas/comments you’d like to share?

See below for the client’s response to my questionnaire.

uxd questionnaire

As the years have gone by, lessons have been learned, technology advanced, and now i use front-end forms to make it easy for you share important data with me so that it automatically populates the appropriate sections of your site or web app.

Mindmap & Outline

After I read all of the answers I went through them a second time. This time much slower because I rewrote each of the answers by hand on a piece of paper. This allowed me to start brainstorming the different aspects of the business. It helped me start grouping ideas together. I was able to highlight which parts were important, and which parts connected with each other that I may not have already connected. I scanned in the paper so you can see exactly what I am referring to:

website questionnaire notes

I now had actionable steps outlined to get started on the next step of the process. Typically, I might move right into userflow and wireframes. However, in this case, my client hired me to bring the project from vision to tangible product. That means, I would soon need to collect design assets, brand guidelines, logo files, etc. I wouldn’t need those assets right now, but I will need them as my client and I round the final feedback loop of rapid prototyping on the paper and pencil sketches.

To accelerate the project’s timeline, I shared the next list of ingredients I would soon need from my client. While I began the userflow and wireframes, my client was able to work in parallel by taking stock of the design assets and brand files we would soon need to bring the project off the paper and into high-fidelity visual designs.

Asset Development

In 2011, I was on a brainstorming call with a colleague named Owen. He ran his own agency and was ten years ahead of me in terms of professional experience. He shared with me his on-boarding process for new clients. I remember thinking, “Eureka!”

Assets are crucial elements in the design process. Too many times I have tried to design a project without having all the parts. Let me tell you, it is a recipe for disaster. I always thought it would be fine, and I could just work around the parts I did not have. Wrong. It’s like trying to finish a puzzle without all the pieces, or playing poker without a full deck of cards.

Here is a quick breakdown of design assets I ask most client’s to share with me at the beginning of a project. If a client is unable to furnish the below list, it means they are not ready to begin the project just yet. It’s a helpful way of helping the client take stock of their resources, organize brand assets in a neat folder system, and seamlessly share the entire folder with me via Dropbox or Google Drive. This also removes several email chains throughout the project life cycle with emails volleying back-and-forth such as, “Do you have a high-res logo file?”

  • Logo – It’s good to have the logo before starting because it gives me an idea of the business’s personality.
  • Color Palette – When it comes time to style the hyperlinks, navigation bar background color, paragraph text, heading text, footer/copyright background colors, etc. you will need a standard color palette to pull from. Be sure to finish your branding before beginning a new project.
  • Hero Banner Image – this is the large background photo which is the very first image you see upon landing on a website. It sets the stage for the visitor. This image should be high resolution, engaging, and ignite a fire inside the visitor that forces them to continue reading through the website’s contents.
  • Product Images and Videos – depending on the products and services you will need standard pictures and videos that represent the appropriate product or service. In some cases, I will use icons to represent these items. Whether I use icons or images or a mixture of both will depend on the industry. A business such as a bank is more appropriate for using icons compared to a new fitness center. In most cases, including video in your website is only going to help you increase conversions.
  • Call-to-Action Graphic – I like to include a call-to-action banner at the bottom of every page, if possible. You never know when a visitor will be scrolling to the bottom of the page, and you catch them at the right time with a relevant offer they are excited to download, or buy. Calls-to-Action (CTAs) are the tools you use to nurture visitors into subscribers and subscribers into customers.

Assets are crucial elements in the design process. Too many times I have tried to design a project without having all the parts. Let me tell you, it is a recipe for disaster. I always thought it would be fine, and I could just work around the parts I did not have. Wrong. It’s like trying to finish a puzzle without all the pieces, or playing poker without a full deck of cards.

At this point, I am ready to sketch the userflow and wireframes of the core experience. We need to visualize what the user will experience upon landing on the home page, clicking call-to-action (products, services, subscriptions, etc), the sales page they land on, and the confirmation page they’re brought to after the transaction.

Userflow and Wireframes

I still use paper and pencil for this step. I stay with paper and pencil for as long as possible because it helps the ideas marinate in mind better.

I start by sketching a template of what the website might look like. Think in “wrappers”. Wrappers span the width of the entire website. You can rearrange them as you go to test which ones work better to convert visitors in your industry. You can test different lines of text within each wrapper. You can also include survey and questions bubbles next to each feature throughout the website so your visitors can give you feedback in realtime, but I will save conversational interface design for a future post.

Here is a screenshot of the initial sketch. It is basic. Nuts and bolts. However, you should be able to see how we went from a very basic set of notes from the questionnaire to now we have a blueprint of the actual website.

website sketch

Next, I sent this sketch along with my notes from the questionnaire to my client. This allows the client to see my progress, and gives them an early opportunity to give feedback in my design workflow. It is simple to change features – rapid prototype based on user feedback – using a piece of paper with an eraser and pencil. The alternative, is having to update a Figma, Sketch, or Photoshop design. Even more resource-thirsty, is waiting until a live developed WordPress site is up to realize a series of obvious edits that could have been iterated on paper.

frames flow email with client
Once the client is confident in the userflow and wireframes which can be measured by the client’s ability to “see the desired product begin to take shape”, the next step is the visual design.

Visual Design

Thanks to our legwork upfront, bringing the project together was simple.

I had the client’s responses from the initial questionnaire. I had the assets curated together for me in a single folder. We had already iterated through 15-20 improvements of the design when it was still in paper and pencil format. Visually designing the home page only took an hour or so.

visual design

After going through 2-3 design iterations based on my client’s feedback, we were now ready to bring a more enhanced version of the visual design into a custom developed WordPress site.

WordPress Development

The client decided to host the site on his own server. Once I received client approval on the live WordPress site, I downloaded a full backup of the site and migrated it to the client server. I also sent over the core site files to the CEO along with instructions on how to restore the files on their own time, if necessary.