website design Archives - The Good Optimizing Digital Experiences Wed, 15 Oct 2025 16:57:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 Fritz O’Connor Stays User-Centered and Leads with Data During Uncertain Times https://thegood.com/insights/fritz-oconnor/ Thu, 04 Sep 2025 20:09:59 +0000 https://thegood.com/?post_type=insights&p=110835 Building operational excellence in marketing isn’t just about implementing the latest tools or following industry best practices. It requires a deep understanding of customers, systematic thinking, and the ability to lead teams through uncertainty with data as your guide. Fritz O’Connor, former VP of Marketing at Ironman 4×4 America, exemplifies this approach. With over two […]

The post Fritz O’Connor Stays User-Centered and Leads with Data During Uncertain Times appeared first on The Good.

]]>
Building operational excellence in marketing isn’t just about implementing the latest tools or following industry best practices. It requires a deep understanding of customers, systematic thinking, and the ability to lead teams through uncertainty with data as your guide.

Fritz O’Connor, former VP of Marketing at Ironman 4×4 America, exemplifies this approach. With over two decades of experience spanning manufacturing, sales, and marketing leadership, Fritz has developed a methodology for building high-performing organizations that deliver results consistently, even in challenging circumstances.

A marketing leader built for manufacturing

Fritz’s career journey reads like a masterclass in understanding customers across different industries. Starting in the printing and paper industry, he cut his teeth in structured sales training programs that taught him the fundamentals of professional sales and business operations.

“I’ve spent my entire career in sales and marketing roles. Almost exclusively in the manufacturing sector for companies that make stuff,” Fritz explains. This foundation in manufacturing would prove invaluable throughout his career, giving him deep insight into the complexity of bringing physical products to market.

His two-decade tenure at GE further refined his skills across diverse business environments. “We always used to say we can work in any industry, anywhere in the world, and still get paid by the same company,” he recalls. This experience working across plastics, appliances, and GE Corporate gave him a unique perspective on how great companies operate at scale.

But it was during his time at GE Corporate that Fritz discovered what would become his career-defining framework: differential value proposition (DVP). Working in a marketing consulting role with virtually every business in GE’s global portfolio, he helped launch this customer-centric approach to messaging and positioning throughout the organization.

This systematic approach to understanding and serving customers became foundational to Fritz’s ongoing success.

Implementing systems and frameworks that take teams from features to solutions

Originally coined by the founder of Valkre Solutions, Jerry Alderman, the DVP framework transforms how companies think about customer messaging and competitive positioning. Fritz became a master at implementing this methodology across diverse organizations.

“What are you offering? Be it a product or service that is better than the customer’s next best alternative,” Fritz explains. This might seem simple, but the implications are profound. Rather than competing on features or price, DVP focuses on solving customer problems in ways that competitors simply cannot match.

The challenge, as Fritz learned during his GE implementation, is that DVP represents a fundamental shift in thinking. "Every business, product, or service has a value proposition, but not every value proposition is differential. So many companies have the same value proposition. The white space is that differential part."

"It's about switching thinking from a feature to a benefit. For example, a blue appliance is not a differential value proposition. It's a feature."

Fritz teaches teams to make this shift by leading with problems and solutions.

"It's how it makes the consumer or customer's life better, how it solves that problem. You have to identify what the problem is. You have to articulate how you can fix that problem in a different way, better than anybody else."

This shift from features to solutions requires teams to understand their customers' actual problems, not just their stated needs.

For leaders, this translates directly into more effective product messaging, clearer value propositions, and ultimately, higher conversion rates.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox.

Overcoming the "this is how we've always done it" challenge

One of Fritz's biggest career wins (and ongoing challenges) centers around implementing the Differential Value Proposition (DVP) methodology across organizations. The implementation at GE became both a success story and a learning experience in change management.

"As you can imagine, anytime you try and launch a new process in a company the size of GE, you can be met with resistance. Especially when you're coming out of corporate."

This resistance taught Fritz a crucial lesson about implementing change: "I don't view that as a challenge or a stumbling block, but as a fantastic and wonderful opportunity because when you flip those people, they become your biggest proponents."

His approach centers on listening first, then demonstrating value in the stakeholder's own language. "It's a listening journey. You've gotta understand what the challenges are that of the people with whom you're working, whether it's an external customer or an internal customer."

"Proactively listen and walk in the shoes of the people I'm working with. When I'm trying to introduce something as significant as DVP or other business tools."

This listening approach helps identify the real challenges and resistance points, making it possible to address them effectively.

The foundation: accountability, responsibility, and challenge

But having the right frameworks isn't enough. Fritz learned that execution depends on creating the right team culture. He is quick to credit his teams as the backbone of his successful projects, and one of the ways he supports them is with clear organizational principles.

"I have a few underlying business principles that I've gained along the way that are the foundational threads for me," Fritz explains. "One is, any team I work with or works for me, my job is to make them as successful as possible."

This people-first approach manifests through three guiding principles:

  • Accountability: Holding yourself and your team responsible for deliverables and outcomes
  • Responsibility: Taking ownership of significant business challenges
  • Challenge: Embracing difficult problems that create meaningful business impact

"The way I do that is through three guiding principles, which are accountability, responsibility, and challenge," Fritz notes. "I want to be entrusted with significant responsibility that is helping to solve a significant business challenge."

These principles translate into a simple but powerful operational mantra: deliver on time, complete with excellence.

"I know those all sound like buzzwords, but they're not meant to be. And we don't treat them as such. We treat them as very simple guiding principles to keep us focused."

Putting it all together at Ironman 4x4

When Fritz joined Ironman 4x4 America, he found the perfect opportunity to apply all of these frameworks.

Ironman 4x4 is a global company that sells off-road parts and accessories for 4x4 vehicles (lift kits, suspension parts, bumpers, etc.). They have been around since the 1950s, but were new to the United States, so Fritz had the opportunity to find new ways to market their complex "fitment" products, or parts that must work with specific vehicle makes and models. This complexity creates both technical and marketing challenges that Fritz's team had to solve systematically.

His sales background gave him an invaluable perspective on marketing effectiveness. "If you spend any time in sales, that means you're around customers, whether those are B2B or B2C customers. And you learn what's important to them."

This customer proximity taught him the critical principle of "show me, don't tell me." Rather than relying on feature lists or industry awards, effective marketing demonstrates value through customer experiences and outcomes.

"We always, in both sales and marketing, it's easy to get into the trap of just talking, talking, talking, describing stuff, talking about features and benefits. Talking about the industry's best. Nobody cares about your industry. They care about how your product or service is going to impact them."

The key to marketing complex products, Fritz knew, is understanding how customers think about their problems. Rather than leading with technical specifications, the focus should be on the customer's end goal and the emotional drivers behind their purchase decisions.

Fritz emphasizes the importance of demonstrating value rather than just describing it: "Really, visual storytelling, video storytelling, placing the customer in the scene so they understand your value. That ability comes from firsthand experience of seeing that happen in the sales arena."

A data-driven website replatforming

His POV shaped everything he was involved in at Ironman 4x4 America, from new product introduction processes to website optimization. Fritz implemented structured new product integration toll gates with clear deliverables and cross-functional accountability, ensuring every product launch was executed with precision across creative, digital, and channel marketing.

His customer-centered thinking and frameworks proved essential when his team tackled a complex website migration from an outdated platform to Shopify. The project was based on their understanding that a website change was necessary to better serve their audience and increase ecommerce sales.

Working with The Good on a DXO Program™, the Ironman 4x4 team executed the redesign and replatforming with data-driven methodology. Rather than relying on opinions about what the site should look like, they embraced rapid prototyping and continuous testing.

"Any decision made without data is just an opinion, right?" Fritz notes, referencing CEO Luke Schnacke's philosophy.

"We try to be very data-driven, which is why it was so important for us to work with The Good, to get that data and share it with the team managing the website replatforming so that they were making data-driven decisions on design and functionality."

They didn’t wait for a “perfect website” to figure out what customers wanted. They tested and got feedback throughout the entire process to make sure they were developing the right ideas.

"I realized we were never going to do it perfectly," Fritz recalls. The team was getting bogged down in opinions about checkout processes, product customizers, and overall site design. "We could end up using half our development budget on building something that doesn't perform."

