Why Do People Look for WordPress Alternatives?

Website Vulnerability

The popularity of WordPress has a downside: an attractive opportunity for hackers to access the website and cause damage to it. 

Free plugins and templates contain high-level security issues that may let hackers access posts and add malicious content. For instance, PageLayer plugins that can work with almost all themes on the market appeared to have vulnerabilities and failed to include permission checks. Over 200,000 sites were already using the plugins when the vulnerability was found. 

The vulnerability of starter templates is crucial. According to the latest news, most plugins published by the Astra WordPress theme can lead to damage that may cause a site takeover by hackers, which is why utilizing ready-to-use solutions in WordPress may not always be a good idea. 

All that publishers can do to decrease vulnerability is to update plugins to the latest versions. Still, WordPress makes it your responsibility to monitor updates and install them.

SEO Requires Plugins and Knowledge

While WordPress is one of the most SEO-friendly platforms and has numerous opportunities for creating all types of websites, it may not cover users’ needs in all cases. You can use plugins to improve your SEO in many ways, from changing page templates for meta tags generation to indexing management. Still, plugins cannot solve all of your problems, which is why you may need basic HTML/CSS knowledge or help from an additional service.

Let’s look at this example with a structured data markup. In general, structured data is a code that looks like this:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
}
</script>

If you add this script to your WordPress post, the search engine will understand what the page is about. In this example, we have added “product,” which tells search engines that the page is about the product and matches the content with search queries more accurately. The only issue is that you need to have basic HTML skills or invest your time to set a structured data markup. 

Another point worth considering is a chance of vulnerability if the user wants to solve problems that require different plugins. Their weight can slow down the website’s speed or make it appear incorrectly on some devices. Lastly, the more plugins you install, the more vulnerable your website becomes. 

Loading Speed of Themes and Plugins

If you try to run a WordPress site with a speed tester tool, the chances are likely that you will see “render blocking resources,” “unused CSS,” or “unused Javascript.” This is the reason the speed of the website may decrease as particular elements on the page cannot be rendered until the javascript or CSS are loaded. It happens most of the time due to the WordPress theme design that is quite difficult to correct by yourself. Additionally, plugins and the fact that WordPress is written with PHP may also affect the speed. 

User Experience 

From the UX perspective, the above-mentioned factors may affect the interaction of users with the website and their overall experience. The Core Web Vitals that Google uses to evaluate a website experience include three major components: first input delay (FID), cumulative layout (CLS), and largest contentful paint (LCP).

Most of these factors may be affected in some scenarios with WordPress. For instance, LCP defines how much time it will take for the user to see the page content. If themes or plugins are heavy, then the load time is more likely to increase. 

CLS defines how stable the webpage is. Again, you need to pay attention and be careful with the themes and plugins you install to ensure that the content blocks are not moving around as you load the page. 

Since Core Web Vitals recently became an important ranking factor, an additional SEO tool like SE Ranking will help define all your website’s technical problems.

Who Should Use WordPress?

WordPress is widely used for creating various types of websites with it. Most platforms are made to build a website or a blog, while WordPress can be used for a wide range of needs. Here is a list of website types you can create with WordPress (and it is not the full list): 

• Blogs
• Business, Q&A, ECommerce, review websites
• Portfolios
• Forums
• eLearning modules
• Chatrooms
• Business directories
• Galleries
• Wikis and knowledge bases

WordPress is perfect for beginners, thanks to its user-friendly functionality and management. Any user can start with no prior experience with SEO, design, or development and get a working solution for business. You can enhance a website as you go, adding plugins and tweaking functionality, which is great in an ever-changing environment.

WordPress is an excellent solution for businesses that can compromise security and have enough resources to invest time and professional effort to set up a working site. If a company is short of finances, they can invest some time and figure out the matter by themselves — a large community and support enable them to do that. WordPress is free and easy to manage, which is why a business can take care of their website once everything is set up and extend their online presence further. 

Who Will Not Benefit from WordPress?

When entrepreneurs create a website for business, most of them have one simple goal in mind: to create a site that converts into a purchase and attracts clients. As a UX designer, you know that all you need for such purposes is a reliable, UX-friendly website that will help you avoid issues rather than create new ones. 

Even though WordPress can satisfy such needs in many cases, its functionality will not work for all types of websites. 

WordPress is definitely not the best solution if the business is concerned with security. Even installing security plugins and paying close attention to updates does not guarantee that you will avoid a cyber attack. Furthermore, the platform does not offer hosting and tech support — it is worth considering if you or your clients plan to handle everything by yourself at first. 

Here are some examples where it is better to avoid building websites with WordPress: 

• Banking websites
• Investing and cryptocurrency websites
• Government websites

We suggest checking alternatives before settling with a CMS to make sure you understand the benefits and the flaws of every platform. Chances are, you will find a website builder that suits your needs better than WordPress.

6 Best WordPress Alternatives

1. MODX

Like WordPress, the platform combines CMS, development frameworks, and managed cloud hosting. It can serve as a great alternative if the business is looking for a secure solution. It has various features which can create all types of websites, blogs, catalogs, and other content types.

Benefits for UX Designers

• The platform has the flexibility to create both simple and complex sites. 
• It pays special attention to security matters.
• Built-in features allow users to easily manage the website once it is built and solve any issues with professional support. 

Price Range 

$30-$275 per month

2. Joomla 

From the SEO perspective, both Joomla and WordPress require the knowledge and help of plugins to improve SEO. However, Joomla is less exposed to vulnerabilities, which allows us to consider it as a WordPress alternative. It is great for developers who are ready to work with servers for the most part. 

Benefits for UX Designers

• Joomla is highly customizable and flexible in terms of design. 
• The platform has brand guidelines, from copy to colors, textures, images, CTAs, and more.
• It is easy to create a clear journey for your visitor and identify an audience persona.

Price Range

Free

3. Wix

Wix mainly focuses on creating appealing websites and plans to develop in this direction. The platform offers hosting and tech support, while WordPress does not specify such features. Wix can become your alternative if you are looking for an easy-to-use, creative website with professional support and enhanced security. 

Benefits for UX Designers

• Flexible designs with numerous templates that allow you to build creative websites and adapt them for your needs.
• The platform offers CMS-like dynamic features, video backgrounds, scroll effects, and animations. 
• Wix follows the latest trends and has a well-developed UI and UX. 

Price Range

 $4.50-24.50 

4. Squarespace

Squarespace is a website design platform with “award-winning web designs.” The main benefit of Squarespace is the availability of built-in SEO and analytic tools that are hard to find on other platforms. Additionally, it offers blogging tools that let you categorize, share, and schedule posts. Similar to Wix, Squarespace also takes care of all technical aspects and support, which WordPress does not.

Benefits for UX Designers

• Get unlimited storage and bandwidth.
• Fully integrated eCommerce on most plans, which makes the platform a great fit for building online stores. 
• UX designers will find built-in templates helpful when starting a new website. You automatically get built-in mobile version templates.
• You can use Squarespace’s custom CSS option to insert code on any website page. 

Price Range

$12

5. OpenCart 

While WordPress is a multi-tasker, OpenCart is designed for e-commerce stores. From the SEO perspective, OpenCart is not a piece of cake: you need to put some effort into figuring out how to use it effectively. Yet, it becomes easy to set up, manage, and analyze once you do. 

Benefits for UX Designers

• Availability of information lets users see an overview of total orders, sales, customers, sales analytics, and other widgets.
• The multi-store feature allows you to manage all stores in one place. 
• Wide product variables let you adjust product size, color, length, and other variables. 

Price Range 

Free

6. Shopify

As Shopify is based on the SaaS model, it is built for users who do not have a technical or design background — pretty much anyone can sign up and create an appealing online shop. The main difference is that WordPress requires a more hands-on configuration, while Shopify is a tailored solution for an online shop. 

