Kyle Geiste
Experience Designer HubSpot Academy
@kylegeiste
DESIGNING A
USER-FOCUSED EXPERIENCE
HubSpot Design Certification Class 5
TODAY’S GOAL:
You will be able to create
templates that are optimized
for the user.
1 Why is user-focused design important?
2 How do you design for the user?
3 Implementing key UX design principles
AGENDA
WHY IS USER-FOCUSED DESIGN IMPORTANT?
1
If you aren’t focusing on the homeowner, then who are you building for?
If we don’t involve the user’s persona, needs, and goals in our work, then we’re basically just designing for ourselves. And we probably aren’t the customer, here.
FLICKR USER NORIO-NAKAYAMA
“Too many companies believe that all they must do is provide a ‘neat’ technology or some ‘cool’
product or, sometimes, just good, solid
engineering. Nope. All of those are desirable (and solid engineering is a must), but there is much more to a successful product than that:
understanding how the product is to be used, design, engineering, positioning, marketing, branding—all matter. It requires designing the total user experience.”
Don Norman, Design and Usability Expert
‘Sharing Ownership of UX’
UXMatters.com, 2007
FLICKR USER ANDR3
A lack of user focus yields complexity, and complexity is the enemy of good design.
When users struggle to perform the basic operations necessary to find their way to their personal goals, they typically don’t find it, no matter how nice-looking it is.
But bare-bones simplicity isn’t always the solution, either.
“The argument is not between adding features and simplicity, between adding
capability and usability. The real issue is about design: designing things that have the power required for the job while maintaining
understandability, the feeling of control, and the pleasure of accomplishment.”
Don Norman
ACM Interaction, Volume 15, Issue 5
(Don’t take that too hard, just know that it’s impossible to naturally understand a user’s intentions and needs if we aren’t the user.)
The answer lies in the user, not in you.
In other words:
HOW DO YOU DESIGN FOR THE USER?
2
From the beginning of the process, and beyond when the site goes live, you need to consider your users’ needs, goals, and challenges. Every decision point during the design process should begin with, “What would the user want?”
Start and finish with the user.
Buyer Personas are a great start, but as a designer you’ll want to focus on the experience that your user will have when using pages created from your template.
Develop the site’s user personas.
(No Buyer Personas? Start by watching the our Buyer Personas training videos!) Ask yourself…
• Who would use this content?
• What problems are they trying to solve?
• What is their level of technical expertise?
• What other websites do they frequent?
• What devices/software do they use?
?
BEST PRACTICES FOR
USER-FOCUSED DESIGN
Discover the problems with your current site design.
Test it on anyone you can.
Continue the feedback loop indefinitely.
BEST PRACTICES FOR USER-FOCUSED DESIGN
Create a basic prototype to solve those initial problems.
Iterate until the testing no longer surprises you.
Start with your current problems.
What do your existing users complain about? What do they have trouble finding?
What resources should be easier for them to find, but aren’t? Make a list of everything your site does well, and every way it could be improved.
Create prototypes.
Start very simple and low-tech, on paper or in mockup software, and then create more fully-featured versions. The point here is to move quickly, so that you can work out the issues fast.
Test your designs.
Start local, then branch out. Start with your colleagues, friends and family to work out the major flaws, then test samples of your user personas.
Ideally, test with real customers.
Interested in learning about how to conduct user testing?
Check out our Contextual Marketing Certification!
There, you’ll learn more about the entire process of creating user-centric site experiences, including use of Smart Content and Personalization.
academy.hubspot.com/certification
Prototype, test, repeat.
Continue this cycle until the results no longer surprise you. Remember: if a user makes a mistake once, it might be their fault. If they continue to make that same mistake, it’s probably your fault.
When does the cycle end?
In a way, never.
Launch when it feels ready, but expect that you’ll continue to prototype and test new ideas to ensure that your users are
always delighted.
IMPLEMENTING KEY
UX DESIGN PRINCIPLES
3
1. Consistency 2. Visibility
3. Affordances/Signifiers 4. Mapping
5. Feedback 6. Constraints
PRINCIPLES FOR USER-FOCUSED DESIGN
PRINCIPLE 1, CONSISTENCY
Consistency is the implementation of design patterns and repetition, which help users to quickly learn how an interface works.
For example, while ten cars may all have wildly different dashboards, the brake pedals will always be in the same location.
CONSISTENCY IN HUBSPOT
Work with as few templates as possible to keep the design fluid and consistent,
helping users recognize how and where they can find information and navigation on a page, as they explore.
CONSISTENCY IN HUBSPOT
While creativity is always appreciated, try not too wander too far from commonly accepted design patterns. Don’t reinvent design language — use what’s already out there. Create beautiful buttons, but stick to the form that people know.
PRINCIPLE 2, VISIBILITY
Visibility ensures that the most important options available to your user are quickly located and easily accessible.
For example, emergency buttons in an elevator are often bright red and placed near the ground so that they are easy to reach.
VISIBILITY IN HUBSPOT
Don’t bury your important content beneath endlessly-unfolding menus. Less is often more: keep your major categories easily visible, and expand when necessary in the footer or in sub-pages.
Header Navigation: 9 Links, no sub-menus
Footer Navigation: 39 Links, complete site map
PRINCIPLE 3, AFFORDANCES/SIGNIFIERS
Affordances/signifiers are visual cues that teach the user how something can be operated.
For example, a doorbell button may be concave or light up, inviting you to touch it.
AFFORDANCES IN HUBSPOT
Focus on making the interactive, input-based sections of your templates teach
people about what’s possible. For example, you can indicate an interactive element using subtle animations.
Button Animation
In this example, when hovering, the button outline fades to white and the arrow slides down, out of sight.
Navigation Menu Animation
In this example, when hovering, a white bar fades in below the link.
PRINCIPLE 4, MAPPING
Mapping is the principle of drawing natural connections between interface objects and their intended effects.
For example, turning a steering wheel left makes a car go left — you can easily map the direction of the wheel to the direction of the turn.
MAPPING IN HUBSPOT
Ensure that all of your helpful text (on buttons, links, forms) is as descriptive as
possible, and ensures that a prospective user can easily understand what event will happen next.
Okay: Classic ‘Hamburger Menu’
(for displaying a mobile navigation menu)
Better: ‘Hamburger Menu’ with text, clearly stating what the button does.
PRINCIPLE 5, FEEDBACK
When a user completes an action, appropriate feedback will help them understand that the action was recognized and completed correctly or incorrectly.
For example, when downloading music, a gradually-filling progress bar informs you that your download has begun.
FEEDBACK IN HUBSPOT
Forms are a common place where instant feedback is key. Use styling to keep the user informed of which item is selected or required, and what they may have
missed.
1. Required field selected (red border)
2. Non-required field selected (blue border) 3. Required fields missed,
(error messages)
1 2 3
PRINCIPLE 6, CONSTRAINTS
Constraints are purposeful limitations placed on an interface or device. Often times, creating the best user experience means only providing what is necessary for the user to achieve their goals, and nothing else.
For example, a washing machine may lock itself during a spin cycle, to prevent injury or damage to the machine.
CONSTRAINTS IN HUBSPOT
Utilize personas to create site sections that only show details pertinent to the person viewing them. In this case, the content was based on the user’s role at their
company.
Here, when a lead selects their role, the site content is customized to suit them.
Test on multiple devices.
Be sure to test them to the limits. Spend a good hour or more just navigating around your site on a smartphone or tablet. Resizing the window on your browser isn’t
enough. Get a feel for what it’s really like to use your template on a smaller scale.
Design for the content creator, too!
Don’t forget your content creators! Using instructive custom modules, module labels, and descriptive default text blends education into the template. The more work you do up-front, the less time you’ll spend providing template support.