"Ultimately, we agreed to launch and then test the heck out of it. We didn't want to overburden the development pipeline with projects that don't have a financial impact."

This represents a fundamental shift in thinking. They went from trying to build the perfect site to building a testable foundation for continuous improvement.

The beauty of working with The Good in this situation, Fritz explains, was "the rapid prototyping, the test and learn. We could very quickly get feedback and iterate and then test and learn again."

Multiplying results through partnership

Leveraging an external partnership accelerated progress beyond what internal resources could achieve alone and held the team accountable to the frameworks and goals of staying user-centered and data-driven.

"If you're not an expert, I would recommend doing a website project with a company like The Good. It wasn't a cost, it was an investment," Fritz emphasizes. "And I think that Ironman 4x4 is the beneficiary of the investment that they made with The Good as they migrated over to Shopify and learned about what customers would like."

The partnership enabled intentional, studied testing with proper dependencies and measurable results tracking.

"That whole test and learn methodology is done in a very structured, deliberate way. Making changes in a waterfall, with the proper dependencies articulated, and then tracking the measurable benefits of changes, and then tweaking accordingly from there."

This approach breeds confidence because it's entirely data-driven, removing guesswork from critical business decisions.

Lessons for marketing and sales leaders

For marketing and sales leaders looking to build similar operational excellence, Fritz's approach provides a roadmap: start with principles, understand your customers deeply, make decisions based on data, and never underestimate the power of strategic partnerships to unlock potential.

Start with principles, not tactics

Before implementing any marketing or optimization program, establish clear guiding principles. Fritz's framework of accountability, responsibility, and challenge provided a foundation that influenced every decision and created lasting organizational change.

Understand your customer's next best alternative

Move beyond feature-benefit messaging to understand what your customers would do if your solution didn't exist. This "next best alternative" thinking is the foundation of truly differential value propositions.

Convert resistance through understanding

When facing organizational resistance to change, focus on understanding stakeholder concerns rather than pushing solutions. Meet people where they are and demonstrate value in their language.

Embrace data-driven decision making

Resist the temptation to rely on opinions or best practices. Instead, create structured testing methodologies that let customer behavior guide optimization decisions.

Invest in external partnerships strategically

Recognize when external expertise can accelerate progress. The right partnerships provide capabilities and perspectives that internal teams may not possess, ultimately delivering better results faster.

Starting an optimization journey

Fritz's approach to building and scaling teams, including Ironman 4x4's US marketing operations, demonstrates how principled leadership, customer-centric thinking, and strategic partnerships can create sustainable competitive advantages.

"There's no obstacle too big that can't be overcome with data and optimization, right?" Fritz states emphatically. "The whole point of being data-driven and optimizing is to get time back and to become more efficient."

His advice for other leaders facing similar challenges?

"Get to yes. Figure out how to do it. Don't say, this is why I can't do it. Say this is how I'm going to do it. Here are things I need to do in order to do it. Then hold yourself accountable. Make it happen. Do it."

The secret, according to Fritz, lies in celebrating small wins that compound over time: "Little steps, I always like to say, celebrate the little wins. Go after the little wins because they compound on one another and then all of a sudden you're gonna look back and go, holy mackerel, I can't believe I am where I am."

The secret is consistency: "And it starts with data as your foundation and optimization as the accelerator."

For ecommerce leaders looking to build similar operational excellence, Fritz's framework provides a proven template: establish clear principles, understand customer problems deeply, make data-driven decisions, and never underestimate the power of strategic partnerships to accelerate growth.

Ready to optimize your ecommerce experience with data-driven methodology? Learn more about The Good's Digital Experience Optimization Program™ and discover how strategic partnerships can unlock your growth potential.


The Good helps ecommerce brands like Ironman 4x4 optimize their digital experiences through research-backed testing and strategic partnerships. Our team combines deep technical expertise with proven methodologies to deliver measurable results for growing brands.

The post Fritz O’Connor Stays User-Centered and Leads with Data During Uncertain Times appeared first on The Good.

]]>
How to Validate Website Design Changes: A Decision Framework https://thegood.com/insights/website-design-changes/ Thu, 28 Aug 2025 21:23:05 +0000 https://thegood.com/?post_type=insights&p=110805 How do you know if that new homepage design, updated pricing page, or streamlined onboarding flow will actually improve conversions before you build it? The default answer has been A/B testing. But while A/B testing remains the gold standard for high-stakes decisions, it’s not always the right tool for every design change. Many teams have […]

The post How to Validate Website Design Changes: A Decision Framework appeared first on The Good.

]]>
How do you know if that new homepage design, updated pricing page, or streamlined onboarding flow will actually improve conversions before you build it?

The default answer has been A/B testing. But while A/B testing remains the gold standard for high-stakes decisions, it’s not always the right tool for every design change. Many teams have fallen into the trap of either testing everything (creating bottlenecks and slowing innovation) or testing nothing (making changes based purely on intuition).

There’s a better way. By understanding when different validation* methods are most appropriate, SaaS teams can make faster, more confident design decisions while maintaining the rigor needed for their most critical changes.

*Note: We know validation is a bad word in the research community because it implies “proving you’re right,” but we feel it’s easier to read and more quickly comprehensible for those not in research disciplines. We’re using “validation” in this article, but “evaluation” or “confirm or disconfirm” would be more acute in other settings.

The real cost of a bad experimentation strategy

When teams lack a clear strategy for validating decisions, they create what researcher Jared Spool calls “Experience Rot” – the gradual deterioration of user experience quality from moving too slowly or focusing solely on economic outcomes rather than user needs.

The costs manifest in several ways:

  • Opportunity cost: Market opportunities disappear while waiting for test results that may not even be necessary
  • Resource waste: Development time gets tied up in prolonged testing initiatives for low-risk changes
  • Analysis paralysis: Teams debate endlessly about what to test next instead of making decisions
  • Competitive disadvantage: Competitors gain ground while you’re stuck in lengthy validation cycles

The key is matching your experimentation method to the decision you’re making, rather than forcing every design change through the same validation process.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox.

A framework for design validation decisions

The path to better validation starts with two fundamental questions about any proposed design change:

  1. Is this strategically important? Does this change significantly impact key business metrics or user experience?
  2. What’s the potential risk? What happens if this change performs worse than expected?

Using these dimensions, you can map any design change into one of four validation approaches:

A decision making framework for validating decisions regarding website design changes.

High Strategic Importance + Low Risk = Just ship it

If you can’t explain meaningful downsides to a design change but know it’s strategically important, you probably don’t need to validate it at all. These are your quick wins.

Examples for SaaS teams:

  • Adding customer testimonials to your pricing page
  • Improving mobile responsiveness
  • Fixing broken links or outdated screenshots
  • Adding clearer error messages in your product

Why this works: The upside is clear, the downside is minimal, and the time spent testing could be better invested elsewhere.

Low Strategic Importance = Deprioritize

Not every design change needs validation because not every change is worth making. Some modifications simply aren’t worth the time and resources, regardless of the validation method you might use.

Examples of low-impact changes:

  • Minor color adjustments to non-critical elements
  • Changing footer layouts
  • Tweaking secondary page designs that get little traffic
  • Adjusting spacing that doesn’t affect usability

When to reconsider: If data later shows these areas are creating friction, they can move up in priority.

High Strategic Importance + High Risk = Validation territory

This is where both A/B testing and rapid testing methods become valuable. The critical next decision becomes: can you reach statistical significance within an acceptable timeframe, and are you technically capable of running the experiment?

When to use A/B testing vs rapid testing

This decision tree helps determine if your website design changes should be tested or if another approach should be used.

When to use A/B testing for design changes

A/B testing remains your best option for design changes when:

  • You have sufficient traffic on the experience: Generally, you need 1,000+ visitors per week to the page being tested
  • The change is reversible: You can easily switch back if the results are negative
  • You need statistical confidence: Stakes are high enough to justify the time investment
  • Technical capability exists: Your team can implement and track the test properly

Examples of SaaS use cases for A/B testing:

  • Complete homepage redesigns
  • Pricing page layouts and messaging
  • Sign-up flow modifications
  • Core product onboarding changes
  • High-traffic landing page variations

When to use rapid testing for design changes

When A/B testing isn’t right due to traffic constraints, technical limitations, or time pressures, rapid testing provides a faster path to validation.