Benefits for UX Designers

• The platform has a range of customizable templates which help you meet business’ branding requirements.
• Shopify offers responsive and easy-to-edit templates with support. 

Price Range

 $9-2,000 per month

Let’s Draw to a Close

Is WordPress still bringing value? Definitely. 

Can it be your all-in-one solution? This depends on your skills, expertise, and goals. WordPress can certainly become a solution for you or your client, considering it is one of the most beneficial platforms for beginners. It is completely free and has a large community, allowing individuals who have the time to invest in it to set up various website types. 

Yet, WordPress has some flaws that can limit a website’s abilities if it requires a specific set of plugins or can only solve a problem with HTML/CSS knowledge. 

Should you start looking at alternatives?

If you feel that security is one of your primary focuses and need a more tailored solution, you should consider alternatives. For instance, platforms such as Shopify or OpenCart are built for online shops, while Wix and Squarespace focus on websites for businesses. 

When you choose the suitable CMS for your clients or yourself, the best you can do is define your goals, find bottlenecks, and go over the functionality of each platform — that way, you will get a clear understanding of whether WordPress is good for you. 

Hero source image: Freepik

The post When WordPress Is Not a Good Solution for Your Website (and Best Alternatives) appeared first on UX Mastery.

UX design is a broad, multifaceted field that’s constantly evolving. The digital landscape is ever shifting, new technologies are emerging, and the principles of user experience design are constantly changing as a result. Today’s UX designers must stay up-to-date in order to act as mediators between humans and technology.

With so much opportunity to learn and grow, UX designers must ask themselves: What role do I want to play in this burgeoning industry?

No matter what stage you’re at in your career, it’s important to routinely consider the kind of designer you are now, and the kind of designer you want to become. Especially if you’ve been in the industry for a while, you might find yourself getting comfortable or losing sight of your aspirations.

This is where your UX career roadmap comes in: it’ll keep you focused on your goals, ensuring you’re constantly growing and developing as a designer.

In this guide, we’ll show you the value of creating a UX career roadmap. We’ll then lay out a step-by-step process you can follow to create your own roadmap from scratch. We’ll discuss:

1. What is a UX career roadmap?
2. Why create a UX career roadmap?
3. How to create a UX career roadmap: A step-by-step guide

Let’s jump in.

1. What is a UX career roadmap?

A career roadmap sets out a clear plan of action for achieving your career goals. It considers the following questions:

• Where am I now?
• Where do I want to go?
• How will I get there?

Mapping out your UX career is not just about progressing from junior to senior—nor is it about aiming for a certain salary or job title. While these are important factors, an effective career roadmap should also dig a little deeper. It explores your strengths and weaknesses, identifies areas for professional development, and helps you forge a career that aligns with your personal goals and values.

A UX career roadmap depicts your aspirations, laying out the blueprint for your path as a UX designer. Whether it’s a simple flow diagram or a true work of art, there are many benefits of drawing up a UX career roadmap. Let’s take a look at the most important ones.

2. Why create one?

A career roadmap might seem like a lot of unnecessary work—especially if you’re not a fan of planning ahead. But, if you’re serious about your career as a UX designer, it’s worth the effort. Why? Because an effective UX career roadmap will:

• Help you achieve career satisfaction: In order to forge a fulfilling career, it’s important that your day-to-day work mirrors your personal values. You need to feel like you’re learning, growing, and contributing. A career roadmap keeps you on the right track; not only by making you aware of your goals, but also by ensuring you’re taking the necessary steps to achieve them.
  
  
• Hold you accountable: It’s easy to leave your career in the hands of fate, or to blame external factors if things don’t go as planned. A well-thought-out roadmap puts you in control of your career path, giving you the foresight to see what needs to be done in order to reach your desired destination.
  
  
• Make you a better UX designer: A career roadmap is not set in stone; it’s a malleable plan that can be adapted along the way. Thus, it encourages continuous evaluation of your professional self: what kind of designer are you? How might you improve? This self-assessment alone will push you to get better at your craft.

3. How to create a UX career roadmap: A step-by-step guide

When it comes to devising a UX career roadmap, the process can be divided into three distinct phases: evaluating the present; setting goals for the future; and coming up with action points that will help you achieve these goals.

Based on these three phases, we’ve put together a step-by-step guide to creating a UX career roadmap.

Step 1: Reflect on the here-and-now

This first step is a bit like the research phase of a UX design project—only this time, you are the target user! In this phase, you’ll take the time to self-reflect and evaluate your current position in the UX industry: Who are you right now? Where are you currently at in your career?

The purpose of this step is to build self-awareness, focusing on your skills, interests, and values.

To get started, write down your answers to the following questions:

1. What is my current job title?
2. What does my current role entail? List five-ten key tasks and responsibilities.
3. What hard and soft skills do I possess? List your main skills and give yourself a rating for each (basic, intermediate, or expert). It might be useful to enlist the help of a trusted colleague!
4. What are my three main strengths?
5. What are my three main weaknesses?
6. What do I enjoy doing at work?
7. I wish I could spend less time doing…
8. I wish I could spend more time doing…
9. What do I value about my current role? Here you should think not only about the role itself, but also about your working environment, your team, the way the company is set up, etc.
10. What are my main values when it comes to work? List three.

Don’t rush the self-assessment phase. Some answers might not be immediately obvious, so allow yourself plenty of time to reflect. Ask your colleagues for their thoughts, too—they may recognize strengths and weaknesses that you’re not aware of.

Step 2: Construct your ideal world

Once you’ve carried out a thorough evaluation of the present, it’s time to consider the future. For the purpose of this step, you’ll think purely in terms of ideals. In an ideal world, what kind of designer are you? What does your perfect working day look like?

When answering the following questions, try not to get too hung up on what you deem to be realistic; this phase is all about your dreams and aspirations!

1. In an ideal world, I would work for: myself / a large corporation / an agency / a small startup…
2. In an ideal world, I would work: full-time / part-time / on a project basis…
3. In an ideal world, I would design products for the following industry…
4. In an ideal world, I would be an expert in…
5. My ideal day would consist of the following tasks…
6. In an ideal world, my salary would fall between the following range…
7. If I could write my own job title, it would be…

Aim to tackle this phase in a more quick-fire fashion. It’s OK to be unrealistic at this point; you just want to uncover and acknowledge your intrinsic career desires! This will help form the basis of a more realistic strategy later on.

Step 3: Conduct industry research

With a thorough self-assessment completed and an abstract wishlist in mind, it’s now time to conduct some industry research. The purpose of this step is to learn as much as you can about the field: What opportunities are available to you as a UX designer?

Some useful areas of investigation include:

• UX job titles and career paths: What job titles fall under the UX umbrella? Within the field of user experience design, there are countless routes you can take—from specialist roles such as UX researcher or UX writer, to broader job titles such as product manager or full-stack designer. You’ll find lots of useful information in Career Foundry’s guide to UX designer job descriptions, as well as on job boards such as Indeed, Glassdoor, UX Jobs Board, and, of course, LinkedIn. This leg of your research should culminate in a list of potential job titles of interest.

• Salaries: When constructing your ideal world in step two, you came up with an ideal salary range. Now it’s time to gauge what’s realistic. Based on the job titles you came up with above, conduct some research into the average salaries for each. If the data is available, break your salary research down by years of experience and location. Sites like Glassdoor, PayScale, and Indeed provide up-to-date salary reports for the UX industry.

• Specialist skills: What skills do UX designers possess? What additional skills are associated with the specialist job titles you’ve come across? This part of your research will enable you to identify any gaps in your own skillset and to focus your professional development in the future. Again, job boards and networking sites are extremely useful here. It can also be helpful to chat to your peers in the industry—be it a mentor, a colleague, or a connection you’ve made on LinkedIn.

