UX UI Design Process

When building a website or app for clients, I approach each job with 5 steps:

research, ideation, prototyping, implementation, & iteration

To better illustrate each step, I will go through the process of building the site for Microgen Vet, a B2B business looking to get investors and partners to be educated on and start using better disease testing kits for animals.

Step 1: Research

With MicroGen Vet, I first started out by learning more about the business. With a series of in-depth questions, I uncovered their business goals, their unique value proposition, how they were currently branding themselves (if at all), who their target market was, a mood board of what they want the website to look and feel like, and much more.

From there I narrowed our project down to a few goals and challenges we were going to solve. Our main goals with MicroGen Vet was to solve their issue of:

  1. Clearly educating veterinarians on the problem of current methods of disease testing on animals.
  2. Communicate the benefits of MicroGen Vet.
  3. Make it easy for them to get their test kits.
  4. Get investors on board.
Examples of some of the research conducted around MicroGen Vet's business in the research stage.

Step 2: Ideation

Taking our research and inspiration from mood boards and competitor research, I started sketching out loose user flows and page layouts that would work best for meeting the website’s goals. After a few iterations, I moved on to making a sitemap on paper that acts as the information architecture which lists every single page and type of content to be put on each page. This acts as a scope of work to make sure we allocate enough time to complete the website within our timeline.

Loose sketches of layouts (on the left) help me think through problems and make sure we get all the features and information we need on the sitemap (beginnings on right).

Step 3: Wireframing

In wireframing, I took the loose sketches and sitemap and started building out the major site elements with demo content. Taking these layouts we ran them through rounds of edits and feedback with the client and users in order to make sure they made sense and easily allowed them to accomplish their goals on site.

For lead generation, I looked to create an easy simple contact form that is quickly accessible through many areas of the site, namely a button in the sticky navigation and CTA’s through in strategic sections of content-heavy pages. Further, for the educational piece, I looked at long-form, editorial content pieces from the Washington Journal and Polygon and took inspiration from their imagery heavy, and sectioned / anchor linked layout, as well as having a reading progress bar to give users the feeling of completion.

(Note: This step varies from project to project, especially when factoring in the timeline. In MicroGen Vet’s case, we had to get the site up within one month so we compressed this section by wireframing with demo content to save time on the site build phase. Typically I would create more refined wireframe sketches and use a prototyping software such as Adobe XD). 

Step 4: Launch

In the final stages of launch, I went through a length QA phase making sure the website worked across platforms and browsers, fixing any responsiveness issues, making sure there was consistency across the pages and brand elements, all major functionalities were working, that there were no broken links, and had another round of users go through the site to make sure there were no major layout issues within the user flow that we may have missed.

Above is the hero of MicroGen Vet homepage on launch day.

Step 5: Iterate

After launch MicroGen Vet received a lot of positive feedback from users, investors, and colleagues in the field. Users like the look and MicroGen Vet was speaking with plenty of interested veterinarians.

While the site was performing well, we were able to continue to keep their site converting users and helping them find what they’re looking for better through testing. Using platforms like Hotjar and VWO, I was able to help change layouts based on user behavior data, and test different subject lines and other things in order to see what users were responding to better. For instance, we saw users were not engaging with the video on the homepage, but there was a ton of engagement on the Biofilm page. We hypothesized users were just missing the opportunity for the video. So we added the video button on the Biofilm page and we saw a high engagement rate with the video.

In the long run, this allows us to better serve the business’s goals and the users, as we continue to solve MicroGen Vet’s problems better with better layouts based on user behavior.

There are so many tools out there to use to collect user behavior info. Just get started. (Google Analytics is definitely one not to be overlooked).

~Fin