Rapid testing methods work particularly well for SaaS design validation because they can:

  • Validate concepts before development: Test wireframes and mockups before building
  • Narrow down options: Compare multiple design variations quickly
  • Identify usability issues: Spot problems before they reach real users
  • Provide qualitative insights: Understand the “why” behind user preferences

Examples of SaaS use cases for rapid testing:

  • New feature naming and messaging
  • Dashboard navigation restructuring
  • Enterprise sales page designs (low traffic)
  • Value proposition clarity testing
  • Multi-option comparisons (6-8 variations)

The natural next question might be “which rapid testing method should I use?” Here is another decision tree framework to help answer that.

This framework is a guide to determining which rapid testing method is best suited for your website design changes.

Incorporate your experimentation strategy into your design process

With a decision-making strategy for how and what to test, you’ll need to incorporate the strategy into your design process. The most successful SaaS teams don’t treat validation as an afterthought. They build it into their process from the beginning:

  • During ideation: Use rapid testing to validate concepts and narrow options before detailed design work
  • During design: Test wireframes and mockups to identify issues before development
  • Before launch: Use A/B testing for high-stakes changes, rapid testing for others
  • After launch: Continue testing iterations based on user feedback and performance data

The compounding benefits of a sound experimentation strategy

The goal isn’t to replace A/B testing with rapid methods or vice versa. Both have their place in a mature experimentation strategy. The key is understanding when each approach provides the most value for your specific situation and constraints.

Teams that master this balanced approach to validation see remarkable improvement, including:

  • 50% better A/B test win rates (because rapid testing helps identify winning concepts)
  • Faster time-to-market for design improvements
  • More confident decision-making across the organization
  • Better team morale from seeing results from their work more quickly

Perhaps most importantly, they avoid the extremes of either testing nothing (high risk) or testing everything (slow progress).

For SaaS teams serious about optimization, the question isn’t whether to validate design changes; it’s whether you’re using the right validation method for each decision.

Start by auditing your current design change process. Are you testing changes that should be implemented immediately? Are you implementing changes that should be tested? By aligning your validation approach with the strategic importance and risk level of each change, you can move faster without sacrificing confidence in your decisions.

And if you aren’t sure how to get started, our team can help.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox.

The post How to Validate Website Design Changes: A Decision Framework appeared first on The Good.

]]>
SaaS Website Design: 15 Examples to Inspire Your Redesign https://thegood.com/insights/saas-website-design/ Wed, 14 Aug 2024 00:32:35 +0000 https://thegood.com/?post_type=insights&p=109096 When building the website for your SaaS, the standards are high. As the creator of a tech product, potential users expect an intuitive and polished digital experience on your marketing site. If they get lost or confused, run into friction, or fail to find what they need, they’ll assume your product has the same problems. […]

The post SaaS Website Design: 15 Examples to Inspire Your Redesign appeared first on The Good.

]]>
When building the website for your SaaS, the standards are high.

As the creator of a tech product, potential users expect an intuitive and polished digital experience on your marketing site. If they get lost or confused, run into friction, or fail to find what they need, they’ll assume your product has the same problems.

So, it’s imperative that you build a seamless experience that connects with your customers, answers their questions, and shows them how to take the next step.

Before you embark on a SaaS website design journey of your own, it helps to explore the web for inspiration. We don’t recommend copying any of the best SaaS websites, but we encourage you to study them to get ideas, learn what’s possible, and see what works.

15 Examples of Great SaaS Website Design

Before we look at some SaaS website examples, let’s be clear about one thing.

The SaaS digital journey doesn’t always begin or end with your website. For instance, your users’ journey might start when they read a recommendation on another site and end when they have a conversation with a salesperson.

But for the sake of this article, we’re sharing examples of SaaS websites from the perspective of anonymous users who arrived on the site with the mindset of signing up for a free trial.

1. Petal: Clear and Simple

A screenshot of a page from the Petal website as an example of clear and simple SaaS website design.

Websites in the banking and payments industries are notoriously complex. They usually offer complex products and have to use specific language to comply with regulations. But Petal is a breath of fresh air!

Petal’s site architecture is super simple. There are only a few pages to explore. The details for each credit card are laid out visually in easy-to-understand tables. It’s clear that you’re expected to use the application form to use the service. And the application form itself is simple and unintimidating.

Petal uses great language, as well. They speak directly to people who need to build their credit with phrases like “Welcome to credit, no experience necessary” and “Cards for every type of credit builder.”

2. Gemnote: Unique Aesthetics

A page from the Gemnote website demonstrating the use of unique aesthetics in SaaS website design.

Gemnote uses a clean, intuitive design that walks you right down the path of starting a project. We love how the pages “unfold” as you scroll through them. You always know what to look at next.

The aesthetics are especially unique. The site uses a memorable style that’s still functional. They don’t sacrifice usability for design, but it’s not a style you’ll see anywhere else.

The project creator is also simple. Creating merchandise for your brand only takes a minute. You know what your products will look like because they’re plastered all over the site. The scrolling bar of customers is excellent social proof.

3. Draftbit: Action Imagery

This page from Draftbit is a good example of action imagery in SaaS website design.

Draftbit uses a sleek SaaS website design with lots of open space and tight copy. Phrases like “Create any app, 10x faster,” “simple interface,” and “templates” are designed to reach people who want their own app without the hassle of coding it themselves.

The page smartly opens with a GIF of the tool in action. This is a great way to show non-technical people that they don’t have to write their own code.

The same technique is used on the features page. Each feature includes a GIF that shows how it actually happens in the app.

Their pricing is complex because they offer a variety of ways to build apps, all with different features and team sizes, but everything is laid out nicely, so it’s easy to understand. The feature table is particularly helpful. You can identify the features you need and pick the corresponding plan.

4. Basecamp: Refreshingly Simple

This screenshot from the Basecamp website is a good example of refreshingly simple SaaS website design.

Basecamp is a project management tool that uses a refreshingly simple SaaS website design. It’s simple, bold, and uncluttered. It doesn’t bother with unnecessary design elements that take up space. Instead, it focuses on great copywriting, product imagery, and social proof.

Their pricing page also has a clean design. They offer only two pricing plans: one for freelancers and small teams and another for larger businesses.

The pricing page also has a unique feature that we don’t see often: an explanation of how much Basecamp will save you by replacing other commonly used apps. Brilliant!

Finally, we love the content on the features page. Instead of using abstract images for each feature, they give a screenshot from the app. This is a great way to help users decide if the feature will meet their needs.

5. Mailchimp: Pricing Calculator

The Mailchimp pricing calculator is an example of excellent SaaS website design.

Mailchimp is one of the most popular email marketing platforms, so it’s no surprise they have one of the best SaaS websites.

In terms of design, the site is amazing. The imagery and clean typography are simple but elegant. The top of the page smartly offers the platform’s main tools with good product verb language. If you came for a specific tool, you know you’re in the right place right away.

The copywriting is excellent as well. “Turn emails into revenue,” “up to 25X ROI,” and “$1.7K per campaign” are evidence that they know exactly what their users want: to generate money from their email marketing program.

We also love their pricing calculator. You can input the size of your email list, and the calculator will tell you how much Mailchimp will cost. This is a great way to be clear about your pricing structure. More pricing details (including the specific features you get access to) can be found on the pricing page.

6. Webflow: Focused on Their Audience

Webflow is a great example of SaaS website design focused on the brand audience.

As a website design product, the bar is pretty high for a site like Webflow. This sleek, interactive site with bold typography knows exactly who it’s talking to: no-code designers who want to build sites visually.

Throughout the site, you’ll see plenty of images, GIFs, videos, and interactive elements that show how the app builds websites. Users know what they’re getting. Every section pushes you in a clear direction: start a project.

The nav bar is one of our favorite elements. It’s a robust but intuitive map of the entire site. There’s a lot of information here, but it’s presented in a way that’s not overwhelming.

The pricing page is another superb element. It’s simple and clear, and all of the key features are laid out nicely. The frequently asked questions are a nice touch as well. This is a great way to overcome objections and convince people to buy.

7. ClickUp: Quick Product Exploration

A screenshot from the product tour section of the ClickUp website as an example of great SaaS website design.

ClickUp’s site combines bold and vibrant colors with an open layout. It feels friendlier than other project management apps, but it clearly has all the right features to make work easy.

