Lead-Gen Makeover for WeframeTech

About Company

WeframeTech is a specialized digital solution agency that operates within the service-based niche, with expertise in headless and Jamstack technologies. Offering all form of digital solutions to D2C and B2B organizations.

The Team

As far as the design is concerned I was the only designer contributing to the project alongside the stakeholders and development team.

1. Stakeholders — Involvement of stakeholders was the most fundamental and crucial piece of the project in-order to understand the requirements & goal. While keeping the design decisions well directed & feedbacks flowing.
2. Designer (Myself) — To bridge the gap between ideas, expectations, outcomes, business goals and reality.
3. Developers — I needed to establish frequent communication with the development team at different stages of the project to understand their constraints and bandwidth with developmental resource.

Context

During my final weeks of internship at WeframeTech the stakeholders came with a new brief — this time for their very own website. While we already had an existing website it wasn’t something which represented our agency and values we contribute into other businesses.

Why Redesign?

Courtsey: Web Archive

This project was more of a revamp of their internet identity than just a basic redesign. As per the stakeholders, the existing site was very generic looking agency website and not something which reflects their values and expertise.

First Things First

Before starting out with anything, the first step was to have the stakeholders on the boat to gain insights from them regarding their goal, expectations and ideas with this revamp.

Since the project was initiated from their end things got easier for me, additionally I asked them few open-ended questions while probing.

1. Why isn’t the current version of the website unable to suffice the needs?
2. How is it currently contributing to business vs How do you idealize it?
3. What results do you expect at the end of this redesign?
4. Is there any specific feature or functionality that’s expected?
5. What kind of persona are you targeting and with what characteristics as an agency?

Excerpt from Stakeholder’s Interview

“We want a website which can translate our core strengths to our potential clients & turn them into leads”

Primary Goals

1. Increase inbound leads
2. Rebrand as headless and jamstack development agency.

Secondary Goals

1. Get clarity from the clients right from the first interaction.
2. Visually stand out as professionals and experts.
3. Build trust.

Whom do we Attract?

• People who are already aware of jamstack and headless technology and are in search of an agency who can do the developmental work.

The Architecture

From the interview & the analysis of the previous website it was very clear that it doesn’t lead the user with an objective. Hence it was very important to design an architecture which affects the decision making of the prospects providentially as well as build trust.

Hero Section

• Succinct hero copy to reflect about agency’s core.
• Concise primary & secondary CTA to capture user retention.
• Highlighted list of clients to build trust.

Proof of Work

• Proof of work presented as success stories along with tags showcasing field of work to showcase successfully delivered project with specific requirements.

Tech Transparency

• As the target persona is of someone who is well aware of jamstack and headless technology it was important to list out technology services & languages being used to achieve developmental success.
• I listed out tech stacks for different categories for the ease of visitor to scan through their concerned section.

Services

• Because the primary focus was to present ourselves as specialized agency it was important list out other services as well which might have gone overshadowed.
• A CTA for demo call was included for added changes of conversion.

Video Testimonials

“Marketing only really works with word of mouth”

• Elevating social proof was important at this point & what better way than adding client testimonial that too in form of video.
• I designed 2 variants to cover both circumstances of video & textual testimonials.
• Also an option to “view project” was added in the testimonial card for visitors to read & view the project our clients mentioned in their word of mouth.

Demo Call Plug

• Major areas of the architecture were covered & to put the final nail in the coffin & nudge the users to drive towards that funnel of conversion I added a card to plug our free discovery call where our sales team gets a chance to grip on them.

FAQs

• What better than saving up time & resources for both ourselves & the prospects by answering some of the most commonly asked questions.

Quotation Funnel

Most dramatic & important part of the project was to retain & convert the prospects via instant quotation. I wanted to minimize friction as much as possible for this flow and at the same time I communicated with the engineering team to capture events at each step which can be further used in understanding user behavior and interests along with prospect’s contact for follow-up.

Project Preference

• Once the prospect clicks on “Instant Quotation” they are redirected to this page asking them to choose their preference for their project.
• Capturing this event would help us in understanding trends & interests.

Prospect's Contact

• After entering the preference prospect’s need to enter their contact & company details which would help the sales team for follow-up in scenarios where leads don’t book consultation call.

Final Quote

• Once the contact details are captured, prospect’s are shown an estimate cost that will be needed to complete the project.
• From this step the prospect’s cam either drop-off where sales team can follow-up.
• Book the call where consultation team can turn them into clients.
• Or change requirement & get refreshed quote.

Iterations

After the completion of all the pages it was time for roundtable feedback session with stakeholders.

• A more comprehensive hero text & supporting text aligning with the CTA.
• Increase in text size of hero text.
• Refined background grid.
• Reduced proximity to better adjustment in different viewport sizes.

“Every scroll matters”

• For the tech framework list, I merged headless & backend frameworks.
• Confined similar frameworks into a single frame to create visual harmony & reducing the height of whole section.

Final Design

My Learnings

1. Working within time constraints.
2. Importance of copywriting in UX.
3. Keeping sync with development team.
4. Aligning business goals with design.
5. Documenting the whole process.
6. Synthesizing feedbacks & insights by involving stakeholders.

Conclusion

While it was a kind of project which always kept me on toes to deliver at all grounds and aspects I had my own share of learning while delivering it. Constant loop of feedbacks, engagement with engineering team, going mentally blank and frequent iterations all of it made this one hell of an experience which I will forever be proud of.

Meanwhile please reach out to me to contribute with your valuable feedbacks.