As always, the internet is an excellent resource for conducting quick and in-depth research. However, don’t underestimate the value of in-person inquiry! You can learn a lot about the industry by attending networking events and striking up casual conversations with those around you.

Step 4: Set concrete goals and timelines

Now for the tricky part: Setting goals and deadlines. What milestones do you want to aim for, and when?

Start with the “when”. It can be difficult to think too far ahead in detail, so you may want to break your roadmap up into manageable segments. For example: You can have a five-year goal in mind, but you might work towards it in one-year increments. You would then set milestones for each year, rather than for the overall five-year period.

Once you’ve decided on a timeline, you can set your objectives accordingly. Based on what you’ve learned so far—about yourself, and about the industry—try to come up with three milestones for each roadmap segment. These milestones may relate to each other and feed into one main end goal (as in example one, below), or they may focus on completely separate areas (as in example two):

Example 1:

Our first example is a roadmap provided by Nadia Fedorova, UX Researcher and Designer at CareerFoundry. Nadia started her career as a data scientist before moving into UX as a research specialist. Her career roadmap is focused on her long-term goal of becoming a design all-rounder.

Five-year goal: To become a UX generalist and strategist. To lead projects at all stages in the design process, right through to implementation, as well as influencing an overall UX strategy for all the design initiatives.

Two-year interim goal (broken down into the following milestones): To land a role that combines UX research and UX design, with elements of UX strategy.

• Six-month – one year milestone: Develop a broader range of skills outside of UX research—such as mapping the overall design project strategy and identifying the most suitable UX methods for a given project. Familiarize myself with the tools that UX designers use (such as Sketch).

• One year – 18-month milestone: Gain practical experience in the broader UX field within my current organization. Find opportunities to help develop the strategy for UX projects, and to practice more general design skills beyond the scope of research.

As Nadia explains: “I moved from data science into UX as a research specialist. After some time in the UX industry, I realized I wanted to focus not only on UX research, but on the entire UX process—including design and strategy. I knew I would have to make a conscious effort to steer my career in a certain direction, so I came up with a five-year plan to make it happen.

My first step in the UX industry was a six-month internship which involved both UX research and design. Then I joined CareerFoundry as a UX researcher and designer, which fulfilled my two-year “interim goal” of landing a full-time role that combines both UX research and design and allows me to be involved in defining UX strategy. My next big goal is to become a UX generalist and strategist, looking at projects from a broader perspective. So, I’ll continue to get hands-on with UX strategy and learn as much as I can about converging business and UX!”

Example 2:

Our second example is a hypothetical UX career roadmap:

Five-year goal: To start my own business as a freelance UX consultant.

One-year interim goals: In one year’s time, I want to

1. Be a better communicator and improve my presentation skills.
2. Become an in-house advocate for good UX: organize and deliver a UX workshop for the whole company.
3. Have increased my salary by 10%.

These are just two examples of how you might set goals and timelines. As you can see, the first example is quite specific, focusing on one particular area of UX. The second example sets more general objectives within a shorter one-year segment.

How you set your goals is up to you. Even if you’ve identified a five-year goal, don’t feel compelled to fill in each one- or two-year segment straight away. Remember: it’s a malleable plan that can be tweaked, updated, or even completely overhauled as you progress throughout your career.

Step 5: Identify clear action points

You’ve established where you want to go; now it’s time to consider how you’ll get there. In this phase, you’ll come up with action points that will take you from A to B. How do you plan on achieving your goals? What tools do you need?

For each milestone laid out in step four, you need to set out a corresponding plan of action. This might include things like:

• Upskilling (hard skills): Learning additional hard skills such as basic frontend development or visual design principles—be it through self-study or a specific course.
  
  
• Upskilling (soft skills): Improving certain soft skills such as communication, teamwork, or collaboration by giving presentations, attending meetups, organizing team socials, etc.
  
  
• Networking: Some goals may require you to build a solid network of industry contacts—for example, if your long-term plan is to work as a freelancer. Your plan of action might be to attend five industry events in one year, be it conferences, meetups, workshops, or design showcases.
  
  
• Shadowing an expert: If you want to specialize in a certain aspect of UX design, one step towards your goal might be to find a mentor or shadow an expert in this particular field.

When coming up with action points, try to be as specific as possible. The clearer your action points, the easier it will be to implement them!

4. What next? Using your roadmap

So there you have it: Five clear steps to devising your very own UX career roadmap. In terms of actually putting pen to paper and drawing up your roadmap, treat it like a wireframe: be prepared to iterate several times, and only fill in the details once you’re happy with the basic foundations.

It’s important to remember that your UX career roadmap isn’t just a fixed, one-off plan. You need to review it regularly and move the goalposts as you progress in your career. Your roadmap isn’t there to tie you down to one single destination: you’ll learn new things every day, and your values and goals will inevitably change! The purpose of your roadmap is to get you routinely thinking about where you want to be, and how you can grow and progress.

With a clear UX career roadmap, you’ll never lose sight of the bigger picture. So: pin your roadmap somewhere visible and get to work on those action points!

The post Advice For Intermediate UX Designers: How To Create A Career Roadmap (And Why You Should) appeared first on UX Mastery.

Leading an organisation from this role is also a major challenge. It’s hard work implementing a UX focus in a company where none exists. There will be battles against corporate biases, conflicting business needs, and results-driven culture.

In such a difficult position, how can a UXer go about creating a culture of great user experience?

It’s imperative to establish a baseline process, socialise the benefits of great UX, and prepare for the long road ahead.

Above all else, establish a process

When starting a culture of user experience focus, the first step is to establish a clear UX process. 

“UX process is a cornerstone of UX design, it’s a make-it-or-break-it aspect of UX design,” writes veteran UX professional Nick Babich in his blog for Adobe.

“Without a solid UX design process, a designer could be completely moving in the dark. A clear and concise UX process, on the other hand, makes it possible to craft amazing experiences for users.”

Every UX professional should have a favoured baseline process. In fact, you’d expect this to be the first question in any UX interview. Part of any quality answer to this question should be to acknowledge the importance of context. No two companies or products are the same. Processes should differ depending on organisational needs, technology stacks, and delivery speed.

No process is bound to be the perfect fit. An initial process’s existence is more important than its perfection. Install a process to address the largest problems and work to resolve the kinks later.

Whatever process you choose, tailor it to your organisation’s needs. This will help you with the second facet of gaining UX buy-in: socialising UX benefits among stakeholders.

Socialise the benefits of UX among stakeholders

In his Forbes piece Good UX is Good Business, Andrew Kucheriavy, founder and CEO Intechnic, lays out the argument for the business benefits of an improved focus on user experience.

“Good user experience is clearly good for business,” he writes. “ Studies show that companies that invest in UX see a lower cost of customer acquisition, lower support cost, increased customer retention and increased market share.”

While the benefits are clear, you must be able to explain why the UX process is beneficial to your stakeholders. 

UX success hinges on the cooperation and participation of the business as a whole. While you are the engine propelling the car, the whole machine must move forward together. It’s often difficult for internal stakeholders to see the progress and impact of UX focus. By clearly explaining the benefits, you’ll bring your company one step closer to fully embracing a culture of great user experience.

I’ve written previously on how big of a part UX professionals play in facilitating internal communication. We sit at the epicentre of our business. We speak with our business partners to understand project requirements. We work with our technical teams to understand what’s viable, and to support development efforts. We talk with customers to understand their wants, needs, and expectations. An established process allows UX pros to speak about the project pipeline and its direct impact to any stakeholder.

If we are successful as UX professionals, the benefits we add to our organisations should be clear. Our business partners should have a better understanding of our customers’ needs through UX testing. Our technical teams will receive projects that are both practical and well-defined through iteration and revision with our business partners. And, most importantly, our customers receive a product that exceeds their expectations.

