Establishing a New Revenue Pipeline through UX

The Client

Belred is an HVAC company in Washington state. It’s also part of the APEX network of HVAC brands. Both of our points of contact were APEX employees, one being a regional director and the other a national representative. Success on this project would mean establishing a new revenue pipeline through the many other brands that these APEX employees oversaw.

The Finished Project

https://www.belred.com/

Project Highlights

• Created a relationship with the APEX organization that opened a new revenue pipeline, leading to over a dozen new contracts and many more to come
• Created a CRO optimized website template in Figma, built with variables compatible to the variables on the live site
• Improved design efficiency from 4 weeks to 4 days
• Improved development efficiency from 3 months to 2 weeks

My Roles & Responsibilities

• Client management
• Jr Project management
• Project strategy
• Project timeline and schedule adherence
• Project proposal drafting and pricing
• User research and testing
• Content strategy
• Mentoring of the assigned designer
• Adjustment of prototype to create a flexible template
• Match prototype variables to variables on the live site

Client Goals

• Cleaner, more modern design
• Easier for the user to navigate
• Emphasis on specific, new services and pages
• Expedited timeline (6 weeks)

Internal Goals

• Meet tight deadlines
• Establish a solid relationship with APEX
• Create a new revenue pipeline
• Create a template that could be easily implemented on future APEX projects

Deliverables

• Basic mood board/style guide
• Prototype of the website including designs for 7 custom page designs and a general template
• Prototypes for responsive designs
• Developed and published website with migrated content from the old site

Technologies Used

Impact & Measurements for Success

• New Revenue Pipeline
  Belred is just one brand of around 100 Apex brands. I worked with both the regional Apex marketing director for the northwest as well as a national representative. As the project progressed, it became clear very quickly that both were very happy with our work. In our meetings they would often ask me about their other brands. Before the project was completed, we had signed contracts for other brands under the regional representative and through the notional representative our sales team had sales calls set with several other brand owners and regional directors. We quickly found ourselves with nearly a dozen contracts, and a healthy new pipeline with additional leads as well. These leads gave us both new website design projects as well as new monthly SEO contracts.
• Flexible Website Template
  When starting this project, I realized that we were going to have many other projects, nearly identical to this one. Our team decided that we would use the Belred project as a template for other websites. However, I foresaw that doing so was going to create a lot unforeseen design issues at the development stage. Correcting issues once developed can be extremely difficult as changes tend to have unforeseen domino effects. So, I adjusted the prototypes my designer had made and created variable for all of the colors, titles, text, buttons, overlays, etc. I designed these variables to match the way they were used in the code on the live site. Then I went through and connected all elements to variables. I also created training videos to show the designer and developers what I had done and how it could be used. This adjustment made it easy for the designer to go through and switch out the variable for a new brand. She could then easily identify if there were any changes that need to be made to the code to accommodate the new brand. Doing this cut down design time from 4 weeks to 4 days, and development time from 3 months to 2 weeks.
• Profit Margins Increased by 400%
  Improving efficiency by more than 400% also increased profit margins. We were able to maintain pricing, with less tedious work and stress required of the team, while at the same time providing more profit for the company.

Overcoming Obstacles

• Development Behind Schedule
  Working with a small team has benefits and drawbacks. Unfortunately, there were some unforeseen complexities on the existing website that made the timeline impossible to meet. Our small team just wasn’t able to absorb the extra work. However, one of the main expectations the client had was an expedited timeline. This was not something that we could let happen, but the development schedule was already overburdened. I communicated with the assigned developer and sought out updates to figure out what was going wrong. The developer made commitments, but soon stopped responding as deadlines weren’t being met. Although it was through no fault of their own, they were embarrassed that they weren’t meeting the deadlines. It was at this point that I decided to involve the COO, who is very experienced in dealing with these difficult situations and inner company politics. He spoke with the developer and their supervisor in a way that built relationships and moral. He also worked with them to find a way to meet the deadline. He then coached me on how to do the same, which was an amazing learning experience for me. We began having daily meetings with all involved on the projects, to give status updates and stay on track. I ran these meetings, and the COO attended as well and coached me as needed. The project was completed on time, with company moral well intact.

Project Phases

1. Layout project timeline in Instagantt
2. Brand and Client Research
3. User Research
4. Data analysis of current user flows
5. Content Strategy
6. Handoff content structures to designer
7. Review finished designs and mentor designer
8. Seek client approval on designs
9. Make any adjustments needed and pass on to development
10. Follow up with designer and developer to ensure timely completion of phases
11. Quality control of programmed designs
12. Migration of old site content
13. Quality control of the site as a whole
14. Publish Site
15. Quality control of live site
16. Run data on the user behaviors and design effectiveness

Methods and Strategies

Setting the Timeline

Working with such tight timelines was difficult, and a solid gantt chart was necessary to ensure that each task could flow to the next and that tasks that could be done simultaneously were. I worked alongside the COO on this one. We created a timeline that had overlapping design and development time. When the style guide was done, we passed it on to development so they could begin setting up their environment. While they developed that, we moved on to the next page. Throughout this process I was careful to communicate to the client the urgency of quick approvals, so we could have time to make any adjustments before turning designs over to development. Clear expectations were set both for our team and for the client. This is something that the client was very appreciative of.

Mentoring the Designer

The designer assigned to this project had exceptional design and aesthetic skills, but was still learning how to apply User Experience principles. This was the perfect learning experience for her to come in and design the site. I provided her with content layouts, showing where different content should go. I would briefly walk her through the purpose of each section. From there she could run with the content to create a design, with some minor touchups after the fact. Throughout the project, we got to where I created less physical content layouts, and gave more verbal explanations instead.

Setting Client Expectations

On previous website redesign projects, a problem we had faced was a misalignment of the client’s expectations and the final product. This was baffling to me, because we had always provided pixel perfect prototypes that were approved before development. Yet clients would find something that they would be disappointed about. This would cause scope creep, and create a very difficult client management situation.

So I got some coaching from my company’s CEO at the start of this project. He helped me learn a new strategy. It was so simple, yet so effective.

1. At the beginning of the project ask the client, “What does this project need to look like so that at the end you are in love with it?”
2. Record the client’s answers and set appropriate goals.
3. Throughout the project, remind the client of their goals and point out how they are being achieved. For example, “If you remember one of your goals for the site is ‘x’, with that in mind we did ‘y’ and ‘z’.”
4. At the end of the project, review the clients goals with them and how they were met.

Most of this I was already doing. But I was missing a couple of key components. First, I had a tendency to breeze through the clients’ goals. Second, I didn’t phrase it in terms of what they would “be in love with”. I would just ask what their goals were. Third, I wouldn’t remind them of their goals throughout the project, just at the end.

Well, this method was more than successful. The client was delighted through the entire process and expressed many times that they appreciated the clear and frequent communication. At the end of the project the truly were “in love” with the final product.