Web Design & UI/UX

Distillery Tech • Web design PROJECT

Distillery Tech, LLC is a full-service software development outsourcing company headquartered in Los Angeles, CA with a total of seven offices in five countries. 

Project Duration

November 2020 – August 2021 (9 Months)

Objective

To create a custom website to update Distillery’s brand messaging and look.

Categories

Web Design
UI/UX

Industry

Tech Services

Laptop showing the Distillery website

Year Founded

Global Offices

Employees

Annual Revenue

The DESIGN Process

Leading the design and development process, we worked directly and regularly with the three members of Distillery’s marketing department, as well as occasionally consulting with members of Distillery’s DevOps team to help solve technical issues related to hosting, security, the staging to production pipeline, and more. The following elaborates on the specific work we did in order to create this website.

1. Site Map

All website content and its user flows were redone in order to make a more streamlined user journey.

2. Ideation & Research

Research was conducted during nearly every stage of the project and informed every important decision.

3. Wireframes

Wireframes were instrumental in the process of determining which pages to include or emit on the final website.

4. Mockups

Having pixel-perfect mockups to compare to, made the development process much faster and easier.

5. Prototype

The prototype allowed all stakeholders to test the site navigation and content before any web pages were finished.

6. Theme Development

We developed a custom theme in order to better meet the needs and preferences of the client.

7. Site Creation

There were many steps involved from coding pages, creating page templates, to setting up ACF fields.

8. Accessibility

Every design choice was made with accessibility in mind so as to not exclude anyone.

9. Launch & Testing

Testing was conducted on different browsers and devices, with additional testing done by Distillery’s QA dept.

Site Map

In addition to this site map design (below), we also created a 16-page expert review, which outlined the issues with the current site and our recommendations for improving upon it. Working with Distillery’s vice president of marketing, we then updated the list of pages and restructured the menu items in the top navigation.

site-map

Ideation & Research

Before diving into the sketching and designing stage, we consulted about what specific design styles and elements would work best for Distillery’s website redesign. We then curated a collection of award-winning website home page designs that we then went through together and discussed.

A collage of 100 website homepages

Wireframes

Once the wireframe designs were completed and approved, we were then able to decide on the final draft of the sitemap. With the final draft, it was determined that some of the pages would have to be added at a later date, because the content wouldn’t be ready in time for the website launch deadline.

An image with all 30 web page wireframes

Mockups

The creative director for Distillery’s internal design team designed a homepage mockup that I modified and used as a jumping off point to complete the mockups for all of the rest of the 30 unique pages. I also edited and optimized most images, icons, and illustrations supplied by Distillery’s design and marketing departments.

6 distillery.com mockup pages

Prototype

Using the sharing functionality of Adobe XD, everyone working on the site and all shareholders were able to monitor progress, test the site navigation, and review design changes before any pages were coded and finished, which allowed us to make small incremental changes without needing to do time-consuming coding updates.

A gif of all of the mockup web pages showing their link connections

Theme Development

The theme was developed on top of an Understrap Framework with Bootstrap 4 and Font Awesome 5, and the backend heavily utilized Advanced Custom Fields (ACF) to allow the client to update the site content without having to write code. In total around 20 full-page templates were created, so building new pages would be easier.

site-map

Site Creation

Utilizing the mockups created in XD, Jean created the custom WordPress theme pages using ACF, Max Mega Menu, Autopilot, Search WP, and Font Awesome 5. I assisted with checking and updating all CSS font values (size, weight, line-height, and letter-spacing), and created a brand guide to standardize all type.

Design & Development Toolkit
  • Adobe XD
  • Adobe Photoshop
  • Understrap Framework
  • Bootstrap 4
  • Advanced Custom Fields (ACF)
  • Max Mega Menu
  • Autopilot API for Contact Forms
  • Search WP
  • Font Awesome 5
Website Text Style Guide
site-map

Accessibility

There were a few instances where color values in the original style guide needed to be tweaked to pass WCAG standards. We ensured that all text on the website had sufficient contrast, and that all images had plain alt text. We also ensured that all links were clearly styled and avoided adding any frivolous elements to non-links.

site-map

Launch & Testing

Just before, and for a period of about two weeks after the website was launched, we tested website pages and functionality on different browsers and devices, to try to find any mistakes on the site so that we could correct them. Distillery’s own internal QA also did testing and we corrected all issues that were discovered.

A desk with 3 device screens showing the Distillery website

Additional Roles

  • Initial Home Page Mockup Design Mikhail Nikipelov
  • Copywriting James Burdine, Riley Lico, Abbey Mertz, and a contracted copy writer
  • Image & Icon Curation Riley Lico
  • Custom Illustration Distillery’s internal design dept.
  • Project Management Carlos Arreola
  • Additional Website Testing Distillery’s internal QA dept.  
  • DevOps Team Dmitry Stepanenko, Nikita Semistrok, Roman Slesarev, and Juan Pablo Bouquet
iMac on a desk with the Distillery home page alternating between English and Spanish versions

What’s Next

A few months after launch, we were contracted again to work on this website to create a Spanish language version. Since then, we have also continued to assist with updating content, creating new pages, helping them switch to new hosting, and assisting them with setting up a new staging to production pipeline. We hope to continue to assist them with this website as it continues to grow and expand. 

“I can’t recommend Nehemiah Harmsen’s talent highly enough. Nehemiah 9 Design was a great creative partner for a series of design and UX projects.”

James Burdine

Vice President of Marketing, Distillery Tech

Our Other Design Projects

Click on one of our recent projects below to see a case study for an in-depth look at our design process.

Laptop showing the Richard Thomas website
Laptop showing the Larky website
Laptop showing the June Manning Thomas website

Let’s Work Together!

Let’s connect over email to set up a time to discuss your new project to see how we can work together to become partners to help you grow your business.