Archives: Case Studies

Introduction

When you’re in the creative field, you almost always have to lead with your work. Intension Design builds high-end residential work as an architect-led contractor working in Los Angeles. The upside is that they had hundreds of photos, the downside is that they didn’t have a very good way of showing them off.

Research and Analysis

The first step in designing a website for a high-end real estate contractor is to conduct research and analysis to understand the target audience, the market competition, and the unique value proposition of the contractor. In this case, my research indicated that the target audience for the website are architect and individuals looking for luxury remodels and builds. The market competition is fierce, with many high-end real estate contractors offering similar services and amenities. However, our client’s unique value proposition is that they are led by architects adding credibility to their attention to detail, commitment to quality work and more technical organizational knowledge.

Design Process

The next step in designing the website is to develop a design process that takes into account the research and analysis. In this case, we started with some open discussions about design, provided mood-boards to the client and moved on to wireframing pages.

We then moved on to the visual design phase, where we integrated their color scheme and updated their typography and layout to conveys the client’s sense of luxury and exclusivity. We used high-quality images and minimalist graphics to showcase the client’s properties and modern aesthetic.

Design Solution

After the design process was complete, we presented the client with a website that met all of their requirements and exceeded their expectations. The website features a responsive design that adapts to all screen sizes and devices, and it a custom built portfolio item custom-post-type and a robust portfolio page with AJAX filtering features.

Individual portfolio pages are using a stylish slider that breaks out of the page layout on desktop and adjusts beautifully on mobile. I also integrated lightbox in the portfolio gallery section for easier viewing.

I added scroll listener animations on a purpose page and a logo load screen feature on the homepage. The company wanted a minimal portfolio page with the images as the main focus and opted out of longer form text. Regardless, we added meta descriptions, keywords and OG images on each page.

Evaluation

We aren’t handling analytics for the client. Their presence on search remains at two (due to a consumer product with the same name), but they now have extensions for key pages as well as images of their past projects on their search results. They are ranked #1 if you search for them and add pertinent search information like “contractor,” or “Los Angeles.” I can’t say much about engagement and bounce rates, but I do know they are happy with the site as they’ve used us to adopt pages from the site into their print materials.

Introduction

Bryan Winters is an award-winning architect working in the beach cities of Los Angeles. The majority of his portfolio consists of stunning high-end modern residential homes. five philosophies. His old site also laid out his aesthetic philosophy. We took that document and used it as a guide to building out a design language that included features like stacked divs, animated transitions, parallax, and randomized styling as well as a literal syntax for lists and titles.

I borrowed heavily from art and photography magazines and other print media opting for Helvetica with varying font weights and more classic two-column spreads with thin separating lines underneath and ample white space above the headers to break up sections.

Research and Analysis

The first step in designing a website for a philosophy-driven architect with modern sensibilities is to conduct research and analysis to understand the target audience, the market competition, and the unique value proposition of the architect. In this case, our research indicated that the target audience for the website is primarily individuals and businesses who are looking for unique, high-quality architectural designs. The market competition is fierce, with many architects offering similar services. However, our client’s unique value proposition is their philosophy-driven approach to architecture, with a focus on sustainability, functionality, technology and core aesthetic themes.

Design Process

After compiling market research and digging into the client’s differentiation strategy, we dove into mood boards, sitemaps and batting around features that were in line with the stated philosophy. We found a real rhythm early on in the process and I started with page mockups. From the outset, we had decided on a robust custom post type for portfolios, so I started with mockups for the portfolio pages as they would be the most complex. The portfolio page, in essence, became the style guide for the rest of the site. humnlab+ architecture already used high-quality images and graphics to showcase the client’s projects, and we mined a lot of his prep material to convey the complexity and elegance of his projects.

A constant flow of communication allowed us to find opportunities to add features and increase the consistency of styling conventions across the site.

Design Solution

After the revision process and several feature extensions, Bryan and I had a site that exceeded both of our expectations. The website features a responsive design that adapts to all screen sizes and devices, it includes a menu with a project filter built, a portfolio custom post type that with over 20 different optional inputs that generate a varied experience, animated page transitions using Barba.js within WordPress, and a philosophy page using scroll listeners to implement fixed positions for a stacking effect while navigating concepts.

We used a black and white color scheme with blue as an accent color applying duotone images to parallax sections that revealed the location of the project as well as an optional duotone hover state for galleries within individual portfolio items.

We also integrated SEO best practices sitewide. Each portfolio item can have a lot of text and we seized the opportunity by highlighting key features within the SEO of each project.

Evaluation

After the website was launched, we evaluated it to measure its effectiveness and impact. We used website analytics to track user behavior and engagement. Bryan also collected feedback from his clients and colleagues. The evaluation period indicated that the website is performing well, with high user engagement and positive feedback. Overall, the website has helped the client establish their online presence and showcase their philosophy-driven approach to architecture, attracting new clients and growing their business.

Introduction

Gullywasher creates unique stormwater treatment systems in order to help companies stay compliant with state and federal water regulations. They’re a highly resourceful and knowledgeable team always looking forward and pioneering new water remediation techniques. That said, their website was stuck in the dark ages.