We particularly like the tab-based product tour on the homepage hero row. You can explore the product quickly by selecting the corresponding icon. This is a great way to pack a lot of information in a small space.

The row of customer testimonials is genius. By using large, high-quality images of real people, the site helps visitors make a real human connection with the product. The vertical layout makes it seem like we’re chatting with a friend on our phone.

Pricing is clearly laid out on the pricing page, and the table format is easy to understand quickly. We like how they pepper the page with social proof phrasing like “Join over 10 million users” and “25,000+ reviews.” The cost savings row is super smart as well!

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox every week.

8. Homerun: Strong Directional Guidance

This screenshot from the Homerun website is a good example of directional guidance in SaaS website design.

This is a great example of a well-designed SaaS website design for sites with simple product offerings.

Homerun uses a simple and easily scannable website to drive home the point that hiring can be simple. They don’t clutter their site with unnecessary pages or unnecessary design elements.

Everything on the site drives you toward starting a free trial. The sign-up button is always available, stuck to the top. It’s also at the bottom of every page.

We like that the navigation menu offers feature-specific pages as well as pages for different use cases. This helps users understand how the product fits their needs.

The pricing page is about as simple as you can get. We like how features that don’t come with the plan are grayed out as if to say, “This is what you’re missing.” The FAQs at the bottom are great tools to overcome objections.

9. Lattice: Superb Copywriting

The Lattice SaaS website design is an example of superb copywriting.

Lattice uses great copy and direct language throughout its site. Their sections start with a simple and clear benefit for HR professionals, then follow up with corresponding key features and a relevant piece of data or social proof. This is a great 1-2-3 copywriting punch!

The navigation menu has a lot of information, but it’s laid out well, so it’s easy to understand. Using unique landing pages for different industries and company sizes is a great idea.

The pricing page is unique. Not only does it lay out the pricing scheme well, but you can also click different elements to tally the actual cost to your organization.

Finally, we like how all of the calls to action push visitors to request a demo. Since Lattice serves larger organizations, they know the buying cycle is longer than most SaaS businesses deal with, so a signup button wouldn’t be appropriate.

10. Kajabi: Personal Touch

Kajabi adds a personal touch to its SaaS website design.

Kajabi is a bold and powerful website that offers a variety of tools for creators. There are a lot of products offered here, but Kajabi uses smart organization to keep it ordered.

Kajabi obviously knows who they’re talking to. The copy and high-quality images are laser-focused on new creators who are just starting to build their brands.

The scrolling images of creators who use the platform are a great way to make a human connection with their audience of creators. Notice how each panel offers some compelling evidence of success, like “1 million followers” or “built an eight-figure business.”

You would think all of these products would make pricing a nightmare, but Kajabi organizes everything into four product tiers. They boost conversions by showing customer testimonials from real people and some FAQs.

11. Welcome: Transparent Pricing

Welcome includes transparent pricing information in their SaaS website design.

Welcome is an award-winning virtual event platform. It’s an elegant site that uses powerful imagery to put the product right in front of your face.

We love that the site branches into three categories: create, engage, and repurpose. These are powerful verbs in the creator space. It allows users to explore the features that are most important to them.

Welcome is a premium product, so its pricing isn’t publicly available. You have to schedule a demo and speak with someone on their sales team. Nevertheless, they give you a starting figure of $625/month, so no one’s time is wasted if the visitor can’t afford a high price. This is a great example of being as transparent as possible, even when you can’t give an exact figure.

Like many of the best SaaS websites on this list, there’s plenty of social proof in the form of customer logos and testimonials.

12. Butter: Simple and Bold

This screenshot of the Butter website is a good example of simple and bold SaaS website design.

Butter is a remarkably simple SaaS website that uses bold elements and bright colors to make its app seem friendly and fun.

The content of this site is simply remarkable. The masonry-style boxes lay out the features in an organized way. The Bold imagery gives you a good look at the product. And the FAQs on the home page help you overcome objections.

The navigation bar is particularly good for several reasons:

  • All product features are broken out so you can explore what matters to you.
  • Use cases help you decide if the product can meet your needs.
  • Comparison pages help you make an informed purchasing decision.

The site also uses great directional guidance. Everything leads you to signing up for a free trial.

13. Spline: Community Focused

Spline is a good example of how to make your SaaS website design community focused.

Spline is a 3D design and animation tool that knows its audience well. The entire site, from the copy to the imagery, is geared toward designers. The product videos and playful illustrations are powerful examples of what the app can do.

In fact, clicking many of the links takes you directly into the app, so you can try it yourself. That’s a brilliant way to make potential customers feel the app’s value. At this point, exploring other apps feels like going backward!

We like that they also promote the community aspect. Designers love to connect, share ideas, and even pass each other templates. If users feel like they are part of a community, they are less likely to leave the app for a new one.

14. Linktree: Strong Social Proof

Linktree includes social proof in its SaaS website design.

Linktree is a simple app, so it deserves a simple website with generous white space. The bold colors and striking visual elements are exactly what social media users are looking for.

This well-designed website also offers great directional guidance. The calls to action are always visible (including one in the sticky header) and drive users to the signup page.

Social proof is used well on Linktree’s site. Phrases like “Join 50M+ people using Linktree” and the slideshow of celebrities who use the app are powerful motivators for users.

15. BILL: Smart Organization

The Bill website is a good example of the use of smart organization in SaaS website design.

BILL is a complex site with countless features, so keeping all of the content organized is a challenge. They manage this by dividing the site into two categories: 1) AR and PR and 2) Spend & Expense. This is a clever solution that marries marketing and product design, as otherwise, the site would be overwhelming.

The “Solutions” drop-down in the navigation bar is also well-optimized. A user can view pages by company size and industry to learn if the product fits their needs.

BILL’s white color scheme and simple design aren’t unique, but that’s actually a benefit for a business like this. We don’t need a financial app to be flashy, but it must be intuitive and reliable. What it lacks in aesthetic appeal, it makes up for in functionality.

For all the site’s complexity, the pricing is refreshingly simple. There are three simple out-of-the-box plans and a custom enterprise option.

The Fundamentals of SaaS Website Design

Creating a well-designed SaaS website requires a strategic approach. It’s important to focus on several key fundamentals that enhance user engagement and customer satisfaction. These fundamentals will help you create a SaaS website that not only attracts and engages users but also converts them into customers.

1. Start by Understanding Your User

Begin by identifying your target audience’s needs, behaviors, and pain points. These are key to good product design. This understanding will guide the design and content strategy, so your website serves your users well.

2. Keep Your Content Compelling

Engaging content is crucial for capturing and retaining user interest. Use clear, concise, and persuasive language that speaks directly to your audience’s needs and highlights the benefits of your SaaS product. Use imagery and videos that help visitors learn about the product.

3. Use Directional Guidance to Help Users Find What They Need

Directional guidance is an umbrella term that encompasses anything put on a user’s path to help them find what they want. It includes intuitive navigation menus, clear call-to-action buttons, and strategic use of ample whitespace. The goal is to help users find the necessary information and tools.

4. Deliver a Seamless Customer Experience

Ensure an enjoyable and smooth user experience by optimizing the website’s performance, responsiveness, and usability across all devices. Fix anything that’s broken or introduces friction into their experience. Consider every step of the user journey, from initial visit to conversion and beyond.

5. Design with Your Product Verbs in Mind

Focus on action-oriented language that emphasizes the core functionalities of your product. Use verbs that convey the actions users can take, such as “create,” “manage,” “track,” and “analyze,” to make the benefits of your product clear.

6. Be Clear About Pricing and Plans

Transparency in pricing and subscription plans builds trust and aids in the decision-making process. Clearly present all available options, including features and costs, to help users choose the plan that best suits their needs.

7. Test and Validate With Your Audience

Regularly test your website with real users to gather feedback and identify areas for improvement. Use A/B testing, user surveys, and analytics to validate your design choices, ensure they meet user expectations, and produce a user-friendly design. You may need the help of a design agency to manage this.

8. Keep Iterating on Your SaaS Website Design

A SaaS website should evolve based on user feedback, technological advancements, and changing market trends. Continuously update and refine your design to enhance user experience and stay ahead of your competitors.

9. Ensure Mobile Optimization

