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
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.
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.
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.
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.
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.
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 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
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.
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.
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
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.”
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.
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.