Be aggressive in explaining your expected benefits. Take advantage of your team’s rituals and culture to discuss your roll and how your process will benefit specific projects and initiatives. This gives UX pros excellent opportunities to speak on how and why our process benefits the company as a whole, and gain allies in promoting usability throughout the company.

Cindy McCracken, a UX professional with more than 10 years of experience working for the likes of Fidelity Investments, agrees.

“The more you work with co-workers such as support, sales and development and show them the value of UX, the more support you will have within the organisation,” she writes in her article Proven Strategies to Win Over Stakeholders for Your UX Project. “These in-the-trenches supporters will see the value of your work and the successes with customers first hand, and that will go a long way toward impacting workplace culture and filtering up to senior level support of UX.”

There are a few ways UX professionals can quickly integrate themselves into the rhythms of the business.

Attend development standups. Listen for blockers and speak about how your UX process will ease these issues in the future. Pay attention for upcoming work, and ask for inclusion where practical. 

“In planning meetings, be alert for extensive development work planned to go work with interfaces that clearly need to be redesigned,” writes McCracken. “Rather than just let them proceed, bring potential design problems and ideas for improvements to the team.”

Set meetings with your business partners. Work to understand their underlying problems. Explain UX’s role in fixing those issues. Find the low hanging fruit to get some quick wins on the board. 

Take part in retrospectives. Retrospectives are a great platform to show the type of value you can provide for your new team. 

Listen for issues on previous releases. Present your UX process after discussing these issues. Prepare to speak on your process, and how that will affect any issues raised. After your first couple of releases, plan on asking for feedback to adjust your basic process.

Get in front of your customers. Some would argue that it’s not UX unless you’re getting in touch with your users. This is where great UX starts and ends. Working with your clients shows your engaged in their needs. It allows you to talk about projects that are in development. And it allows you to understand wants, needs, and pain points. We take all this back to our business partners to help create a better product.

According to McCracken, a great way to do this early in the game is to test early iterations of projects with your clients.

“[Use] an online first-click test to see if participants go where you expect when asked to perform tasks,” She writes. “You can even ask what people notice first on a page. Better yet, run one study with an image of your current design, and one with an image of the new design to see how user performance compares. If you have a clear winner, it should be easy to get buy-in to improve conversions, which would be a great return on investment.

Prepare for the long road ahead

The road to establishing UX as a team of one can be difficult and lonely at times. Larger teams, for starters, can divide and conquer work.

A team of one, however, does not have that luxury.

As solo teams, it’s important to take some steps to avoid over-extension. With no one to pick up the slack, whiffing on an objective or project can have major consequences. What’s more, the stress of working alone can be intimidating. 

So how can you make life as a solo UXer easier on yourself?

Work with your higher-ups to set reasonable goals and benchmarks. Talk about when you’d like to have processes installed and how you’d like to go about its implementation. Make sure that everyone is clear on mutual expectations and goals. Review your progress and blockers regularly. 

Engage with the larger UX community. One mind rarely surprises itself. In larger teams, UXers have comrades to give feedback. In solo teams, isolation can inhibit creative solutions and stunt professional development. Go to UX meetups. Follow industry leaders on Twitter. Start a blog. Ask and answer questions on Stack Overflow. Join an online UX group like the wonderful UXMastery Community. Whatever you do, get involved with the UX world as a whole in some way. Your conscious and career will thank you.

Conclusion

Working as the solitary UX professional in your organisation is not an easy job, but it can be tremendously rewarding.

In Leah Buley’s The User Experience Team of One: A Research and Survival Guide, she makes the best case I’ve yet seen for the allure of working as a UX team of one. The team of one’s work is as close as one can get to the fundamental values of the UX community as a whole.

“UX is a force for good,” she writes. “[As a team of one,] you help spread the growth of a new and exciting field, one person, team, and company at a time.”

What do you think are the greatest challenges for the solo UXer? Share your thoughts in the comments, or join the conversation in our friendly forums.

The post How to Survive as Your Company’s Solo UXer appeared first on UX Mastery.

I get asked this all the time by people new to user experience (UX) design. Understandably, they want to learn the tools of the industry so they can get hired.

To celebrate the recent launch of the UI for UX Designers course in collaboration between CareerFoundry and InVision, I’ve put together an answer to this all too common question. 

Hiring someone based on the tools they use would be like hiring an artist because they have the right brushes. It’s not about the tools, it’s about method and craft. UX design relies heavily on process and the tools that I use mirror that process.

A design process is a recipe for creating great products. Everyone has their own way of doing it, and everyone uses different tools to make it happen. I’m going to try to share my recipe and the tools that I use along with a few alternatives.

Even better, most of the tools listed here are available on a freemium model and have a usable version for free. The exception is Sketch (good news- there are tons of free alternatives). The only requirement for these tools is a computer or tablet, but with UX design in general, all you really need to create a good user experience is pen, paper, and an inquisitive mind.

There are lots of things that should happen behind the scenes of creating a great product, such as user personas and customer journey maps. I’m just going to assume that you’ve already created these for your business and talk about my workflow from the first stage of inspiration, all the way to implementation of a new product or feature.

Inspiration stage

I know it’s tempting to get on Behance, look for inspiration, and then move straight into wireframes, but as a UX designer, you want to fall in love with the problem, not the solution. You’ll try to define the problem and create a competitive analysis to make sure that you’re solving the right problem in the right landscape. I like to use various survey and polling tools to define this.

Surveys

At CareerFoundry we have a very active student community on Slack so I will often create a Simple Poll in Slack as they’re quick, easy, and garner lots of participation.

For more in-depth surveys, you can use a survey tool like Typeform to reach out to your customer via email. I usually create a survey with a final question that asks whether the customer would be interested in a 30-minute video chat.

Interviews

I take a look at their answers and follow up with a video conference using my favourite video chat tool, Appear.in. Make sure you have a script ready, but more importantly, let the customer lead the conversation in the user interview so that you give them the opportunity to identify problems.

I love the combo of Typeform and Appear.in because all the customer needs to participate is a simple URL so the experience can be as simple as one click with no tools or downloads required.

Problem Solving

Once I have an idea of what the problem is, I use Google Docs to create problem statements and share them with my team for further collaboration.

In addition to understanding the problem, we often use “How Might We” statements, a tool pioneered at IDEO, to frame our approach to the problem.

Project Management

For project management, we use DaPulse at CareerFoundry and it’s great for keeping track of complex projects. I would also recommend Trello for project management, even if it’s just for your own daily work management. It’s an amazing tool and the free version is all you will ever need to manage your UX projects.

Ideation Stage

Now that you’ve built empathy with your customer and wrapped your head around the problem at hand, it’s time to start experimenting. As I mentioned earlier, all you need for this phase is paper and pen, as the goal is to keep things as sketchy as possible until you have experimented enough to discover the solution.

Sketching ideas

When I began sketching ideas, I typically just use standard A4 paper cut in half to create a tablet sized canvas. I always start with mobile and sketch my ideas with a marker so that I won’t get too detailed. Ideally, this is a collaborative process, and I would encourage you to have all of the stakeholders attempt to sketch solutions in a brainstorming meeting along with you.

Whiteboards are excellent for collaborative sketching so I recommend you have several around your office for this purpose. Create several sketches to experiment with (I recommend at least 5 novel directions) checking that each idea is feasible with your stakeholders.

You can scan your sketches into your computer and create a “Preference Test” in Usability Hub if you need help deciding on an approach. You could also use your team’s internal channels like Slack for stakeholder feedback. The important thing at this stage is to allow your team the opportunity for feedback so that you can narrow down the solutions to only those that are achievable.

Wireframes

Once you have a few approaches in sketch form, it’s time to create wireframes. If you already have some design skills, try using Sketch or Illustrator. Vector-based tools like Sketch offer a lot of power, but it can be tempting to jump to high-fidelity designs.