With an increasing number of users accessing websites via mobile devices, it’s crucial to ensure your SaaS website is fully optimized for mobile. This includes responsive design, fast loading times, and intuitive navigation on smaller screens for a smooth experience across devices.

10. Focus on Accessibility

Design your website to be accessible to all users, including those with disabilities. Implement features like alt text for images, keyboard navigation, and color contrast to make your site inclusive and compliant with accessibility standards.

11. Leverage Social Proof

Incorporate customer testimonials, case studies, and reviews to build credibility and trust. Social proof can significantly influence potential customers’ decisions by showcasing real-world success stories and positive feedback from existing users.

Looking for a SaaS Website Design Firm?

Designing a SaaS website is more than just making it look pretty. Visual appeal is important, but it’s important to remember that websites are made to be used.

SaaS website design is about creating a user experience that clicks with your target audience. That’s why every wireframe and design should be validated with real feedback and tests from your ideal audience before you start building.

At The Good, we specialize in making sure your SaaS website is aligned with your users and provides an engaging experience. We do this through rapid testing—a powerful tool for SaaS companies looking to improve their website design or navigate a redesign.

Rapid testing involves quick, iterative cycles where we test different design elements with real users. This gives us invaluable insights into what works and what doesn’t so we can make data-driven decisions backed by user feedback. For SaaS companies, this means faster improvements, less guesswork, and a website that resonates with their audience.

Ready to take your SaaS website to the next level? Let The Good help you create a user-friendly, conversion-boosting design that stands out.

Contact us to get started on transforming your website into a powerful tool for growth.

Hundreds of millions in revenue generated with our strategic optimization programs.

But don’t take our word for it. Hear about the amazing results from 15+ years in business, straight from the source.

SEE HOW
Opting In To Optimization

The post SaaS Website Design: 15 Examples to Inspire Your Redesign appeared first on The Good.

]]>
What Is Prototyping And Why Is Mid Fidelity Its Unsung Hero In Rapid Testing? https://thegood.com/insights/what-is-prototyping/ Thu, 11 Jan 2024 16:09:07 +0000 https://thegood.com/?post_type=insights&p=106687 So, you want to improve your website. You’re in the right place. Let’s talk about how the right level of design detail in user tests can save you time, money, and deliver a better user experience. What is prototyping? Prototyping is an essential part of the UX design process and can unlock your team’s ability […]

The post What Is Prototyping And Why Is Mid Fidelity Its Unsung Hero In Rapid Testing? appeared first on The Good.

]]>
So, you want to improve your website. You’re in the right place.

Let’s talk about how the right level of design detail in user tests can save you time, money, and deliver a better user experience.

What is prototyping?

Prototyping is an essential part of the UX design process and can unlock your team’s ability to validate ideas before you send them to development.

In literal terms, a prototype is a first or early model of a proposed design passed to the development team before being coded onto the website. For ecommerce and product marketing teams, prototypes are early samples of a product intentionally designed for testing.

They can range from simple pen and paper sketches to highly interactive mockups in tools such as Figma. With prototypes, you can get user feedback on pages or app elements, which can be used to iterate your way to a better digital experience for your users.

To illustrate the idea, you may use a prototype when redesigning your website’s landing page. You may sketch ideas out in a wireframe and get either internal or external feedback before layering on your brand design and sending it to development for implementation.

What is fidelity?

That brings me to the next point–prototypes can range in their level of detail, identified by their fidelity. You’ve probably heard of low fidelity (simple, typically sketched designs) and high fidelity (more complex, close to the actual design of your digital experience). But there is magic in the often skipped-over mid-fidelity prototypes.

Mid-fidelity mockups or prototypes can improve efficiency, increase testing velocity, and focus your users on what matters.

There is, of course, a time and a place for all three fidelity types, which we will cover. But, considering rapid testing as an undervalued way to improve your website I’ll focus on the benefits you might be missing if you’re overlooking mid-fidelity designs. And even more specifically their use case for rapid testing.

When should I use low versus mid versus high fidelity?

  • Low Fidelity: This level involves basic, hand-drawn sketches or paper prototypes. Colors are grayscale and placeholder images and text are often used. It’s ideal for brainstorming, generating ideas, and exploring concepts internally.
  • Mid Fidelity: Also known as medium fidelity, this level is the Goldilocks between low and high fidelity. It may or may not include clickable elements relevant to the test’s goals without distracting testers with superfluous content. Mid fidelity is the best choice for rapid testing. This is the best method for focusing on the problem–not border widths or hex codes.
  • High Fidelity: The most detailed level, high-fidelity mockups closely resemble the final product, with intricate interactions, pixel-perfect designs, brand colors, fonts, and every element clickable. It is used when testing an entire website or app and passing designs to the development team for implementation.
different levels of prototyping

Let’s take a look at the details and pros and cons of each prototype fidelity.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox every week.

Pros and cons of low fidelity

Low fidelity is reserved for brainstorming, idea generation, and internal exploration. It is not suitable for rapid testing due to its lack of detail.

Pros:

  • Cost Effective: Low fidelity is a cost-effective option, making it suitable for early ideation and concept generation.
  • Rapid Ideation: Hand-drawn sketches and basic prototypes allow for quick idea generation and exploration.
  • Internal Collaboration: Ideal for internal use, low fidelity facilitates collaboration and idea sharing among team members.

Cons:

  • Lack of Detail: Low fidelity lacks the detail for accurate user testing. It may not provide a realistic representation of the final product.
  • Limited External Use: Not suitable for external presentations or client interactions due to its basic and rough nature.
low fidelity prototype

Pros and cons of mid fidelity

As I mentioned, mid fidelity is the often-overlooked prototyping model. Particularly suitable for rapid testing, it’s the happy medium between designing a mockup for external use without over-resourcing before validation.

Pros:

  • Time Efficiency: Mid-fidelity designs save time, making them ideal for rapid testing scenarios with tight timelines.
  • Focused Testing: By prioritizing core functionalities, mid fidelity ensures that users focus on what’s important, leading to more meaningful insights and qualitative data.
  • Balanced Detailing: Mid fidelity strikes a balance between low and high fidelity, providing enough detail for testing without unnecessary intricacies.

Cons:

  • Not Pixel Perfect: Unlike high-fidelity designs, mid fidelity lacks pixel-perfect detailing. This may be a drawback when detailed, final designs are necessary.
  • Limited Use Cases: Mid fidelity is most effective in scenarios like rapid testing. There may be better choices for situations requiring highly detailed or finalized designs, such as A/B testing.
mid-fidelity prototype

Pros and cons of high fidelity

High-fidelity prototypes are used when passing designs to the development team for implementation, especially for complex scenarios with multiple states. High fidelity prototypes can distract users from their tasks and requires extensive time and budget that you shouldn’t waste before validation.

Pros:

  • Realistic Representation: High fidelity provides a detailed and realistic representation of the final product, aiding in client presentations and developer handovers.
  • Accurate User Testing: Ideal for complex scenarios with multiple states, high fidelity ensures proper user testing with intricate interactions.
  • Developer-Friendly: The closer the design is to the final product, the easier it is for developers to implement the final product, reducing potential misinterpretations.

Cons:

  • Time Consuming: Creating high-fidelity prototypes is time-consuming, which may not align with the rapid pace of specific testing scenarios.
  • Resource Intensive: Requires more design expertise, time, and resources, potentially delaying the testing process.
  • Highly Detailed: The added detail and functionality of high-fidelity prototypes can create unnecessary distractions for user testers, causing possible derailment from the goal of the test.
high fidelity prototype

Why less is more when prototyping for rapid testing

The fidelity level of your mockups can make or break your rapid test results–bleeding time and financial resources while also hindering valuable user insights. Imagine you want to test if changing the category page name improves user understanding and boosts conversions. Crafting a high-fidelity, fully interactive prototype might seem impressive, but it can backfire. The intricate details distract users, drawing them outside the test’s scope and obscuring relevant feedback. This can put users into cognitive overload.

That’s where the mid-fidelity mockup steps in.

It shows just enough detail and the relevant design elements (like the navigation bar and category name) with enough clarity to incite meaningful feedback.

Mid-fidelity also focuses feedback. With no functional interactions, users stay within the test boundary, providing insights directly related to your research question.

Here’s an analogy: You wouldn’t build a full kitchen to test a new icing recipe. You’d bake a simple cake base to focus on the icing’s impact on taste and texture. Similarly, a mid-fidelity mockup acts as your cake base, allowing you to hone in on the specific design element you’re testing.