Research and Analysis

The first step in designing a website for an engineering firm offering stormwater compliance systems and consulting is to conduct research and analysis to understand the target audience, the market competition, and the unique value proposition of the firm. In this case, our research indicated that the target audience for the website is primarily engineering professionals, builders, developers, and municipalities. The market competition is moderate, with less than twenty major players offering similar services in the United States. Our client’s unique value proposition is their focus on innovative stormwater compliance solutions with a focus on their modular filtration systems that can be adjusted to meet the specific needs of their clients.

Design Process

The next step in designing the website is to develop a design process that takes into account the research and analysis. In this case, I started with a style guide, sitemap and some wireframes to create a clear and intuitive navigation structure that prioritizes the most important information and features.

We created a design that integrated the client’s brand and conveyed a sense of professionalism and expertise. We used high-quality images and graphics to showcase the client’s variety of products, and we used a clean and modern layout to make the site easy to navigate and use.

Pain Points: Navigation and Forms

There were usability issues faced by users with the navigation bars and forms in the previous iteration of the product. As a result, we made improving the navigation and form functionality a top priority in the updated version of the product.

Design Solution

We went through some rounds of revisions to dial in the site prior to building it. The website features a responsive design that adapts to all screen sizes and devices, and includes a case studies page, performance reports and industry news. We used a color scheme and typography that are consistent with the client’s brand and we made sure that the site is easy to use and navigate.

Navigation: A place for everything and everything in its place.

A new form

Visually, we had to break away from having the form look like it would take forever. In the previous incarnation there were tons of text inputs and radio buttons that weren’t always necessary. I used some contact form add ons to add conditional functionality and database support rather than it rerouting form information via javascript to the admin email. This means the form is only as long as it needs to be and the sales team had a place for all of their leads information.

We also optimized the site for search engine rankings on each page and posts that were recycled from the previous site incarnation.

Evaluation

After the website was launched, we checked in to measure its effectiveness and impact. We used website analytics follow ups with the client to make any necessary improvements. Gullwasher.com is performing well, with high user engagement, low bounce rates, and a healthy conversion rate on the forms. Overall, the website has helped the client establish their online presence and generate more leads for their stormwater compliance systems and consulting services.

Introduction

New year , new site. I coded my previous site in 2019 and at the time I just wanted to stand out. I had looked at my competition and saw very generic sites built on plug and play engines or really outdated layouts. So I went with something colorful and over the years, I changed more and more things until it got a bit busy and out of control. November 2022, I ran some ads for the business. They got some pretty high click through, but zilch in the way of conversion. So it was time to investigate.

Problem: The website has a high bounce rate, which means users aren’t finding the content relevant or engaging. 

Research and Analysis

Analytics:

Reviewing my analytics, I saw a 100% bounce rate in November. Which wasn’t very helpful, so I did analysis for the past two years and I noticed that people landed on the homepage with a 60% bounce rate and then the next two pages in terms of traffic were the web design page and the about page. 

These pages are most prominent in the footer and the header menus and the bounce rate on the about page was 90%.

User interviews:

I had a few one on ones with clients and friends and asked them to use the site around me. The big takeaways were that people often couldn’t tell where my project examples were and people rarely got to the bottom of the page. Aside from thinking some of the photos were fun, there weren’t any big moments for the design of the site. I saw eyes glaze over in the about page and people rarely went to any of the other services other than the first item in the drop down menu.

Design Process

As a freelancer/ sole business owner, a lot of my value comes from being warm and friendly  while providing context and collecting feedback from my client. So that needed to be communicated. 

I did have a page for work in my previous site, but it wasn’t in the header and it was running off a portfolio plugin that limited the presentation of the work. In my day to day, I’m often asked about previous work. So I had to do a better job highlighting that.

Along with all of the info I took from analytics and conversations with people about the site, I looked around for ideas and inspirations. I audited my site, taking notes about what worked and what didn’t and looked at competitors as well as agencies that were way out of my league. The final image is about where I landed prior to revisions.

Design Solution

Well you’re here. You see the site, but let me walk through some key decisions.

minimal menu: there are only two links on the header menu: work and contact.

There’s no service drop down or even a service page. I had coded both a homepage, a web design page and was well into laying out a digital advertising page. Instead, I opted to make the homepage and the web design service page one and the same. I figure since web is the core of my business and visitors weren’t bothering to drop down and check out the other pages, there was little incentive to give them something they weren’t going to use.

In the original homepage design I used a full width video as a point of visual interest underneath an oversized headline. After getting some initial feedback, the image I created got compliments and the video forced the user to quickly scroll past the headline. So after some feedback, I went with this:

Case Study Post Type

For this site I created a custom post type within the theme (custom theme using _S as the base). I allowed the post to be able to use all of the Gutenberg features as well as added two custom fields for client and release date for the project.

Evaluation

I’ll post analytics at the end of January after running another ad campaign.

Conclusion

So far, I’m happy with the way it’s come out and I’ll have more to share after a round of analytics and interviews.