If you find yourself tweaking fonts or adding colour to your designs (a common tendency for UXers with visual backgrounds like myself), switch to a tool that only does wireframing like Balsamiq. I use Sketch for wireframing because it’s faster, but I like to use wireframing kits so that I’m not wasting time creating visuals that serve only to distract.  Whether you use a digital tool or even just pen and paper, the important thing is that you stress functionality over aesthetics at this stage.

Prototypes

Experimentation is a pivotal part of any UX designers workflow, and any simulation of what might become the actual product is called a prototype. There is a saying at IDEO that goes, “If a picture is worth a thousand words, then a prototype is worth a thousand meetings.” A good UX designer will spend a lot of time prototyping ideas so make sure that you find a tool that you love.

My favourite prototyping tool is InVision because it covers all the basic functionality in a really intuitive user interface. Of all the prototyping tools I’ve tried, InVision is the fastest way to get something clickable. It’s such a life-saver when you have a user testing session in an hour and your boss is asking you to make changes to the prototype.

They are always adding new features, including a Sketch plugin to prototype in the popular design program. There are a ton of prototyping tools, and most of them are browser-based so all you need is a computer and an internet connection. If you want more in-depth interactions and complex animations, I recommend you buy Flinto for Mac. For on-the-go prototyping, there is even a tool called Prott that allows you to create an entire prototype on your Android or iOS device. Check out uxtools.co for a really nice breakdown of these and other prototyping tools.

Don’t worry about the learning curve involved with these tools. You can also use paper prototypes to test your idea. It all depends on how real you want the prototype to feel. Once I’ve worked out all of the kinks with my team, it’s time to test these prototypes with real users.

User testing

Designing for the user is fundamental to being a UX designer, and you will want as much face time as possible with your users. At first, getting in touch with your user can seem like a daunting task, but don’t worry, there are a million ways to get access to people for testing.

You can find groups on Facebook that fit with your target market. You can create a print ad and put it up in an area where people are likely to fit your demographic. If you’re feeling brave, you can just walk into any coffee shop in the world and find people willing to try out an idea. Keep it simple and try to offer some sort of compensation for their time. Ideally, you should schedule at least a 30-minute usability test and you should be testing with at least 5 participants.  

I really like PowWow for scheduling interviews, and you can schedule up to five on the free trial. If you have more than five interviews to do, I would recommend the paid version or a more powerful tool like Acuity.

You will want to record these interviews if possible and take plenty of notes (I recommend getting a partner for this). Any note-taking program will do, but I recommend using something with a search functionality. I like to use Google Sheets so that I can keep my interview questions and all the responses in one browser tab that is easily searchable.

For recording interviews, I really like Vidyard GoVideo, a really neat Chrome extension that allows you to record the user, the screen, or both in a very simple interface. This works well for testing as it allows you to record the user’s face and the interactions that they have with your clickable prototype. Another alternative would be QuickTime’s screen recording setting (warning: this will create huge files) or even just your phone and a tripod.

CareerFoundry is based in Berlin, but most of our users are in the United States, so we often do remote user testing. The only difference here is that we have the user share their screen while they’re testing the prototype. Offering compensation from across the ocean can be tricky, so we use a tool called Rybbon that offers international gift cards.

Implementation stage

Once you are satisfied with the direction of your idea, it’s time to present your findings to your internal stakeholders. Presenting your work is extremely important for UX designers because many people still don’t understand the process that goes into creating a user-centric product. If they understand all of the steps you went through to get to your final solution, they will be more likely to adopt your approach.

Summarise the testing and pull out your top learnings. Don’t forget to illustrate these with quotes from the testing. I generally use Google Slides for presenting internally because it has excellent commenting and sharing abilities. Sharing your slides afterwards is just as important as presenting your solution! If I want to include more design elements sometimes I will use Keynote as you can drag elements from your wireframes directly from Sketch or Illustrator into Keynote.

Most UX designers won’t get into high-fidelity designs so I’ll keep this phase brief. The UI portion of this process would involve taking your low-fidelity wireframes and turning them into polished designs that are ready for development. I prefer to use Sketch for high-fidelity designs for its ease and simplicity, but some designers still prefer Illustrator or Photoshop or Adobe’s newest design product, Adobe XD.

The important thing to remember about high-fidelity designs is that you clearly present the concept to your development team. One of my favourite tools for this is Zeplin, a program that turns a Sketch or Photoshop file into something that a developer can work with. It pulls out things like hex codes, CSS and fonts allowing them to be previewed through their web app. This is very important because not every developer will have access to Sketch. Use your Zeplin project as the final source of truth between design and development. Having one source of truth will help your developers keep track of the design through the inevitable changes in the development cycle.

In summary

Breaking my process as a UX designer down into three stages, here are the tools I use most often and would recommend.

Inspiration

• Simple Poll in Slack
• Surveys with Typeform
• Interviews using Appear.in
• Google Docs for Problem and How Might We Statement and user stories
• DaPulse or Trello for project management

Ideation

• Pen, Paper, Post-Its
• Get internal buy-in with Usability Hub
• Wireframes in Sketch
• Clickable Prototypes with InVision
• Find participants with Slack, FB, Print Ads
• Scheduling Testing with PowWow
• Take notes in Google Sheets
• Record Interviews with Vidyard GoVideo

Implementation

• Telling the Story with Google Slides
• Sketch for Hi-Fidelity Designs
• Zeplin for Dev Handoff

Bonus tools (a few more of my favourites)

• Chrome
• Trello
• Balsamiq
• Flinto
• Prott
• Acuity
• Rybbon
• Keynote

I hope this has given you a glimpse into the process and tools that go into making a digital product. UX as a discipline is constantly changing and challenging the accepted norms. You should be constantly experimenting with your own tools and process until you find something that works for you. There’s much room for improvement with the current design tools available, so I’m sure our workflows will look very different in just a few short years. 

What’s your favourite UX design tool? Leave a comment and let us know! 

And if you’re interested in levelling up your UI design skills, take a look at CareerFoundry’s new course: UI for UX Designers.

The post The Workflow of a UX Designer: The Process and Tools You Need appeared first on UX Mastery.

These days auto-suggest is everywhere, from social media sites like Twitter and Facebook, to shopping sites like eBay and Amazon, and even in occupation validation for credit card applications.

At its core, an auto-suggest is a form made of two components:

1. a text field (typically <input type=”text”>)
2. a customised select list based on what’s in the text field

With plugins available for all the latest frameworks and libraries, adding an auto-suggest to your site is relatively easy.

But what about accessibility? I’ve reviewed auto-suggest components from many of the major frameworks, and most of them have one thing in common: they’re not properly accessible.

Some go part of the way and make sure suggestions can be used with the keyboard, but most fall over when a selection is made, because focus ends up in a random spot on the page. This cases confusion and frustration for keyboard and screen reader users.

Screen readers are another area where these auto-suggests often fall short. Unless the number of available suggestions is announced to screen reader users, they don’t know they’re there. So, to screen reader users, these auto-suggest components are just input fields.

So how do you make an auto-suggest accessible?

These are my requirements to make an auto-suggest accessible. I’ve included code snippets throughout and linked to a working codepen at the end of the post.

Requirement #1 – Visible focus

A visible focus indicator (e.g. dotted outline, blinking cursor) enables keyboard users to understand where the keyboard focus is. Focus Visible is also a Web Content Accessibility Guidelines 2.0 (WCAG) requirement (success criteria 2.4.7).

Note: if you’re using <input type=”text”> for the input field and you haven’t removed the focus outlines provided by browsers, visible focus should already work. You’ll need to add visible focus highlighting for scrolling up and down the list options with keyboard (as shown in the codepen).

Requirement #2 – Link a label to the input field

All form fields need a label to tell the user what input they’re expected to provide.

For our auto-suggest, this means defining a <label> element linked to the <input> field by its for attribute.