In our 15+ years of experience in digital experience optimization, mid fidelity emerges as a strategic choice for rapid testing. Offering a happy medium between speed, detail, and focus, mid-fidelity mockups give users the right amount of information to provide insightful feedback without distracting or over-resourcing.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox every week.

The post What Is Prototyping And Why Is Mid Fidelity Its Unsung Hero In Rapid Testing? appeared first on The Good.

]]>
The Fundamentals of Visual Design and Why You Need It https://thegood.com/insights/visual-design/ Fri, 03 Feb 2023 17:32:57 +0000 https://thegood.com/?post_type=insights&p=102679 Humans are visual creatures. We taught ourselves to read and write, but we evolved to process the imagery of the world. Nearly 50% of our brain is involved in visual processing – We can process images in just 13 milliseconds, which is 60,000 times faster than text. This innate skill not only applies to our physical surroundings, […]

The post The Fundamentals of Visual Design and Why You Need It appeared first on The Good.

]]>
Humans are visual creatures. We taught ourselves to read and write, but we evolved to process the imagery of the world.

Nearly 50% of our brain is involved in visual processing – We can process images in just 13 milliseconds, which is 60,000 times faster than text.

This innate skill not only applies to our physical surroundings, but the digital products and websites we use. Raw text and plain links are boring and unengaging, even if they function well.

What’s more, we can use colors, shapes, and lines to provide visual cues that communicate specific functionality, which creates affordances that support a better and more efficient user experience.

Ultimately, we can use visual design and aesthetics to improve functionality.

In this article, we explain the fundamentals of visual design and why your site needs it, providing examples to help you incorporate these principles into your own user experience.

Our goal is to show you how to think about design strategically and objectively to improve your site’s user experience.

What is Visual Design?

Visual design is a combination of both graphic design and user experience (UX) design that uses aspects of the site, such as brand identity, internal consistency, and visually communicated goals, to provide a unified, cohesive experience to its users.

Basically, visual design is the use of aesthetics to support a system’s usability. That system could be a physical product, an app, or your ecommerce site.

A strong visual design doesn’t take away from the site’s content, usability, or conversion potential. Instead, it enhances these functions by creating an engaging and trustworthy experience for users.

Let’s look at a super basic example: The checkout button is just a link, but we always see it styled like a button. It’s typically displayed visually, rather than with just text. Which of these two links supports the user experience better?

image of checkout buttons

Option B is clearly more effective.

The colored background and space it occupies on the page make it stand out as a button. The lock icon assures users that clicking it is safe. The slight shadow and conventional design as a button communicate its functionality clearly, appealing to users’ affordances.

Our innate ability to quickly process these visual cues provides a more efficient user experience and minimizes the effort required to interact with a site, improving the overall experience and bringing users one step closer to conversion.

The Aesthetic-Usability Effect

There’s a misconception that visual design has a minor effect on the overall user experience, but it actually plays an important role in positively impacting user perception and the overall experience. We can observe this impact through the aesthetic-usability effect.

The aesthetic-usability effect refers to our tendency to perceive attractive products as more usable. If something looks better, we tend to think it will work better, even if it isn’t as effective or efficient. Essentially, a positive emotional response to visual stimuli makes us tolerate small usability issues.

The aesthetic-usability effect was first studied in 1995 when researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested dozens of variations of an ATM user interface. They asked the study participants to rate each UI design on two criteria: 1) ease of use and 2) aesthetic appeal.

The researchers found a strong correlation between the participants’ ratings of aesthetic appeal with perceived ease of use. The correlation between their ratings of aesthetic appeal with actual ease of use was much lower. Therefore, not only are users influenced by aesthetics to the point of overlooking usability challenges, they do so even when they are intentionally trying to evaluate the functionality of the system.

Naturally, there are limits to this effect. A pleasing design can make users overlook minor usability issues, but not substantial ones.

For instance, if your customers can’t find the products they need on your ecommerce site, no pretty layout or trendy color scheme will save the sale. But if you find the balance, you can make users perceive more usability than there actually is.

graph showing how visual design affects perceived usability

Source: https://uxdesign.cc/the-importance-of-clarity-in-ux-91052e0ad4e4 

Ultimately, form and function need to work together. When interfaces and digital experiences struggle with usability issues, or when aesthetics are completely neglected for the sake of usability, the users tend to have a poor experience. The solution, therefore, is balance.

The 5 Principles of Visual Design

There are five basic principles of visual design. When used properly, they create a pleasing experience that keeps users engaged and helps them navigate the site to find what they need.

Visual designers apply these principles whenever they combine lines, shapes, colors, textures, typography, and layout.

infographics showing the 5 principles of visual design

1. Scale

Designers use scale to establish the visual hierarchy of content on a page.

Scale uses the relative size of elements (such as text, icons, or CTAs) to indicate the importance and rank of the element in relation to other components on the site.

Proper use of scale can demonstrate how items relate to one another and create clear visual boundaries that help guide the user efficiently through the content on the site.

Notice how Allbirds makes their hero row full width and taller than subsequent rows. It draws the eye and directs you toward those options.

Allbirds visual design showing the hero image has a bigger scale compared to the subsequent images

2. Visual Hierarchy

Visual hierarchy controls the delivery of the experience by guiding the users’ eyes sequentially down a page using elements on the site such as color, size, spacing, and organization of content.

Unclear page hierarchies with elements competing for visual attention can create clutter that makes a site feel overwhelming and difficult to navigate.  

Ritual does a great job utilizing white space, layout, and scale to signify the most important content on its homepage.

The large text, both in the hero area and further down the page, directs the user’s attention, while the organization of the content follows the conventional left-to-right, down-the-page layout, typical of western reading patterns.

example of visual hierarchy in visual design where the text in the webpage gets smaller the more you scroll down

3. Balance

Achieving visual balance on a page requires the visual weight of elements on a site, such as imagery or text, to be equally distributed across an imaginary y-axis down the center of the page.

Balance can be symmetrical or asymmetrical. A page is considered symmetrical when there is the same or a similar amount of content on both sides of the axis, while an asymmetrical page contains the same amount of visual weight on both sides of the axis but with different elements, sometimes in different locations.

This Verve product details page is a great example of symmetrical balance. The product image in the center is winged by elements on the right and left. If you scroll a bit, the right-side add-to-cart widget scrolls with you, so there’s always even weight on that side.

Verve product detail page showing the visual design using balance by applying the same amount of elements on both sides of the page

Github showcases asymmetrical balance on its site using heavy imagery on both corners of the page and bolder text to the right to maintain consistent visual weight on both sides of the imaginary y-axis of the page.

Github page showing asymmetrical balance in visual design

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox every week.

4. Contrast

Designers use the principle of contrast to help users differentiate between elements on the page.

A greater visual contrast typically signifies a greater difference between site elements, whereas similar items are given similar characteristics or functionality. Items can contrast based on size, direction, color, and other characteristics.

Notice the contrast on this MVMT page. The green add-to-cart button is impossible to miss. It’s more important than other elements.

contrast used as part of the design of the MVTMT page to call attention to the green CTA button

5. Gestalt

Gestalt principles acknowledge our tendency to group similar elements together.

Our brains love patterns, so when we see similar items together, we perceive them as a whole unit, rather than individual elements.

These principles include similarity, continuation, closure, proximity, common region, figure-ground relationships, and symmetry & order.

For a basic example, check out the NBC logo. On their own, the colorful map pin-shaped icons don’t mean much. But when they are arranged just so, along with some clever whitespace, we see the NBC peacock.

image of the NBC logo

This KOS category page uses the common region Gestalt principle by enclosing each product within a container, helping you understand what’s related. Instead of seeing a title, a price, an image, and a button, you see a product listing.

image of KOS category page showing gestalt used in the visual design by showing the products in a container

The Role of Visual Design in User Experience

Visual design is a powerful tool you can use to support the user experience. Visual designers don’t just create eye candy.

They use their designs to make websites and interfaces simpler, more intuitive, and more accessible. Once usability is assured, they use design to impress your shoppers with your brand’s presence and style.

Any page of your site or screen of a digital product can be broken down into fundamental elements: type, lines, shapes, colors, textures, volume, and negative space.

