A winning product and category page wireframe
I’ve been focusing on different industries I’ve helped in my previous posts. I am going to shake it up a bit and break down a branch of my day.
I started learning and educating myself about wireframing in 2014. I never realized how important it is to plan out a page or a website through wireframes.
I am going to show everyone how I generate high converting wireframes for our companies.
Let’s begin.
What is a wireframe
I am going to put this in my own words because I feel like it’s different for every company.
Wireframes help visualize an idea or thesis before you get the design or development team involved in the project.
Low-fidelity wireframes are quick to communicate ideas while high-fidelity wireframes show more details.
High-fidelity wireframes will include the whole picture before it’s sent to the design and development team. I often include all the details our team needs including:
- Notes on how a section should be designed
- Requirements for the media team
- Details for our graphic designer
- Exact details for our copywriter
I’ll be honest. Without wireframing a page, I am not sure you can even get started on a project. If you are, you’re either a genius or setting yourself up for failure.
The architecture of a wireframe
Here’s the secret: THERE ARE NONE!
Go ahead and search on the web for templates. You’re not going to find one person telling you that every company and website is different. A demographic for one website will be completely different from another.
Before you go and start wasting time on looking for templates, head on over to https://baymard.com/ and learn as much as you can from their blog. If you’ve got the budget, pay the $960 to learn from the best in the world.
What you want to do first is research who you’ll be working with. You don’t need a large budget for this. You just need to have an interest and a thirst to learn about who you’re marketing to. I’ll explain in the next section below.
User research
I’ll give you the exact blueprint on how we learn about a target demographic. Let’s cut through the fluff and get into it.
You’ll notice a little repetition with this section and my previous posts but it’s important enough for me to go over again in this post.
Interviewing current customers
Here are broad questions I ask the target demographic I am after:
- Where exactly did you find out about us?
- What persuaded you to purchase from us?
- Which other options did you consider before choosing _________?
- What’s the one thing that nearly stopped you buying from us?
- What was the biggest challenge, frustrating or problem in finding the right ______?
- If you could have us create something just for you, what would it be?
- What other products or services should we offer?
Running a survey on the website
Here’s a survey I run on all the websites our team works on:
- What was the purpose of your visit?
- Were you able to complete the purpose of your visit today?
If the answer is no to question 2, ask question 3:
- What stopped you completing the purpose of your visit today?
Interviewing staff or business owner
Here are the questions we ask key staff members:
- Tell me about a recent conversation you had with a prospect, what was the challenge they were trying to solve?
- What was the last prospect/company that you had a really easy time closing? What was the problem that person was trying to solve for? Why do you think that person signed with you?
- What alternative products/services have prospects compared you to?
- Tell me about the competition… what do you think your competitive advantage is over the rest of the companies that you compete with?
- Are there specific industries or types of customers that you’ve noticed are a great fit for the product/service?
Run a broad survey on Google
I haven’t chosen a specific industry so I can’t give you the questions I would ask. However, to help you out, I’ll include the link to one of my Google surveys for lawyers.
Interview 5 people who don’t know about your business
Interviewing a target demographic who hasn’t purchased from you or your client can be tricky. You have to make sure you get the right person. They also have to be in a comfortable setting.
Here’s are some tips once you verify they’re a good fit on the phone:
- Meet them at a cosy coffee shop.
- Make sure there is music but it’s not too loud. Usually, the people working at coffee shops are accomodating.
- Do not bring any recording gear. This will put the person you’re interviewing on edge. Just ask your questions and take notes.
- No need to dress up. This is a casual conversation.
- Start with small talk first. Get them comfortable with you.
- Don’t just hand them cash. Put it in an envelope like a professional.
- Thank them and send them on their way.
It’s easy to forget that we’re dealing with human beings. Keep it natural and you’re fine.
Product page wireframe example
I didn’t want to give you the golden egg too quick. I had to show you why it’s important to understand who you’re selling to before sharing a template.
Remember, this is just a template and it worked for just one of our projects. It will probably not work for you but it’s a good way to understand what a performing product wireframe looks like.
Category page wireframe
I am not going to reinvent the wheel with a winning category page for eCommerce websites.
Most category pages are obvious and follow a guideline. Here’s a template which worked for us:
What do I use to wireframe?
The best wireframing tool out there is Balsamiq. They are the most complete wireframing tool I’ve ever used.
Their desktop tool is only $89. If you like collaborating and working in the cloud, they have a very affordable $90/year plan.
Other examples
I’ve also used Balsamiq to wireframe software, landing pages, sitemaps and banner ads. Like I mentioned before, I will not start a project without wireframing our thesis.
Here are other examples:
You get the idea.
Final thoughts
I am not an engineer nor do I want to be. What I can do very well is wireframe the hell out of a project.
I know it might seem hard but it’s not. It’s all about process and collaboration. Once you get that right, your work will convert very well.
Let me know if I’ve missed anything.
Until next time, catch you all on my next post.