Example:

Onward!

When defining requirements for the suggestions list, we need to consider a few things:

1. When do the suggestions appear?
2. Where do the suggestions appear?
3. How does the user select a suggestion?
4. How does the user close the list?

Answering these will give us the requirements for our suggestions list.

Requirement #3 – If there are no suggestions, don’t show the list

The list should only show if there are suggestions related to the user’s input. If there aren’t any suggestions, don’t show the list.

Requirement #4 – If there are suggestions, show them directly below the input field

If we have suggestions related to what’s in an input field, it makes sense to display those suggestions close to that input field. Accepted practice is to display suggestions directly under the input field, so there’s our requirement.

But hang on! This “list location” requirement is about the on-screen list location AND the position of the list code in the page source. It makes sense to put the suggestions list near the input field on screen, but it’s just as important to put the suggestions list near the input field in the code for easy access for screen reader users.

Putting the suggestions list directly below the input field, on screen and in code, works best for everyone.

Example:

Requirement #5 – The auto-select must be keyboard-compatible

This is a critical for people who can’t use a mouse, such as those with a visual impairment, hand tremors or repetitive strain injury (RSI). Keyboard compatibility is also a WCAG 2.0 level A requirement (success criteria 2.1.1 Keyboard).

Requirement #5a – Up and Down arrows move through the suggestion list items, highlighting the current item

The user shouldn’t Tab through the suggestion list because that takes focus away from the input field. No input focus means users can’t keep typing to refine the suggestions. Arrow keys to the rescue!

Requirement #5b – Enter selects the highlighted suggestion and closes the list

The Enter key should close the list and populate the input field with the selected suggestion list item. Focus stays in the input field.

Requirement #5c – If the suggestion list is visible, Esc closes the list

If none of the suggestions suit then keyboard users can press Esc to close the list without changing the content of the input field. Focus stays in the input field.

The auto-select must be compatible with screen readers

We must tell screen reader users that the input field is an auto-suggest and that, depending on their input, there may be suggestions available.

To do this we’ll use Accessible Rich Internet Applications (ARIA), a W3C technical specification. It defines HTML attributes to improve website code semantics and provide information to assistive technologies (e.g. screen readers) about non-native HTML components like our auto-suggest.

A short segue – when and how to use ARIA

ARIA is powerful, and it can help you make your websites and web applications more accessible. However, it is NOT the solution to all your accessibility issues.

In fact, the first rule of ARIA is:

“If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.” – Using ARIA, W3C (https://www.w3.org/TR/aria-in-html/)

ARIA is like gap filler, it helps to patch things up a bit. But it doesn’t give you all the goodness that native HTML does.

For example, unlike a <button>, a <div role=”button”> doesn’t receive keyboard focus, doesn’t send Space and Enter keyboard events to the click handler, and doesn’t have visible focus. Browsers don’t know that a <div role=”button”> is meant to act like a <button>, the role attribute is just a descriptor used by assistive technology.

I’ve used <div>, an element type with no native semantics, for the suggestions list and its list items to satisfy the second rule of ARIA use:

“Do not change native semantics, unless you really have to.” – Using ARIA, W3C.

Requirement #6 – Make the auto-select work with screen readers

Requirement #6a – Add ARIA markup to the input field

Add role=”combobox” to the <input> field to tell screen reader users that the input field is an auto-suggest.

Add aria-autocomplete=”both” to the <input> field to tell screen reader users they can select from the suggestion list or type their own input.

Add aria-owns to the <input> field to link the suggestion list to the input field.

Finally, add aria-activedescendant to the <input> element and populate it with the id of the currently highlighted list item. The aria-activedescendant value changes as the user presses the Up and Down arrows.

Example:

Read more about ARIA:

• Roles: https://www.w3.org/TR/wai-aria/roles
• States and properties: https://www.w3.org/TR/wai-aria/states_and_properties

Requirement #6b – Add ARIA markup to the suggestion list container

Add role=“listbox“ to the suggestion list <div> to tell screen reader users it contains a list of selectable items.

Requirement #6c – Add ARIA markup to individual suggestion items

Add role=“option“ to each suggestion item, along with a unique id. That id is used by the aria-activedescendant attribute of the <input> element, whose value changes as users move through the list items with the arrow keys.

Requirement #6d – aria-activedescendant should match the currently selected option

As users move through the list items with the arrow keys, update the value of the aria-activedescendant attribute of the <input> element to contain the id of the currently highlighted list item.

Requirement #6e – Announce the number of available suggestions to screen reader users

Whenever the content changes of an element that has the aria-live attribute declared, screen readers automatically announce that content. Like a public address system, live regions enable us to make announcements such as “list status” changes as our user types in our auto-suggest input field.

Aria-live regions are polite, assertive, or off, determining when the user hears the announcement:

• Polite = the screen reader will finish what it’s saying before announcing the live region content
• Assertive = the screen reader will interrupt what it’s saying to announce the live region content
• Off = the screen reader won’t announce the content unless the user focusses on that region

With the auto-suggest, the change in the number of suggestions should announce immediately, so this aria-live region is assertive.

Example:

The content of this <div>, which isn’t visible on screen, updates every time the list length changes to trigger the screen reader announcement.

Conclusion

So there you have it. Fulfilling these requirements should make your auto-suggest widget more accessible.

My auto-suggest code, including commented JavaScript for the event handlers, ARIA attribute updates and list population: codepen.io/ademcifcioglu/pen/xdOyXv

The post Anatomy of an Accessible Auto Suggest appeared first on UX Mastery.

I get it. I really do. You want the best possible employees on your team, and it seems like the more skills that they have, the better candidate they are. You’re not the first to think this way – there’s plenty of controversy in the UX industry, and other industries too. 

When I worked in special events, I found that many jobs expected me to not only be an excellent event designer and manager, but also a fantastic salesperson. The problem was, if I was out driving around, trying to drum up sales, I wasn’t working on my clients’ events.

The same can be said for user experience design and development. The focus should be on researching and testing and planning out the best user experience for the users, not coding and debugging. UX designers should be able to focus on continuing to learn their craft, rather than aspiring to do everything. 

They are two different jobs

The best metaphor I’ve come across in my digital travels is that of the architect and the construction worker. The architect designs and plans out the blueprints for a building. A construction worker then takes those plans and builds the building according to the plans. You won’t find anyone expecting an architect to pick up a tool belt and build a building, but that is exactly some people expect from UX Designers in the digital space.

UX Designers research and plan out the apps and websites, and create digital blueprints in the form of sitemaps and wireframes. Developers build the app or site, using the digital blueprints provided by the designers as their guide.

While there needs to be some understanding of coding principles and technical frameworks, a UX Designer doesn’t need to be able to code to understand how it works. They accomplish entirely different tasks.

Takeaway: Hiring Managers should limit the number of skills listed on job postings to those that are only related to UX.

Divided focus means less quality work

Admittedly, there are rare Unicorns – people who have skills in both development and UX. Perhaps they started their career as a developer then decided to pick up some UX skills to make their resume stand out, or maybe someone told the UX designer that they needed to be able to write code so they took a crash course online in JavaScript or Ruby.

The key point is that they started in one then dabbled in the other – the majority of their skill set is focused on one field rather than both.

A good designer is constantly looking for better ways to design, and a coder is always looking for better, more efficient code. To take focus away from their own field and work makes it likely the quality could be diminished, and that’s never the goal of a product. According to this article from the Harvard Business review, “Quality improves when more of the work that goes into a final product is done by people who are good at it.”

Takeaway: Competent UX designers may feel like they are a bad fit for the job if they don’t have every UX and coding skill under the sun, so you may end up scaring off good candidates if you list coding as a required skill.

From ideation to creation: UX is the buffer

In the past, clients used to go to a web designer with their business idea and then the web designer would build it for them. If they were lucky, the client would have a good idea of their customers and the web designer would have decent design skills and it would be a successful website.  

Websites, however, are a dime a dozen and there are more bad websites than good. Nowadays, the focus is on creating good content and a good user experience so products stand out from their competitors, and people become repeat users.

That is why User Experience Design was created – clients can now speak with a UX designer who will help them research their customer base, figure out what their goals are, and create designs to bring to the developers, building only when the content and designs have been approved at every level. It’s a longer process, but it results in better products and fewer rebuilds.

Takeaway: Good research skills are essential to UX design and should be the focus of the job requirements. Job postings should also focus on research skills.

Wearing different hats is fine, but make sure they’re similar

Finding the right candidate for a position can be difficult, especially in smaller companies that need people who can multi-task and possibly work in other departments. This can be done right if one pays attention to the skill sets of each candidate. UX might not fit into the development or tech departments, but marketing, research, product design, and even project management would gladly welcome the skills and perspective of a UX Designer.

Takeaway: On job postings, list UX as your ‘must have’ skills, and then list similar skills as ‘nice to have’. Be open to those applicants who have a background that is not UX – they are more likely to have extra skills in another department.

Concluding thoughts

The field of UX design is surprisingly large considering its relative youth as an area of expertise. It can be difficult to wade through all the possible candidates and their varied skills and backgrounds.

Your job will be much easier, however, if you separate the user experience experts from the developers. Just remember the following points:

• User experience design and web development are two different fields of study that just happen to work together. 
• A dedicated UX designer and a dedicated developer will provide better quality work than someone who is both a UX designer AND a developer. 
• User experience design is focused on the users and how to reach them successfully, which creates a necessary buffer between the product idea and the product creation. This results in more effective products from the get-go and less need for rebuilds later. 
• If you’re combining roles in the company, combine UX designers with similar roles and departments, such as research, marketing, and product design.

Why do you think hiring managers expect UX designers to have such an extensive skill set? Let us know in the forums!

The post Dear Hiring Manager: UX Designers do not need to code appeared first on UX Mastery.

Here you are, fresh from a UX education, armed with a full complement of design tools and techniques. These will undoubtedly help you in your career. But, when you arrive at your first UX job you’ll find conditions a little different than they were in the classroom. You’ll soon see that the skills that got you ahead in school aren’t the same as the skills you’ll need at the office.

The classroom vs. the real world

Processes in the real world

In the classroom the process is dictated, but in the real world it’s the result that’s emphasized, with less regard for how you get there.

For example, in school you might be assigned to perform a heuristic evaluation or design a low-fidelity prototype. But on the job you’ll be tasked with answering questions that can be approached a number of ways. It’s up to you to decide how to proceed.

Deliverables in the real world

Source

In school, your deliverable is what you design. In the real world, it’s what ships to the customer that matters. There’s a big gap between those two and it takes a whole new set of skills to bridge it. More on this later in the post.

End goals in the real world

As a UX design student your goal is to design the best possible experience. In the real world, your ultimate goal is to help the company make money. Sometimes that comes from a great user experience, but other times it’s just doing whatever it takes to land a high-paying customer.

Assignments in the real world

The types of assignments you get in school are generally not the kind you get in the real world. In school, you were probably asked to design a brand new product or possibly redesign an existing one. But, as I mentioned above, when the main goal is profit, assignments usually involve adding new features to either get new customers or keep existing ones.

The trouble for UX designers is that adding new features often decreases the usability of a product. Your greatest, and most common, challenge will be to add features without negatively impacting usability.

Very rarely will you be asked to redesign an existing product solely to make it more usable. Redesigns only come about when an existing product can no longer accommodate new features (and thus needs to be redesigned so that it can).

“Doing the design isn’t the hard part…”

Before diving into how to succeed in the real world of UX, I’d like to share a story about real world UX challenges.

Take a look at this email sent from a UX designer at American Airlines, in response to a designer who criticized the AA.com website and offered up a redesign (emphasis mine).

The group running AA.com consists of at least 200 people spread out amongst many different groups, including, for example, QA, product planning, business analysis, code development, site operations, project planning, and user experience. We have a lot of people touching the site, and a lot more with their own vested interests in how it presents its content and functionality… AA.com is a huge corporate undertaking with a lot of tentacles that reach into a lot of interests…

Simply doing a home page redesign is a piece of cake. You want a redesign? I’ve got six of them in my archives. It only takes a few hours to put together a really good-looking one, as you demonstrated in your post. But doing the design isn’t the hard part, and I think that’s what a lot of outsiders don’t really get.

At another point he describes the design process as a “slog through endless review and approval cycles with their requisite revisions and re-reviews.”

Ugh.

Yet anyone who works in a large organization can identify with the cultural roadblocks like those described above. This should not deter you from your chosen career or lessen your enthusiasm.

The takeaway from this story is that Real World UX Success = Design + Delivery.

My own experience is similar. When I began my UX career I expected to spend my time roughly like this:

But what I learned is that, to be effective, it ends up looking more like this:

Read on for some strategies I learned that can help you avoid some rookie mistakes and act like a pro.

How to succeed in the real world

Many of the skills you’ll need to succeed as a UX designer in the real world are “soft skills.” Here are a few specific ones to help you get a leg up.

Tell a story, connect the dots

“Designers need to be able to articulate the value of a great user experience and frame design in the context of business goals.”
– Aarron Walter

Part of your job as a designer is to make a case for your work. Great designers need to know how to tell stories. Learn to talk in terms of how much happier users will be with your design. And to really knock it out of the park, work with the developers to craft a story about how the product can get from where it is to where you want it to go, so that they don’t feel left out of the process.

Small wins add up

At the end of the day (and your career, for that matter), you’ll be judged by what impact you had on the product, not what you designed in your cubicle. A fantastic design that never ships isn’t worth all that much in the real world.

A good way to get started is to focus on small wins. These serve two purposes:

1. They have a better chance of making their way into the product.
2. They build up a kind of credit history for you. This shows your colleagues and supervisors that you can get things done. In the real world that’s what makes you valuable.

Consistency is good example. Making things consistent across the UI is an easy case to make and it often simplifies the code. It’s not sexy, but it’s good for the product and the customer. And it’s hard to argue against.

These small wins are like taking out a credit card just to show the banks that you can pay it off each month. Each time one of your ideas gets into the product, however small, it’s like paying off your monthly balance. Think evolution over revolution to keep your design rhythm going.

Know that you’re building up that credit for a reason. Just like when you’re ready to buy that first car. You’ve paid your bill every month for that moment when you’re ready to ask the bank for a lump of cash. The better your credit is, the more likely they’ll be to give it to you.

It’s the same with UX. You keep paying your bills, making small improvements without being uncompromising so that you can eventually put your foot down when it matters.

When that time comes, you’ll be able to say no to a feature or direction that you think is bad for the customer experience because people will trust your judgement and track record. That’s the long game.

Build relationships

“The graph of impact tends to correlate with how many people you need to work effectively with. Once I realized this, I started to see my interactions with other people differently. It was no longer about winning battles and proving that I was right, but about developing stronger collaborative relationships.”
– Julie Zhou 

Finally, know that if you’re a pain in the ass to work with you won’t get a lot of traction in your job. A good designer is able to work with others and show them that they can make their jobs easier.

In addition to empathy for your users, you should also learn to understand the goals and points of view of your colleagues. You are all on the same team. Without a sales team to sell the product or a PM to get it out the door, you don’t have a job. Learn what matters to them and find common ground. Share the same end goals.

Go forth!

I hope this post has given you an idea of what to expect in your first UX job without discouraging you. UX designers are the difference between products that simply work and products that work simply. Remember to savor your victories along the way. You really do have the ability to make a difference for real people.

The post From the classroom to the cubicle: UX in the real world appeared first on UX Mastery.

You may also want to check out our comprehensive list of online UX courses.

Course Information

• Course Name: Become a Web Developer from Scratch!
• Author: Victor Bastos
• Hosted by: udemy
• Length: 232 lectures (approx 40 hours of video content plus resources). This course usually takes a couple of months to complete.
• Intended Audience: Anyone who wants to learn web development even if they have never programmed before.
• What You’ll Learn: The foundations of web development, including basic HTML, CSS, JavaScript, PHP, MySQL, XML, jSON, AJAX, and jQuery.
• Assumed Knowledge: None (aside from knowing your way around a computer). This course really is designed for absolute beginners that have had no experience with web development or coding before.
• Price at time of review: US $199

Review

My first impression of this course was wow. It is one of the most professionally put together online course that I have had the pleasure of reviewing to date. The production quality of the slides and the audio is excellent, from the introductory videos through to the live demonstrations. In good news, the quality of the information in those slides is equally as impressive. As promised, this course really is targeted at absolute beginners to web development. On that note, if you are not an absolute beginner, then you may want to skim through the first few lectures, which explain the history of the internet in some detail.

Post introduction, students are hand held through the process of downloading the necessary tools (text editors, browsers etc) required in order to complete the course, and a number of different options are suggested. By the end of the first section, course participants will be able to confidently write and run a simple webpage. The project files are downloadable, so those that are not so confident can dissect them to find out where they are going wrong.

Sporadically there are lectures (e.g bugs and PhotoShop) that don’t have any visual content, they are just a static splash screen with audio, which is a little mundane. Even a simple slide listing resources would be more useful, but that is a very small niggle.

I am really impressed with how incredibly thorough this course is. As well as coding it covers CMS use, hosting, Photoshop, free templates and a multitude of other aspects of web creation. Before I started I thought that the title was a fairly lofty one, but since completing the course I can say that it is very much appropriate.

The Presenter

According to his Udemy profile, Victor Bastos is one of the most successful instructors on the web. Starting out as a freelancer, Victor found his niche in teaching and began creating instructional videos and posting them on YouTube. It didn’t take long before he was discovered by the Udemy scouts, who encouraged him to post all his videos up on their platform, in essence creating the first version of this very course. That was back in 2012, and since then the course has been updated several times and has been translated into multiple languages. Victor is now the CEO of WebLabs – a digital content provider for e-learning platforms, and the brains behind OnClick Academy – an online academy that teaches web development in a community environment.

Victor has a great teaching style. His explanations are clear and are accompanied by easy to follow demonstrations. He dishes out little snippets of advice along the way that encourage best practices when coding. I enjoyed his teaching style and the pace at which he taught the course was spot on.

A million dollar course

I was entertained by the fact that while I was half way through this course I received an invitation from Victor to take his brand new course titled “How I Created a Million Dollar Course on Udemy”, which just so happens to be based on the success of this particular course. While I haven’t actually checked out the new course yet, I can see how this one hit that target, it is indeed a slick piece of work, for which I highly commend Victor.

Pros

• Concepts and processes are explained slowly and clearly, with step by step demonstrations;
• The slide and audio production is top notch;
• The course contains one exercise which follows through and is added to in each section; and
• I haven’t come across a more comprehensive course on the subject to date.

Cons

• It may be a little slow to start for those that know their way around the internet already and just want to learn to code;
• Some of the lecture content is strangely grouped (eg commenting lumped in with text formatting); and
• There is SO much content that this course needs to be taken over the course of several weeks (or months) to avoid brain overload.

Summary

In summary, this course rocks. If you are a UXer that has always felt insecure when it comes to your coding knowledge, put aside a few weeks over Christmas and take this course. You’ll come out feeling confident and ready to put your newly learned skills to the test.

• Content (how useful, up to date, practical, and comprehensive): 10/10
• Delivery (presentation style, pace, clarity, authority): 9/10
• Production (video quality, audio quality, editing): 9/10
• User Interface (reliable infrastructure, usable interface, convenient): 9/10
• Overall rating: 9/10

Take this course.

Become a Web Developer from Scratch! is hosted at udemy. Note: This post contains affiliate links, so if you do decide to enrol in the course, we’ll receive a percentage of the sale, to help pay the hosting bills.

The post Review: <em>Become a Web Developer from Scratch!</em> appeared first on UX Mastery.

I’ve captured my thoughts in this videoscribe as an experiment. Let me know what you think!

There’s really no reason not to at least learn some basic HTML and CSS. And with frameworks such as Twitter Bootstrap, being able to prototype a responsive design becomes achievable. Additionally, as libraries like jQuery become more refined and robust, the learning curve to adding transitions, animations and other interactions to your repertoire is much less steep than it once was.

Having an understanding and an appreciation for the technology that your solution will be built with means you can:

• communicate better with developers, by talking the same language
• be realistic when crafting your vision, and
• rapidly prototype ideas rather than be reliant on a developer to bring your ideas to fruition

Lochie Axon agrees with me:

I believe that a UX designer should at least dabble in programming and ideally be able to hack together small examples of their thoughts. This also helps reduce misinterpretation between the UX designer and the developers. It’s about understanding the limitations in which you’re working. UX designers don’t necessarily need to code at an expert level, but it’s ideal for one to learn enough to establish an understanding and appreciation.

Of course, I’m not suggesting that all designers should become developers. Far from it. Server-side programming is another beast entirely. Sure, if you’re curious about learning a language like PHP, Rails or Python, it’s not going to be time wasted—learning a new skill rarely is. But the benefits of being able to program on the server side for a user experience designer aren’t as obvious.

Client-side coding, on the other hand, has immediate application. Getting your head around the 80% of HTML/CSS that bring the greatest benefit is reasonably straightforward, and the process of receiving immediate feedback is actually pretty fun (and, as Bret Victor argues, helps understanding in a big way).

Perhaps your idea requires some cutting-edge techniques that are beyond your grasp. Or maybe the client has requested that the site function consistently in older browsers as well as new ones, and there are some difficult cross-browser intricacies to navigate. In these cases, don’t spend hours spinning your wheels, trying to solve that elusive CSS bug. Leverage your team members’ expertise when you need to.

Tools such as Axure, Balsamiq Mockups and others have their place. But if all you want to do is to communicate an idea, do some user testing, or explore an interaction, you could do worse than learn how to create your prototype in the browser.

To finish, here are some sketchnotes that I created from some of the sessions at Web Directions Code. Enjoy!

How much coding do you think UX Designers should be able to do? What do you think of this videoscribe format? Let us know in the comments.

The post How Much Code Should A UX Designer Write? appeared first on UX Mastery.

We’ve been bookmarking links to UX tools in our browsers for a while. Instead of hiding them away we thought, “Why not share these?”. Why not, indeed!

This list includes a few of the tried-and-trusty UX tools we use daily, as well as some that haven’t had the opportunity to take for a test drive but have heard good things about and definitely look like they’d be awesome. We’ll be adding to this list over time—it seems that every week there is a new wireframing tool, collaboration tool or card sorting tool!

With over 115 UX tools listed (and counting), you’re bound to find something in there that’s a good fit for you. We do hope to make this list as exhaustive as possible, so we’d love to hear from you if there are any notable omissions. We’ve also added the UX Tools page to our primary navigation (under the Resources menu item) so it’s easy for you to find whenever you visit uxmastery.com. Here’s a link:

• More UX Tools Than You’ll Ever Possibly Need

Over time we’d like to explore and document our experience with using as many of these tools as possible. For now, though, it’s just a bare-bones list, without context, grouped by the stage in a project that they are most likely to be used. We hope you find this useful!

What have we missed? Did you find a broken link? Help us keep this list up to date by contacting us, or submitting a tool to be added to the list.

The post 100+ Awesome Tools For UX Designers appeared first on UX Mastery.