Visual designers use these elements to direct us to important information, express functionality, and help us move forward toward a conversion.

To use design to support usability, you can follow the structure of the UX Design Pyramid. The pyramid is similar to Maslow’s Hierarchy of Needs in that each level serves as a foundation for the levels above it.

image of a user experience pyramid

Source: https://syndicode.com/blog/the-ux-design-pyramid-with-the-user-needs/

  1. Functional – The design meets all of the requirements to work the site. The most important tasks are in high-value places. The clicks required to achieve the site’s purpose are as minimal as possible. The site has a low learning curve.
  2. Reliable – The site’s information is available, accurate, and consistent. It works properly on all browsers and devices. It works the same way every time.
  3. Usability – Users can easily find what they need. No one gets lost or confused. They can move toward their goals without much struggle or thought.
  4. Convenient – Users want to use the site because it’s easy. There are no barriers that make using your site difficult. Content appears exactly where it’s needed.
  5. Enjoyable – Users invest themselves in the site and want to share it with their friends. There are delightful features, such as high-resolution imagery, microcopy, error guidance, animations, tactic transitions, and more.
  6. Significant – The site becomes a tool users love. Pain points and obstacles have been reduced almost entirely. The site is personalized to their needs.

The bottom of the pyramid contains the fundamental requirements of a successful design. These elements must come first. After all, when a user visits your site, it’s paramount that they can complete a task.

Completing the task should be simple, predictable, and intuitive. Your users shouldn’t be forced to carry a large cognitive load just to shop at your store.

Aesthetic elements start to step in around step three.

Those design principles we explained can be used to make information easy to find. A well-designed menu and clear calls to action prevent people from getting lost.

As you get to the top of the pyramid, you’ll be working with aesthetics entirely to strengthen your brand presence, but at this point, the site should work.  

What would happen if you skipped the usability steps and focused on aesthetics? A terrible user experience, most likely. Your site would look pretty, but fail to convert.

5 Best-In-Class Examples of Visual Design

Now that we’ve discussed visual design thoroughly, let’s look at some best-in-class examples. Use these to inspire your design work.

1. Kettle & Fire

This Kettle & Fire product page uses design to assist usability. Notice how the designer uses lines (containers), colors, and icons to indicate the options that are currently selected.

You can tell, at a glance, that clicking the add-to-cart button means ordering one 6-pack. The subscription option and other quantity options are clearly inactive. Furthermore, we can tell by their form, arrangement, and spacing that we can interact with them.

Kettle and Fire product page using various elements of visual design to make user experience much easier

2. ModCloth

This is a fairly conventional product page, but let’s talk about why it’s great.

First, there’s a good use of scale. The image and call-to-action button are the most important, so they are the largest and most colorful. Less important elements (such as the “Earn loyalty points” copy) are gray, small, and out of the way.

Furthermore, the page is balanced and easy to look at. Your eyes are drawn to the main image first. The weight is about equal on both sides.

Modcloth product page making use of scale and contrast in their visual design by placing large and small images along with colorful CTA buttons

3. Shopify

Shopify had a unique challenge when creating its checkout page. It has to work with all of the brands they serve.

Their approach was to keep things minimal. They use balance to feature the checkout form from the shopping cart.

Everything is fairly nondescript except the “express checkout” buttons and the “continue shopping” button that use contrast to stand out on the page.

Shopify checkout page making use of the balance principle by keeping the design minimal

4. Bellroy

Informational pages are usually quite boring. Most ecommerce sites neglect to give them much thought. But Bellory was intentional with their design choices.

While the page is still somewhat boring, it functions well for its intended purpose.

The scale directs users efficiently to what they need on the page.

“Need help” is the first thing users see, letting them know where they are on the site. Next, a user’s eye is drawn to “shipping delivery” which lets them know what topic they are on.

Lastly, the headers for each section on the page are visible and scannable, helping a user quickly get the answers they are looking for.

Bellroy information page making use of scale and visual hierarchy in the visual design by using big and small fonts

5. Optic Nerve

Optic Nerve knows its customers are buying for aesthetics, not just function. They care about the look and style of their sunglasses.

So instead of simply listing the color options or offering a drop-down selector, Optic Nerve uses thumbnails of the color options as selectors. This encourages exploration.

The brand also includes value-proposition icons below the thumbnails. This quickly tells users about the products’ many benefits in an easily scannable and visual manner.

Optic nerve product page showing thumbnails of different colored versions of the same product

Using Visual Design to Build a Better User Experience & Boost Conversions

Ultimately, when visual design is properly incorporated into a site, it can have a profound effect on the user experience.

But before you change the visual design of your ecommerce site, it’s important to think strategically and remember the pyramid we mentioned before.

The functional aspects of the site should be fully flushed out before visual aspects can be considered.

Once that is achieved, aesthetics can support usability and create a strong brand presence, which leads to higher conversions.

If you’re interested in having an expert take a look at the usability and design of your site, explore our Wireframe Audit.

Enjoying this article?

Subscribe to our newsletter, Good Question, to get insights like this sent straight to your inbox every week.

The post The Fundamentals of Visual Design and Why You Need It appeared first on The Good.

]]>
Website Credibility: The Best Rules and Tips for Building Trust https://thegood.com/insights/website-credibility/ Sun, 14 Jun 2020 17:28:00 +0000 https://thegood.com/?post_type=insights&p=81159 You’ve seen this phrase quoted online and offline. You’re heard it in sales department meetings, and you may have even said it yourself: People buy from those they know, like, and trust. It’s one of those sayings that seems plausible… but it’s not true. At least not entirely. Here’s the truth: People buy from those […]

The post Website Credibility: The Best Rules and Tips for Building Trust appeared first on The Good.

]]>
You’ve seen this phrase quoted online and offline. You’re heard it in sales department meetings, and you may have even said it yourself: People buy from those they know, like, and trust.

It’s one of those sayings that seems plausible… but it’s not true. At least not entirely.

Here’s the truth: People buy from those they trust.

If visitors don’t trust you, they’re much less likely to buy from you – no matter how attractive your prices or your promises are.

Does your ecommerce or lead-generation website stand up to a credibility test? Are you leveraging the primary tactics that build credibility?

In this Insight we’re focusing on how to effectively build credibility and trust on your website using a variety of proven tactics. Here’s what we’ll cover: 

  1. The first test of website credibility: website design & performance
  2. The second test of website credibility: company transparency & authenticity
  3. The third test of website credibility: social proof & security

The First Test of Website Credibility – Design & Performance

First-time visitors to your website quickly decide whether or not to stay. Initially, that decision will depend on how well your site functions and individual expectations.

If the site takes more than a few seconds to load, many will leave without ever seeing your content. If some of your visitors are looking for hiking trails and you sell hiking boots, they may not stay because of irrelevant search findings.

Once the technical and relevancy tests are passed, though, shoppers will judge your site on its ease of operation (can they find what they’re looking for) and the perceived level of trust your website imparts.

Your sales will be directly related to the credibility of your site, your products, and your offers.

Specifically, shoppers need to be confident about these three things before they buy:

  • Confidence their transaction will be secure
  • Belief that your products are accurately described
  • Convinced you will deliver on your promises regarding shipping and guarantees

Your ability to establish that credibility will depend on how your business is presented online. Even visitors who arrive pre-sold by referral will hesitate if your site doesn’t look trustworthy.

Part of their perception is about usability – we tend to trust those who obviously know what they’re doing – and part of that is psychological and subliminal.

The first thing prospects will establish is that they’re on the right website and that it’s a helpful website – not a threatening website.

Website Credibility Tip #1: Know your best customers and cater to them. Build the user experience and content strategy that speaks trust to your particular audience. Your first job is to establish that you are exactly the kind of store your prime prospects seek.

