Ever followed a recipe to the letter only to find the taste disappointing? It is a relatable frustration. I faced a similar scenario when applying my university-learned B2B website design skills to real projects. Despite thinking I had it all figured out, chaos ensued as theory and practice clashed. But you know what? I learned a lot from that experience, and I hope you can too.
The good thing: I knew the approach – Design Thinking.
The “naive” assumption: I thought design thinking was all I needed.
Turns out, that wasn’t the case. In practice, it is more complex. While Design Thinking is a valuable process, it is not the only ingredient for success.
Step 1: Set clear goals for your website
Define primary goals in collaboration with the sales team to ensure alignment with business objectives and sales processes.
Determine if your focus is on lead generation or demand generation, and if your target audience is in the top of the funnel (ToFu) or bottom of the funnel (BoFu). This decides the messaging and content you’ll feature on your main pages. Also, determine how leads will contact the sales team: via forms, questionnaires, phone calls, demos, meetings or live chat. This information will shape your website’s design.
In my project, I initially assumed our goals were clear and didn’t meet with the sales team (and management, as we were a small startup) to establish clear goals. However, presenting the first prototype later revealed conflicting views between marketing, management and sales. This forced me to adopt a new design approach, costing valuable time due to the oversight. It became evident that alignment was crucial before progressing further.
Step 2: Apply Design Thinking
Design Thinking is a human-centered approach to problem-solving and innovation. It is non-linear and iterative, helping teams understand users, challenge assumptions, and create innovative solutions through prototyping and testing. It is solution-based and user-centric, shifting the focus from problems to addressing user needs.
Five steps of Design Thinking:
- Empathize – understand the user’s needs
- Define – state the user’s needs and problems
- Ideate – come up with innovative ideas
- Prototype – illustrate ideas
- Test – test and improve
1. Empathize
The goal of this step is to understand the audience by stepping into their shoes and uncovering their key problems.
- Create a user persona
Develop a detailed user persona, including demographics, behaviors, motivations, goals, and challenges. It is essential to understand their objectives, challenges and pain points on your website to tailor the design effectively.
- Conduct user interviews
The best way to gather insights is through user interviews, with participants selected based on the created persona. In B2B settings, arranging interviews with the right personas can be challenging, especially if they are not yet customers. In my project, I aimed to select interviewees as close to the persona as possible. Since B2B websites are often complex and difficult to understand, we also interviewed users from outside the industry to test if non-experts understood our website.
When it comes to the number of interviews, there is no set rule. Usually, about 5 users are enough to find around 80% of the problems. Testing with more users might not reveal many new issues because you’ll likely see the same ones again.
Source: “Why You Only Need to Test with 5 Users“, Nielsen Norman Group
Here is how we conducted our interviews:
- We started with background questions about their website interactions:
- How often do you use the website?
- What is your main reason for visiting?
- Any other reasons for using it?
- What kind of content do you expect?
- Each user had a task to complete on the website
- We encouraged them to think aloud while navigating: what they saw, felt and planned to do next
- We asked about their experience (depending on the specifics of your website, you may have a different set of questions):
- What was your overall impression of the website?
- Were you able to find the information you wanted on the website? If not, what was missing or difficult to find?
- Was it intuitive to you what you should do next?
- What do you like about the website?
- Was there any content or information that you felt was superfluous?
- What suggestions do you have for improving the website, including design, information and functionality?
- Finally, we asked them to name 3 things they liked most and 3 things they would improve
We then used a User Empathy Map to understand what users need and want. This helped us see their problems and what they like.
- Analyze website data
To understand deeper how users navigate your website and find possible issues, analyze the website data. We used tools like Google Analytics (GA4) and Lucky Orange (a heat map plugin for websites). They show where users click and scroll.
2. Define
After understanding users’ experiences and collecting their feedback, you’ll need to define the problems they face. This means summarizing what you learned during the empathy stage and creating a clear problem statement to guide the design process.
In our project, we compiled the problems and noted how often they were mentioned. We then organized them into categories like website structure, homepage, product page, and contact methods to create a more structured overview of the issues.
3. Ideate
Once the problems are defined, you move on to ideation. Techniques like brainstorming and mind mapping can help generate ideas and visually represent them. We also used a quadrant analysis to assess the effort and impact of our ideas. This matrix helped us prioritize which features to implement first based on their potential impact and feasibility.
4. Prototype & test
Prototypes are valuable for building on ideas from ideation. Remember, they are not final products, so you don’t need to include every idea in your first prototype. Focus on specific aspects and gather feedback to refine your design.
In my project, I used Adobe XD to create prototypes, starting with the website structure and homepage. After testing with users and receiving feedback, I made adjustments for the second prototype, adding a product page. I tested with both the initial and additional users to ensure no important feedback was missed.
It is important to limit the number of iterations to avoid wasting time, especially in B2B contexts where user engagement for testing can be challenging. While 3 iterations are ideal for me, we only managed 2 due to time constraints and user availability.
Step 3: Go live, track and improve
Now, implement the design and launch your website! Be prepared to make adjustments to align with your CMS and plugins.
Once live, the work doesn’t end there! You’ll need to track your website’s performance using tools like Lucky Orange/Hotjar and Google Analytics (GA4) and make necessary improvements. This ongoing process allows you to gather a larger sample of data and continuously improve your website.
Pro tips for creating a user-centric B2B website
- Clear website structure and navigation
- Mobile-friendly design
- Use customer-friendly language: Keep your messaging simple and avoid complex terminology. Ensure that visitors understand your offerings clearly
- Optimize website speed: Users may leave if your website loads slowly. Optimize loading times by minimizing large files, animations and unnecessary elements
- Avoid excessive creativity on standard elements; users should easily recognize how to proceed
- Maintain persona and messaging consistency: Define target audience personas clearly and tailor website content to meet their specific needs and interests
- Prominent CTAs: Make your calls-to-action (CTAs) clear, prominent and easy to find, guiding users towards desired actions
- Don’t overlook your “About Us” section: Build trust with potential clients by providing contact details, vision, mission, and team members
References:
1. Igor Dinuzzi, “The importance of UX and design thinking“, Toptal Designers
2. Jakob Nielsen, “Why You Only Need to Test with 5 Users“, Nielsen Norman Group
3. Kittie Walker, “Creating customer personas using an empathy map“, Medium.com
4. “Impact vs. effort: a simple matrix for prioritising tasks“, BiteSize Learning