Here are some of the factors contributing to place credibility:

  • Make the overall feel of your site appeal to your primary customer base. We’ve seen companies hire designers who have great ideas, but poor knowledge of the audience. The results are invariably disastrous. You’ll see few cowboys buying their jeans at Bergdorf Goodman. And you’ll see few socialites purchasing a dress at Wilco Farm Store. Trust and credibility are the unspoken factors for both – even where the product is the same brand and design.
  • Post the name of your business and your contact information clearly and make it easy to locate. Prospects want to know you are real. And real companies have physical addresses and phone numbers, not just email addresses.
  • Use the same language and terminology on your site your primary audience uses to describe your products and services. Use industry-speak only where your customer would do the same. Shoppers trust language they understand. They don’t want to have to consult a dictionary to understand your descriptions or offers.
  • Proofread your copy for grammar and spelling. If you can’t be trusted to spell a common word correctly, how can shoppers trust you to get the order right? We’ve even seen educational sites with misspelled words. That’s a prime example of a confidence sinkhole. The more capable you are of getting the simple things right, the more your visitors will believe you can get the bigger things right.
  • Highlight your return, refund, and satisfaction guarantees. Shoppers want to know they can trust you, and indicating your willingness to stand behind your products absolutely is an excellent way to build that trust.

The Second Test of Website Credibility – Company Transparency & Authenticity

Website Credibility Tip #2: “Know” and “Like” are important to ecommerce, but they are never standalone qualities; they’re always tied to trust.

Your job is not to brag and it’s not to woo. Those who liken sales to dating tend to forget that one wrong move can lead to a sound slap in the face instead of a goodnight kiss.

Visitors work from the top down: your site, your business, your people. Every touchpoint should help build the confidence and trust.

Here are examples of how to do that:

  • Make your ‘About’ page unique. Get personal. Know your audience and relate to them in a way that builds confidence. Ecommerce businesses sometimes think the About page is just a required placeholder. It is not. Tell your brand story. Build affinity. Let your visitors know you care about establishing clear communication. About pages are like sitting down for a cup of coffee or tea together. They can build the bond between you and the prospect, or they can hurt credibility.
  • Be real, not ridiculous. Beware of copywriters who love stacking on vague descriptors. Shoppers confronted with claims like “The very best quality money can buy!” quickly lose all hope you’ll be upfront and honest with them. Your new line of fishing rods may have been tested and proven “100 times stronger than carbon fiber,” but you’ll lose credibility by claiming the rods are “unbreakable.”
  • Be helpful, not pushy. You don’t like to feel pressured to buy, and your visitors don’t like it either. There may be a fine line helping shoppers advance down the sales journey and prodding them along with a stick, but most visitors will feel the difference, even if they can’t express exactly what it is. Every time a pop-up ad makes it plain to the visitor your concern is more about getting a quick sale than providing value to your customers, you lose credibility.
  • Show photos of your people. Don’t stop at headshots of your CEO and officers, show behind-the-scene shots of your customer service people helping solve problems, your production line getting orders ready, your developers working on the latest challenge. People like to do business with people, not with brands. The more personal you are, the more opportunity you have for building trust and confidence (a.k.a. website credibility).
  • Brag about your company and your people. Show visitors you’re proud of who you are and what you do. Are your products locally made? Say so. Displaying confidence – as long as it’s not unfounded confidence – is one of the secrets to getting others to be confident in you. Never state something that isn’t true, but never hold back something that isn’t. After all “It ain’t bragging, if it’s true!”

The Third Test of Website Credibility – Social Proof & Security

Social proof is a huge persuader. Your visitors will believe what their peers say quicker than they’ll accept the claims in your sales copy.

Don’t stop at posting customer reviews, though. Add other types of third-party content to build credibility in the eyes and minds of your visitors.

Website Credibility Tip #3: What you say about yourself builds consumer knowledge. What others say about you builds consumer confidence. Strong credibility requires both.

Here are social/third-party proof ideas to help boost website credibility:

  • Show logos and lists of customers and clients. Positive reviews and referrals with photographs and names are like money in the bank to ecommerce websites.
  • Show logos and lists of news organizations who’ve written about you. Don’t claim the logo of a publication without warrant, though. Paying for an ad in a magazine, by the way, doesn’t constitute their endorsement. Getting caught in an attempt to mislead visitors is a quick path to losing credibility.
  • Show snippets of headlines and stories that establish your abilities. If you aren’t yet mentioned in a feature article, make it happen. Every company has or does things worth being talked about, but you may need to help that conversation along.
  • Don’t censor unflattering reviews – they add to credibility. Products and websites with all 5-star reviews look hokey. When you do get a negative review, answer it sincerely and without defensiveness.
  • Display trust symbols that illustrate your site’s security precautions, your business association memberships, your awards, and such.
  • List websites and/or link to articles on websites that highlight your company.
  • The more reviews and star ratings, the better. If you’re getting too many negative reviews, that’s more likely a customer service problem than a public relations problem.

Implementing trust badges throughout your site can be one of the most effective methods of establishing the credibility of your website. We’ve consistently found trust badges to be an impactful approach to not only improving conversions, but also reducing cart abandonment rates.

An example of how to effectively utilize trust badges to heighten your credibility can be found at The Shoe Mart. This high-end footwear brand approached The Good with the goal of reducing cart abandonment on their website, without having to utilize discounting or detract from the user experience. To help achieve this goal, our team implemented a variety of trust badges throughout the client’s site to assert credibility in each step of the customer journey. 

For this test we used TrustedSite certification badges to heighten the feeling of security for users. With the simple addition of these badges on the homepage, footer, and checkout page, our team observed a 14% increase in ecommerce conversion rate for users who were shown the trustmarks. 

How Is Your Website Credibility?

You’ll buy groceries from a store, even if the checkout person is a grouch. But you won’t buy groceries from a store if you don’t believe the products are safe – even if the cashier is friendly and helpful.

The same principle applies to your ecommerce or lead generation website. You absolutely must establish website credibility in order to optimize conversion rates and maximize sales.

Your visitors need to know they’re in the right place buying from the right people. And they need to verify their conclusion by confirming that others feel the same way about your brand.

If you’re seeking to improve the credibility of your ecommerce website, it might be time to consider a conversion optimization program. Get your 5-Factors Scorecard™ and talk with an expert from our team to identify potential areas that could be optimized to heighten trust and credibility.

Find out what stands between your company and digital excellence with a custom 5-Factors Scorecard™.

The post Website Credibility: The Best Rules and Tips for Building Trust appeared first on The Good.

]]>
Crafting Better Web Personalization Experiences https://thegood.com/insights/web-personalization-experiences/ Tue, 11 Oct 2016 17:40:13 +0000 https://thegood.com/?post_type=insights&p=4812 Summary: It is important, now more than ever, that brands incorporate web personalization experiences into their online strategy. Aligning a website’s user experience with customer needs is critical to the online success of any company. How important is it? 75% of online customers say irrelevant content negatively affects their online user experience. 85% of retailers […]

The post Crafting Better Web Personalization Experiences appeared first on The Good.

]]>
Summary: It is important, now more than ever, that brands incorporate web personalization experiences into their online strategy. Aligning a website’s user experience with customer needs is critical to the online success of any company.

How important is it?

  • 75% of online customers say irrelevant content negatively affects their online user experience.
  • 85% of retailers believe they must have a unified personalization strategy in place.
  • Only 23% have a personalization strategy in place today.

Read the full article, Crafting Better Web Personalization Experiences, on the Lytics blog.

The post Crafting Better Web Personalization Experiences appeared first on The Good.

]]>
5 Tiny Mistakes That Confuse Site Visitors and Kill Conversion Rates (and How to Fix Them) https://thegood.com/insights/5-tiny-mistakes-confuse-site-visitors-kill-conversion-rates-fix/ Sun, 03 Apr 2016 21:02:55 +0000 http://thegood.com/?post_type=insights&p=81628 Everyone knows to look out for the big things in landing page design, but it’s the little things that can make you stumble and drop the ball. When it comes to graphics, you worry about pointing eyes in the right direction, using the correct fonts, and placing each element in exactly the right spot. When […]

The post 5 Tiny Mistakes That Confuse Site Visitors and Kill Conversion Rates (and How to Fix Them) appeared first on The Good.

]]>
Everyone knows to look out for the big things in landing page design, but it’s the little things that can make you stumble and drop the ball.

When it comes to graphics, you worry about pointing eyes in the right direction, using the correct fonts, and placing each element in exactly the right spot.

When it comes to writing, you try to craft compelling copy to draw the reader in and maintain attention all the way through to the call to action.

That’s all fine and necessary, but the litmus test comes when you consider the results.

Read the full article on the Leadpages website.

The post 5 Tiny Mistakes That Confuse Site Visitors and Kill Conversion Rates (and How to Fix Them) appeared first on The Good.

]]>