Author: it-developer

Categories
Development

Angular Vs React Vs Vue

  1. Deciding which frontend framework to use can be challenging when developing a project. A couple years ago, React and Angular were the two main candidates when it comes to frontend development. However, over the last couple of years, Vue.js became a significant third player in the field. Each framework has its pros and cons that can assist or hinder your project. This blog will guide you to decide the best framework for your project.
  3. Popularity 
  • Based on the late 2018 chart, the number of jobs that demand a skill set of angular and react are roughly the same (with angular being slightly higher).
  • Vue is not as popular as React and Vue (only 20%).
  • Community is extremely important when it comes to these frameworks as it provides the users with various packages, extensions, and knowledge to make their work easier.
Table for Comparision of Angular, React and Vue
  • The chart above shows that Vue has many watchers, stars, and forks compared to React and Angular. This shows that Vue is completely improved and developed by the open source community.
  • The high number contributors for React and Angular show that these two frameworks are actually mostly developed by the actual employees of Facebook (react) and Google (angular).
  1. Migrations
  • Major updates of the framework you use can often mess up your code, causing you to rewrite or re-implement some functionalities of your work. For this reason, it is very important to know the update patterns of these frameworks. This will allow you to know when you should implement changes to keep things smooth and as compatible as possible.
  1. Angular usually goes through major updates every six months. On top of this, there also is a period of another six months before any major APIs are deprecated. This gives its users about a year of time to prepare for the changes. However, these major updates can be a double edged sword as a version difference can and most often will require its users to implement major changes to his or her code.
  2. React highly values stability as many big companies such as Twitter and Airbnb rely on it. This allows upgrades through versions the easiest in React.
  3. Vue usually keeps things very similar between versions. For example, about 90% of the API is the same between Vue version 2 and Vue version 3.
  4. Working with Vue Vs Angular Vs React
  • There are many factors that determine how good a framework is to work with.
  1. Size and load times
  • Sizes between frameworks are not as important. However, it is good to note that Angular is the largest out of all three.
  1. Components
  • It is important to note that all three frameworks are component-based.
  • Angular: Angular calls components as ‘directives’. Angular separates the UI part of components as attributes of HTML tags, and their behaviors in the form of javascript code.
  • React: React combines the UI and behavior of components. Same part of the code is responsible for creating a UI element and dictating its behavior.
  • Vue: same as React, behavior (javascript) and UI (html) is also a part of components. Vue is also highly customizable, making it easy to integrate with other libraries such as Bootstrap.
  1. Learning curve
  1. Angular: Angular is hard to learn. This is because Angular can be used as a complete solution. Angular also requires its user to learn TypeScript and concepts like MVC. Despite all of this, Angular still can be a good starting point to fully understand how the front end works.
  2. React: React provides its users with many documentations that aid them to get started with React. There are also plenty of sources on Stack Overflow that may help its users. This makes React easier than other frameworks to get started with. However, learning React can still be a challenge if its users are implementing additional functionality.
  3. Vue: Out of all three, Vue has the highest customizability, making it the easiest out of all three to learn. Vue also overlaps with Angular and React when it comes to core functionality such as having a component based structure. However, being highly customizable also makes it harder to debug and test.
  1. Other Facts
  • React and Vue are technically not really frameworks. From the MVC stand-point, these two only represent the View Layer.
  1. Five Factors to Consider
  • There are multiple factors to consider when choosing which framework to use:
  1. Speed: If you are interested in the speed and performance of the app, then go for native app development and the framework that supports it.
  2. Multiplatform apps: if you want the app to reach a wider audience, go for hybrid app development
  3. Ease of development
  4. App features: these features include things like the professional look, good compatibility with the mobile devices, specific UI standards…etc.
  5. Use of Hardware: Does your application depend on the hardware features such as GPS and camera of the device? You need to keep in mind and select the framework accordingly.
  6. Security: you need to know which framework provides the best security.
  • When it comes to speed, React is the fastest with its virtual DOM allowing a seamless performance and ensures that even high-load applications have fast rendering.
  • When it comes to cross-platform app frameworks, React Native also should be mentioned. React Native is built on JavaScript and it allows building mobile applications that work both on Android and IOS. (Although React Native is slightly different from React.js, they are similar enough to learn from one another in a very short period of time).
  • When it comes to the ease of development, as mentioned earlier, Vue takes the place with its high customizability and high similarly to React and Angular

When it comes to security, despite the fact that frontend frameworks have little to do with the actual security (as it is mostly done in the backend), Angular takes the spot. Angular is by far the most secure client-side web framework, offering highly secure features such as DOM sanitation.

Categories
User Experience

Top UI UX Agency of 2022

Top UX Agency 2022

Design is all about making human connections and creating real connections from seemingly impersonal platforms. Our goal at Idea Theorem™ has always been to bring our clients closer to their audience through creative and intuitive design.

Based in Toronto, Canada, we are proud to have ranked highly on Clutch as Top UI UX Agency in Canada ! Our Human Centered Design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand.  

Clutch is a third-party review and rating platform that conducts fact-finding research within the B2B industry. They employ a unique verification process to collect authenticated reviews to help them determine the best companies in every industry from all over the world.

In order for any company to join this prestigious leaders list, they need to earn several high-scoring reviews from their clients. We consider ourselves incredibly lucky to have the best partners in the world. It’s only with their help and support that we’re even considered for such an accolade. This award represents more than the quality of our work, but the bond that we’ve formed with our clients over the years as well.

“Being recognized by Clutch as a leader, it shows our dedication to our customers and determination to go above and beyond!” – Vinit Mahendru, Client Relations Manager for Idea Theorem™.

Top UI UX Agency in Canada

Top UI UX Agencies in Canada

Client Reviews


As a high-performing Clutch’s top UX agency, we have a handful of excellent reviews and we are excited to share some of the fantastic things clients have had to say about us!

Woodbine Entertainment Group

Client Review from Woodbine Racetrack

Deloitte

Deloitte Review
Client Review from Deloitte

Fidelity National Financial Canada

“Idea Theorem™ delivered a modern UI/UX design for our new SAAS platform. They were extremely professional in their dealing and understanding of our project need and our team. The work was delivered on time and met and exceeded quality standard. We will definitely be using Idea Theorem™ again“

A huge thank you to all of our clients for helping us achieve this success – we can’t wait to hear more from you and expand our service offerings as we receive feedback through and grow with Clutch.co. Also, check out our work!

Categories
Development

What You Need to Know About AODA Guidelines

AODA_2021

The Accessibility for Ontarians with Disabilities Act was first enacted in 2005 when the Legislative Assembly of Ontario proposed a set of standards to be applied to all public establishments to make them more accessible to Ontarians with physical and mental disabilities.

The world has come a long way since then, and regulations are being improved and updated continuously, catching up with the new technologies that allow more measures to be taken. When it comes to web accessibility, this parallel race between technology and accessibility is even more obvious. 

New standards have been added recently to the AODA guidelines and there is a lot of talk surrounding the latest deadlines to which all businesses and organizations providing goods to the public must comply. Let’s find out more. 

What Is WCAG 2.0 AA?

You will hear this acronym being mentioned a lot in relation to AODA because it represents the actual set of guidelines it reinforces. The Web Content Accessibility Guidelines are issued by W3C (the World Wide Web Consortium) and represent the most prestigious international standard for the internet. 

Although it’s not the latest version of standards W3C has published, WCAG 2.0 AA represents the standards to which Ontarian companies and organisations must comply to in 2021, as a part of AODA.

Who Should Comply to AODA 2021?

The deadlines for implementing steps of adopting the AODA regulations are making a lot of companies nervous. There are many articles on the web providing shocking amounts as the fines you will get for not complying on time, but the reality is not so dramatic. 

While the deadlines and the fines do exist, you can work with the officials to extend them and you can expect to be met with a reasonable and supporting attitude. 

  • January 1st, 2021

This is the main deadline of AODA, and what has been talked about a lot in the media, but it’s not the ultimate deadline of the act. This is when the following institutions and organizations must comply with the WCAG 2.0 AA standards:

  • The Government of Ontario and Legislative Assembly
  • Large organizations of 50 or more employees
  • All municipalities
  • Libraries
  • Educational institutions 
  • June 30, 2021

This deadline is for businesses and non-profit organizations of 20 or more people to file an accessibility report. The deadline has been extended, and the possibility of being granted another extension is there if you proactively notify AODA about your delay. 

Why Is AODA 2021 Important

First of all, ensuring access to people with disabilities to all web content is a social responsibility of every business or organization to ensure that every Ontarian has access to services, employment, programs, and spaces.

On the other hand, you must also consider the consequences of ignoring these requirements, which include penalties and fines. But this subject should not be seen as the ultimatum it’s portrayed in the media lately, but as a measure taken against companies and organizations that fail to implement accessibility plans after being warned multiple times. 

Common Accessibility Issues

If you are not sure where to start with the implementation of accessibility measures on your website or app, here are the most common issues faced on this subject:

  • Lacking alt-text on images

This is one of the most basic changes you will have to make on your website, in case it wasn’t already part of your standard procedure. Adding relevant alt-text to all the non-text elements on your website will not only make your site more accessible but can also help with SEO.

Make sure all your images are described concisely and in a relevant way so that a visually-impaired person would know what they contain. 

  • Missing semantic mark-ups

Use your content editor to properly mark the sequences in your text, so that the content can be read with an easy understanding of its structure and hierarchy. The proper way to do that is to mark your titles and subtitles with the proper tags within your HTML code. 

  • Vague anchor text

Anchor texts are the words that lead the user to another link. If your anchor text is vague and totally depends on the context, it is not properly adapted for accessibility. Make sure you explain where the link leads to and what that page is about.

  • Insufficient color contrast

The web design of your pages should not only be esthetically pleasing, but functional and readable. The contract of the text against the background should be 4.5:1 for normal text and 3:1 for larger text, according to WCAG 2.1 requirements. Graphics should also have a contrast of at least 3:1. 

  • Using text as image

Using text as an image is a common issue for the accessibility of content. Unless absolutely necessary (like displaying your company’s logo), avoid it and use text that can be read using assisting software. 

  • Updating content dynamically

While dynamic content is very useful in creating an engaging and interesting user experience, it might be a problem if the content cannot be announced by assisting technologies. 

Accessibility Tips 

As you can see, complying with the AODA guidelines for websites and apps is a complex project, and it should be done in time, removing the barriers for users with disabilities. 

The first thing you can do is update your procedures and standards following the basic standards presented in the above sections, and make it a habit. If your website or app shows compliance in the most important fields, it will be an easier job to become fully compliant in time for the official deadlines. 
Be sure to know what the AODA standards are and start by making a plan to become fully compliant with them. By training all your staff to follow these standards and auditing your content on a regular basis, you will get to the level of accessibility required by the Act.

Categories
User Research

A Guide to UX Competitors’ Analysis for User Research

What is the UX Competitors’ Analysis for User Research?

UX competitor analysis is a useful user research method that focuses on understanding your products’ competitors, essentially helping you better understand your market and goals. Idea Theorem™ has worked with many clients that required a UX competitor analysis to get actionable insights about their competitors’ strengths, weaknesses, mistakes to avoid and know what they are doing right. This article explores the benefits of the UX competitor analysis method for user research and how to conduct your research to help make your products’ user experience more effortless and enjoyable.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Benefits of Competitive Analysis 

Again, UX competitors’ analysis is essentially evaluating your competitors’ strategies in marketing and product design to identify strengths and weaknesses that you can utilize or avoid. Additional benefits include the following:

  1. Compare your product’s positioning, design and solution (and more) against competitors. 
  2. Identify market gaps that your competitors’ aren’t targeting, such as a new feature. 
  3. Understand the strengths and weaknesses of your competitors. 
  4. Help you inform and make better design decisions. 

When to Conduct a UX Competitive Analysis 

Consider conducting a UX competitive analysis during the user research phase (also known as the empathy phase™). The earlier you conduct a competitive analysis before designing your product, the better it is as it essentially helps you know what initiatives to take (such as the examples explained above about the benefits). 

However, UX competitive analysis is not a one-time process. Instead, companies should consider continuing their competitive research throughout their product, as a competitor can change their offerings or new competitors may emerge. Stay up-to-date within your market by taking advantage of the UX competitive analysis. 

How to Conduct a Competitive Analysis

Identify your Competitors

The first step into the UX competitors’ analysis is to identify your competitors. Your competitors can be group into the following categories:

  1. Direct Competitors: Companies that solve the same problem as your product or service. Their value proposition is similar to yours, with the same target audience.
  2. Indirect Competitors: Companies with a similar value proposition but targeting a different target audience. Or can be the same target audience, but with a different value proposition. 

Collect the Data 

After identifying your competitors, your next task is to collect data about them. Consider organizing your data into a spreadsheet (either Excel or Google Sheets) to make it more easily manageable. Part of the data collection includes:

  1. Basic information such as the company name, URL (direct or indirect).
  2. Value proposition.
  3. Target audience (user demographics).
  4. The advantages of the product, such as useful key features or solutions to the product. 
  5. Design details that work or do not work. 
  6. The disadvantages of the product, such as usability issues, missing features. Consider reading customer reviews to get that insight. 
  7. Identify the revenue streams (recurring revenue, transaction-based revenue, project revenue, or service revenue) and the marketing channels that they utilize. 
  8. Consider collecting the number of website visitors (even if these numbers are not accurate, you can still use those numbers as insights), app downloads, social media presence (followers, posts, etc.) and pricing. 
  9. Testing the companies’ products yourself. When test yourself, screen grab or screen record your journeys.
  10. The visual design of their product.
  11. Checking their websites or app store page to see how they promote their products (marketing tactics).
  12. Wait and load times of their products or website.

Analyze the Data Collected 

After identifying your competitors and collecting all the information you can capture, your next step is to analyze that information. We recommend first to start scanning through all the information to answer the questions:

  1. Are there any market gaps that have not been targeted by the identified competitors?
  2. Are there any solutions that can be combined that are not done yet?
  3. What are the product strategies? What are the marketing strategies? Why are the other competitors behind those excelling companies? 
  4. Are there any problems that you’ve identified the competitors have not addressed that? 
  5. Have you identified valuable insights that can be used on your targeted audience? 
  6. Are there any ideas or solutions that have not been done from the market?

Presenting your Data

Now that you have analyzed your information, your next task is to present your clients’ findings or business. When presenting your findings, keep in mind include actionable insights so your clients or business can act on those insights.

Presenting your findings can be presented on a PowerPoint presentation. Do not add all your conclusions; instead, focus on these following areas:

  1. Key insights backed with evidence, avoiding general findings. 
  2. Provide actionable insights that will impact and transform the business.

Avoiding Common Pitfalls 

Although UX competitors’ analysis is beneficial, it may lead to your user research pitfalls if done incorrectly. Here are some key areas to avoid when conducting your research:

  1. Avoid copying one competitor. UX competitors’ analysis requires you to look at several competitors and not just one competitor. By studying one competitor, you may potentially copy their entire product and market strategies. Also, you will miss opportunities to learn more from other competitors. 
  2. Avoid matching with competitors. Don’t duplicate existing solutions, which are the past solution, instead focus on today’s user problems. 
  3. Avoid not researching your competitors. It’s understandable to avoid copying your competitors, but it is essential to know their strengths and weaknesses when building your product. So that you can be a master plan to position yourself in the market. 
  4. Avoid studying irrelevant products and websites. Do not study websites because they’re big players or because you like them. Focus on competitors that are the right inspiration for your research, identify the proper competitor, and read the section to avoid identifying your competitors. 

Our Takeaways 

UX competitors’ analysis has been an essential method for our user research method. This method especially proves useful when working with clients’ products that have not been out in the market. Boost your brand awareness and product knowledge by conducting your own UX competitors’ analysis.

—

What Next

Idea Theorem™ is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Experience

Things to keep in mind while designing for web accessibility

Web Accessibility

Digital products can not be experienced in the same way as physical products. Some users with disabilities might not be able to see or recognize colors or move the mouse. This is why it is necessary to design digital products as accessible. Web accessibility has become an integral part of the designing for websites, SaaS products and mobile apps. While designing the digital products, the designers need to make sure that each element is understandable by the users or by the assistive technology like screen readers.

What is web accessibility?

Designing for web accessibility is the practice of designing for a wide range of people. This is for people who may have sensory, auditory, cognitive disabilities, and much more. In order to avoid having to re-design and implement accessible solutions at a later stage (especially since websites will be required to be accessible in the near future), it is best to do it from the start. Design with accessibility in mind right when you are at the stage of designing screens.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Why web accessibility in your design is important?

Web accessibility is becoming an essential part of the design, ensuring that websites and applications are accessible for everyone, including users with disabilities. Good design does not just mean making something look good visually, it also needs to function well. Can a person who uses a screen-reader use your website well? If not, do you think that person would consider your site to be well-designed? As designers, we have the responsibility to create digital work that is usable and provides a great experience. It’s not just people with permanent disabilities that will benefit from your accessible design, it is also those with temporary and situational conditions. When you design for accessibility, you design for everyone. 

How to apply web accessibility in your design? 

Accessibility Guidelines (WCAG) 2.1 site is a guide to WCAG 2.1, helping businesses to comprehend the guidelines and principles of WCAG 2.1 easily. We are gonna introduce some guidelines on how to meet WCAG 2.1 which you can apply to your design easily. 

Color and Contrast

Depending on how to use the color on your design, your design can be considered as good or bad. Because color usage affects not only users who have color blind or low vision but also other users. If the background and text color does not have enough contrast, users have difficulty reading the text. Moreover, enough color contrast has benefits for people who have low vision or color blind. Also, giving more than a minimum contrast level between text and the background increases the readability of the reader. Furthermore, smaller text compared to the larger ones requires higher contrast. If you are not sure how to check the contrast on your design, There are a ton of contrast checkers out there in the form of plugins for Figma, Sketch and browsers. Use those plugins to check the contrast.

Things to keep in mind while designing for web accessibility

Checklist:

  • Text and images of text have a contrast ratio of at least 4.5:1
  • Large text (18 point text+) or 14 bold text has a contrast ratio of at least 3:1
  • Interactive elements provide at least 3:1 contrast in different states such as focus, hover, pressed, and disabled. 

Reference:

1.4.3 Contrast (Minimum) (WCAG 2.1 Level AA)

1.4.11 Non-text Contrast (WCAG 2.1 Level AA) 

Keyboard Accessible

Keyboard control should be able to access all the contents on the page for users using the keyboard only. Some users only rely on assistive technologies to navigate through the site. If some contents are not accessible using the keyboard, they will easily miss the contents and they would end up failing to achieve their goals. If you are unsure your design meets all those requirements, try to use your keyboard only to navigate the design. Then, you will see whether it is accessible with a keyboard or not.

Checklist:

  • When the components received the focus state, other action doesn’t occur
  • Unless the user control the focus state, it doesn’t go to the next elements automatically
  • Focus state is visually visible
  • All the elements are accessible with keyboard only

Reference:

2.1.1 Keyboard (WCAG 2.1 Level A)

2.1.3 Keyboard (No Exception) (WCAG 2.1 Level AAA)

2.4.7: Focus Visible (WCAG 2.1 Level A)

Page Layout and structure

A clear layout and hierarchy allow users to get the core information quickly at a glance. When you form the structure of the information on the page, you have to keep in mind if all content is logically structured.  Moreover, users learn functionality while they are using the website and they expect the same functionality throughout the site. Also, for those who have cognitive, learning disabilities, or using a screen reader, the page layout and the organization of the contents should be well structured. In order to help them to understand the contents, try to group associated items together.

Checklist:

  • If you use the icon more than one place, these two should have the same or similar functionality throughout the site
  • Navigation and the placing of the contents are consistent
  • Users can easily identify sections and groups of information.
  • Headings and labels provide the topic or purpose
  • All non-text components have an alternative text providing information

Reference:

3.2.3 Consistent Navigation (WCAG 2.1 Level AA)

3.2.4 Consistent Identification (WCAG 2.1 Level AA)

2.4.6 Headings and Labels (WCAG 2.1 Level AA)

Text Spacing

Giving a better text space increases readability when the users read it. Tracking is often measured as a percentage of font size and having 130% to 150% for tracking is optimal. To find the proper tracking, attempt to try different percentages and apply to the one you think works best for you. Also, those who have low vision can read better and faster with increased lines, letters and paragraph spaces. In order to make your text more readable, these are the suggested text properties to apply: 

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Checklist:

  • Your text doesn’t disappear or get cut off when adjustments to the text styles are applied
  • Text, images, and other content do not overlap with each other
  • All buttons, form fields, and other controls are usable and not broken
  • Avoid using a scrollbar when the text size is increased. It is best practice to show all of the text in a sentence. However, it is acceptable to have to scroll horizontally to get to different sections of a page

Reference:

1.4.12 Text Spacing (WCAG 2.1 Level AA)

Keep Color Blindness in Mind

According to Wikipedia, Color blindness (color vision deficiency) is the decreased ability to see color or differences in color. It can impair such tasks as selecting ripe fruit, choosing to clothe, and reading traffic lights. It affects approximately 1 in 12 men (8%) and 1 in 200 women in the world. The designers need to keep that in mind while designing digital products for color blind population.

There are different types of colour blind including:

  • Protanopia
  • Protanomaly
  • Deuteranopia
  • Deuteranomaly
  • Tritanopia (rare)
  • Tritanomaly (rare)
  • Cone Monochromacy (very rare)
  • Rod Monochromacy or Achromatopsia (extremely rare)

The designs should not be dependent on the colors. Any color based component should be followed by a caption or description. Adding a pattern, texture or underline helps in creating a contrast between different components.

—

What Next

Idea Theorem™ is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Interface

A Guide to Design System

One of the challenges as your product scales is you work towards providing a standardized experience to your users. Your users start to expect certain ways that your product would behave even as you add new features to it.

In order to ensure a standardized experience is maintained even when you have multiple designers or developers working on the product, there needs to be a standard process and guidelines that can be followed. If a new designer joins your team and needs to work on a new feature – they can quickly understand the standard process & system and start delivering the experience expected by your users.

This is where Design System comes in to help you build the guideline that can be followed by developers and designers when building the product.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

One of the common misconceptions is that the:

  • The Design System is only for designers – the Style Guide
  • The Design System is only for developers – the Pattern Code Library

As we will learn in this post – a Design System is much more than that and plays a significant role in streamlining communication between developers and designers.

What is a Design System?

How can we deliver intuitive feelings and awareness of brand identity to users throughout the product? Having consistency and connection between elements helps users to understand and feel they are using the same brand.

The Design System is a unique guideline that follows the brand or company design style. Also, it sets minimum rules in order to maintain brand identity. It contains visual design elements as well as a pattern library that provides the standard of components that designers and developers use while they design and develop the product respectively.

The main goal of having the Design System is to increase the efficiency of the project, bring in standardization and maintain brand identity.

Why is the Design System important?

As the product grows, more designers and developers will be added to the team. As every new hire comes, new ideas, new patterns, new typography comes into play. This creates chaos. The system will help stop that chaos and confusion. It brings consistency and increases the speed of product development.

A Design System can be very useful for any organization big or small. Building a Design System takes time & effort, so here are some benefits:

Consistency

When multiple designers work together on the same project or if a new designer is onboarded in the middle of the project, they may struggle to maintain consistency in the design. Standardized design elements and UI components are created which can be used consistently and repetitively across the platform.

Scalability

Having a Design System, it helps the product scale effectively. With elements already approved, it is easy for the product design and development team to create new features and expand.

Communication

The design System acts as a single source of truth, that helps streamline communication between designers and developers.

Enhance User Experience

As an end-user of the product, the experience is very consistent throughout the product or products. As new features or new products get launched – the user is already familiar with the elements, patterns, themes of the product. This also helps reinforce the brand of the company – making it a double win!

What does a Design System consist of?

Before creating the actual design system, designers should ask themselves who will use it and how they will use it. Once they define the answer to those questions, they can start to consider where to start for the design system and what to put in it.

Design Principle

Building solid design principles are the foundation for building a design system. It helps capture what good design means to the company and helps the team make meaningful decisions based on these principles.

Style Guide

Style Guide includes typography, icons, colors, spacing, illustrations, tone and many more. Based on the style guide, users get a perspective of the brand. The Design System must define the standard on how to use each element. It should contain what to do and not do with elements and also how to combine elements together so that designers can accurately deliver the desired product experience.

Accessibility Guidelines

The Design System should clearly showcase the accessibility of the product. It should be able to define colour contrast, keyboard focus and navigation and screen readers effectively. Learn more about accessibility guidelines here.

UI Kit

UI Kit consists of UI elements that are like LEGO blocks. They are built once and reused throughout the product by the designer to create their design. In the Design System, their functional behaviour needs to be specified in order for the team to understand and use the elements effectively. They need to clearly state how the elements will look in different devices and screen sizes as well.

Master Control Library

Using the UI Kit, developers are able to add code and behaviour to each of the UI elements. Resulting in responsive and accessible code based components which can be reusable throughout the platform. These components are tested for functionality and WCAG requirements(using a screen reader), bringing in consistency and efficiency in the development team.

—

What Next

Idea Theorem™ is a Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Research

How to conduct usability testing during a pandemic?

Before releasing a product, or even after its release, it is a good practice for businesses to evaluate their products’ usability and effectiveness of use through usability testing. Usability testing allows us to identify usability issues as it’s crucial because it equally impacts all users, regardless of their ability.

During the COVID-19 pandemic, the Idea Theorem™ worked with several companies to conduct remote usability testing to ensure that their product is usable and aligned with their expectations. A remote moderated test is when a moderator provides the tester with tasks of testing a product, while in the comfort of their environment. In other words, the moderator and the testing are in the same virtual space, at the same time. As the tester works through the task, the moderator will observe and ask questions to understand their thought processes, frustrations and gather more data.

In this article, we share how we conduct usability testing sessions during a pandemic to help you understand that you can also take the initiative to help your users thoroughly enjoy and be satisfied with your product.

Want to learn more about how to conduct usability testing during a pandemic?
Download the Whitepaper>>

Phase 1: Planning 

Define Goals and Objectives

Before gathering insight from the usability testings, the design team conducted several team meetings with the client to understand their business’ goals,  their indicators of success that can be achieved from the usability tests. Often clients would specify specific flows or features in the product that needs to be tested. If not, the design teams will work collaboratively to help clients identify areas of concern that should be addressed through usability testing.

Writing the Test Plan 

usability test plan

After discussing with the client, we focus on creating the usability test plan. The usability test plan is like a blueprint that contains information such as:

  • The purpose of the Test: An overview of the purpose of the test, to inform both the team and future readings about the test that was conducted, who conducted and additional information.
  • The Methodology: An brief introduction to how the test was conducted.
  • User Profile:  An overview of the user profiles, that will be referred to help recruit the right testers.
  • Moderator Script: An script that a moderator consists of instructions, topics and questions that will be utilized for all test sessions, to ensure that all tests are consistent.
  • Task Cases: Task cases are written based on what typical users might go through while using the product.  These tasks focus more on a user goal that has an endpoint, in which users are expected to complete.
  • Questions (Pre-Test, Post-Task and Past Test Questions): An outline of open-ended questions that the moderator should refer to when asking questions to the testers.

Define Resources 

Finally, the design teams identify the resources and tools to utilize for usability testing. As mentioned previously, the design team used remote moderated testing during the COVID-19 pandemic. To conduct a successful remote test, we used the following tools:

  1. Lookback: A third party virtual space that allows us to talk to users, see what they are doing and record their interactions with the product. Using these types of tools will enable us to interview testers anywhere and anytime.
  2. Zoom: A video conference call tool used to start and join video conferencing from any device (desktop and mobile). Participants can join a meeting from an invite, share their screen and mute themselves. Zoom calls provide participants with a waiting space if the moderator has not joined the meeting. Moderators can also record meetings.
  3. Gotomeeting: Similar to Zoom, this software allows participants to join video conferences on both desktop and mobile. Moderators can also record meetings.
  4. Google Meets: Google Meets is handy if you do not want your participants to download any software on their desktop, simply open the invitation link and join the video call. Although, Google Meets may not support video recording.

Gathering Participants 

After the clients provide details about their users’ profiles, we find participants using the following methods:

  1. The client provides a list of testers that can take part in the tests. Our team then directly contacts the testers on behalf of the client to set an appointment.
  2. The design team sets up ads (for example, Linkedin) to recruit participants.
  3. Gather testers from well-established multicultural and general population databases. These databases help us target and recruit highly specific testers.

Phase 2: Facilitation 

Usability Testing Sessions

In this phase, the design team conducts usability testing sessions. The moderator and the tester will communicate with each other throughout the test. The moderator will guide the testers through the purpose of the test, the task cases, and the questions. Remote and in-person usability testing differ in these following areas:

  • In-person, Moderated Testing: Tests where the moderator and the testers are in the same physical environment, face-to-face interaction. 
  • Remote, Moderated Testing: Tests where the moderator and the testers are in the same virtual environment, video call interaction. 

The benefit of remote moderated tests is that we can invite many observers in the tests to watch. Still, the tester will be unaware of the observers, making them feel less intimidated.

Analyzing Data

After the completion of the test sessions, the design team analyzes the results from the tests and draws conclusions (why do the issues exist?). For the task cases, we focus on the following:

  1. Effectiveness: How effectively the user successfully achieves each task.
  2. Efficiency: The average time it takes for participants to complete each task.
  3. Satisfaction: How satisfied the users were with the product.

We organize the task case data based on issues, actions and comments per task. The usability issues are prioritized by ranking them based on impact (if solved) and the severity of the issue (critical, serious or minor). We show the highest priority issues first, including the evidence and presenting the solutions. In addition, we provided insights about common usability issues and a UX analysis from a UX perspective. UX recommendations are created to solve the identified usability issues. We also provided UX best practices to leverage to enhance the user experience. Apart from the usability issues, we also present the positive findings from the test sessions.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Phase 3: Final Report 

After the analysis of the data, a final report is created to present the results of the usability testing sessions. When writing the final report, we focus on writing the report in such a way that if it is shared with that person that does not know about the project, they can understand quickly. The usability report provides details about the entire usability testing process such as:

  • The purpose of the Test: An overview of the purpose of the test, to inform both the team and future readings about the test that was conducted, who conducted and additional information.  
  • The Methodology: An brief introduction to how the test was conducted.  
  • Recruited Testers: The names, occupations, age and contact information of all the recruited participants.
  • Overview of Task Cases: A list of all the task cases presented to the testers.
  • Task Case Results: Results of the task cases. This includes the number of errors, success or failure of the task per participant.
  • Tester Feedback: Feedback from the testers from the survey that was sent after the test session.
  • Identified Behaviour Issues: An prioritized list of behaviour issues based on the severity.
  • Recommendations: A list of recommendations to solve usability issues.
  • Observations: A detailed overview of the observations from the test sessions. We keep this section detailed so the reader can refer to whenever they review the results of the task cases.

What Went Well 

Working with a team of designers helps speed up time in preparing the reports and it’s beneficial when assisting in the testing sessions. Sometimes as moderators we may miss key information to identify, but another designer can help keep you on track to ensure all testing sessions are consistent. Using a third-party platform that specializes in remote testing is more effective than using standard virtual meeting spaces since the recording tools and webcam are implemented into the platform. In addition, these are more professional to use as it creates an introduction and waiting for space for the tester while the moderator sets up.

Things to Keep in Mind

Learning Curves

Leave some dedicated time to learn about the resources that you will be utilizing for the usability test. Talk with a customer representative to conduct a product demo and ask questions. You should be well-aware of the constraints, shortcuts and features of the resources to help you conduct test sessions with ease.

Help Testers Setup

Spend some time prior to the test session to help your testers set up the virtual space. Ideally, you do not want to use your test session time with the setup process. Otherwise, create a video tutorial of how to set up the virtual space and share it with your testers.

Product Demo 

Have your client walk you through the entire platform and spend some time yourself using the product itself. You want to know all the ins and outs of the product, nothing should surprise you as your testers interact with the product. Testers may ask about the product, and you should be ready to answer any questions.

Conduct a Mock Test

Conduct a mock test internally with your team, to ensure that the usability runs smoothly. Be aware of inconsistencies within the test, and make sure that the third-party platforms work well with your test.

Conclusion 

Overall, the remote moderated usability sessions were successful. Moving forward, we would continue to use remote moderated usability testing as part of our design process, along with in-person moderated usability testing. It is beneficial, especially when conducting usability tests outside of Canada.

You can also download the whitepaper here.

—

What Next

Idea Theorem™ is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Research

Usability Testing Vs. User Testing – Why it is important?

In the world of software and application development, there is often some confusion when it comes to usability testing vs user testing. Even experienced product owners, VPs of Technology and CIOs, and developers often confuse these two concepts.

So, in this article, we’ll break down the difference between user testing and usability testing – and explain why each one is important.

User Testing Is Need-Based: Does The User Need To Use My App?

User testing, as a concept, is not actually related to user experience (UX) at all. Of course, a great user experience is always something that should be highly-desirable – but the purpose of user testing is to test the usefulness of your app concept, and whether anyone will actually use it.

Let’s say you wanted to create an app that was built to promote bicycle safety by using GPS, gyroscopes and motion sensors in a smartphone to detect crashes or potential emergencies, and send a message to an emergency contact if a sudden stop or collision is detected.

It would involve doing research with potential app users, such as commuting cyclists or cycling enthusiasts, through focus groups, interviewing bicyclists to see if they would use this app, doing field studies to assess its effectiveness, and researching other apps that may be competitive in your space.

This process of user testing allows you to see if there is a large user base for your app – and if it actually solves a real-world problem, which is essential for the success of any software application.

Usability Testing Is ExperienceBased: Are Users Able To Use My App Effectively?

Based on the findings from user testing – you initiate the design process to build the UI of the App. Once a prototype is created, it’s time to move to usability testing. This is when you’ll start iterating upon your current app design, to make sure that it’s intuitive, convenient, and easy-to-use for those who install the app.

Let’s use our above example of a cycling safety app again. After your team has established that there is a need and demand for this kind of product, you’ll then move into usability testing. You will observe people using your app, and ask yourself questions like:

  • Is it easy to understand how to use the app?
  • Should it stop and start automatically, or run in the background?
  • Are there additional features you could add? Would they add to the experience – or detract from it?
  • Can you streamline the design or interface?
  • Is it pleasant to interact with your app?
  • Is the app stable and usable across every intended device or range of devices?

By iterating upon your design and getting feedback from real-life users, you’ll be able to answer these questions – and many more.

User Testing And Usability Testing Help Make Your App The Best It Can Be!

A successful app can’t just be streamlined, beautiful, and easy to use. It must also solve a need. Take Uber, for example. Not only is it easy to use and convenient, it helps solve a problem – slow, inconsistent taxi service – that has plagued us for decades.

That’s why understanding the difference between user testing and usability testing is so important. By building apps that are both useful and beautiful through both user testing and usability testing, you’ll be able to ensure that you lay the foundation for a successful app or piece of software.

Categories
User Experience

How Product Managers can drive business results through UX Design

A successful product should consist of user experience (UX) that meets the needs of the targeted users and ensures business goals are met. UX designers focus on how to align the product’s user experience and business goals together, which is the key to the project’s success. In this article, we’ll break down how the UX design process can help improve the product’s development and explain the importance of product development’s key phases.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

Role of Product Managers

Product Managers are important players in the development of the product. They are a bridge between different teams (including design, development, business and marketing). They are a thin balance between different teams and focus on achieving business and user goals effectively through planning and management.

Product Managers define the goals and objectives of the product and how to achieve those. They know the product inside out and are able to define the type of users effectively.

There are 2 ways Product Managers roll out their product:

  1. The product is directly released to the assumed users and get feedback
  2. The product starts with an idea, get it user-tested and then work on creating the product.

Everyday UX for Product Managers

Product Managers need to know a lot about the product which includes business and user objectives.  For example, an app that provides healthcare advice to women. The product should be able to understand women’s needs and health issues and provide the right solutions to their customers. Better the app is able to understand the women’s health issues, more users will be using the app.

For Product Managers, UX has become an essential part of product development. They have to look from the user’s perspective if they want the product to be successful. If Product Managers understand the user needs and thinking, they will be able to solve the right problem and reduce the number of re-dos and or worse stop from making the product failure. With a better understanding of the UX, Product Managers can help in

  1. Growth of the product,
  2. User retention and engagement,
  3. Customer loyalty,
  4. Increase conversion rates,
  5. Save time and money.

What Does a UX Process Look Like?

When thinking about digital products or its features, Product Managers should understand the business objectives and be able to answer the below questions first:

  1. What problem are we solving?
  2. Who has this problem?
  3. What do we want to achieve?

By answering these questions, product managers and UX Designers will be able to create an amazing user-friendly experience.

By following the UX design approach, it will help digital product’s reach it’s maximum potential. UX design process can be beneficial to all types of companies (big or small, corporate or startup) and at all stages of the product’s life cycle.

Different projects might require different processes but overall below process is usually standard.

The human-centred design is the practice of implementing human perspectives throughout the design process. The UX design process begins with empathizing with the users before the ideating solutions. UX designers take into consideration the needs of both the clients and to build a successful product.

PHASE 1: Empathy Phase™

Step 1: Understanding Your Business Needs

Gathering information from the business and their needs can help UX designers to determine further steps. It can provide insights such as:

  • The issues and needs they identified.
  • Insights on what matters to them.
  • Their needs and wants from the project.

Identifying business needs help define the project’s success, such as providing insights into what the success metrics would be for the project. Stakeholder interviews and focus groups are research methods that help identify those insights.

Step 2: Understanding Your Users – What Users Need

This phase primarily focuses on user research to gain a better understanding of the targeted users. Understanding the target users is crucial, as it helps develop solutions and design decisions. Your product will likely have users from a variety of backgrounds, demographics, behaviours, needs and pain points.

As a result, your product should ultimately accommodate to those factors. Below are the tools that help UX designers to empathize with users needs and concerns.

Takeaway

Empathy design ensures that UX designers are ideating solutions and design decisions that are unbiased, but rather focuses on designing a human-centred product. UX designers’ role is to provide creative and meaningful solutions for the users, which can be achievable by first understanding both the business goals and users’ perspectives.

PHASE 2: UX DESIGN PHASE

After establishing the business goals and user needs, the next phase into the product’s design is user experience (UX) design. UX design is not only about creating a product that is beautiful, streamlined, and easy to use. Instead, it takes a step further to design experiences to achieve specific goals with effectiveness and satisfaction. User experiences should also solve the issues that were identified in the Empathy Phase™.

Iterative Process: May require further iterations and refinements to the solutions before developing. Usually occurs after validating the solution in user testings.

Step 1: Ideating

Ideating means to generate multiple ideas or concepts, for the identified pain points. The ideation stage is an effective method that challenges UX designers to think outside the box and explore uncharted areas. The ideation stage is where innovative, groundbreaking and creative solutions are created that can fill the missing element in the users’ experience.

Step 2: Rapid Prototyping

This step consists of quickly creating visual representations of the functional elements and user experience flow, through wireframing and wireflows.

Step 3: Feedback Session

Feedback sessions validate and prioritize the solution(s) to the intended users, to ensure that users find it useful, meaningful and solve their problem. If the solution(s) are not meeting users’ expectations, UX designers will return to ideation. To conduct a successful feedback session, consider using user testings methods to gain feedback.

PHASE 3: USER INTERFACE (UI) DESIGN PHASE

The final designs of the product are developed in a graphical layout. UI focuses on the look and feel, interactivity and responsiveness. UI design helps guide users through their journey with the product using visual elements.

List of deliverables for UI Design Phase:

  • UI Design
  • Design Research
  • Style Guides and Assets
  • Clickable Prototype

PHASE 4: USABILITY TESTING PHASE

The purpose of usability testing is to ensure if the targeted audience is able to use the product effectively. The goal is to ensure that the product is convenient, easy-to-use and intuitive.

Conclusion

Now that you have a better grasp of common UX myths and misconceptions, you should have a better idea of how user experience design is important for achieving business and product goals — it’s not just about making things look good. To learn more about how UX design can help your product grow, download our Product Manager’s Guide To UX.

—

What Next

Idea Theorem™ is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.

Categories
User Experience

Product Manager’s Common UX Myths and Misconceptions

Idea Theorem™ interviewed several product managers to explore how exceptional product value is formed by integrating user experience design into product development. In this post, we’ll discuss our findings and dive more into product managers’ most common UX myths and misconceptions, so you can better understand what UX design is and how it can drive real business results.

Want to drive better results from your product?
Download the Product Manager’s Guide To UX >>

We asked Product Managers, UX Design is…

We found that product managers from enterprises are integrating user experience design practices into product development because they want the product to have essential elements such as:

As a result, many product managers find that UX design is extremely impactful in developing products that are a composite of end goals.

For Our Projects, UX Design is…

What is UX?

UX design helps understand the user and business needs to create a successful product — that product will be a holistic combination of both sides. UX is about ensuring that customers can find value in a product by enhancing the experience as they interact and engage with it.

UX designers need to think about how the users will feel while using the product and how easy it will be to complete any task.

From Our Survey, UX Design is defined as…

While UI Design is defined as…

Debunking Common UX Myths & Misconceptions

1. “UX” is not “UI”

One of the most common UX myths. Although User Interface (UI) is very important conjunction to UX, UX is not UI. UI specializes in crafting beautiful designs to accomplish the aesthetic needs of a product. But it can also be responsible for the interaction between the user and the product, such as the location of a button.

In contrast, UX specializes in human engagement. It analyzes the experiences users face and encompasses all the elements of a product. This includes the usefulness and accessibility of the services offered, the functionality of the interfaces, and the overall experience and desirability of the product.

User experience begins by understanding the consumer to ensure the effectiveness of the product and service. By understanding their needs, user experience design can help to assess what is required to ensure customer satisfaction, loyalty, and to assist in delivering revenue through a competitive edge.

2. “UX Design is necessary from beginning to end”

UX Design is not only a step in the design process. It is a continuous cycle that focuses on a customer’s relevant experience with a product or service. Before carefully carrying a product through the design process, it becomes an important aspect in understanding the customers and their needs to keep evaluating this even after the product has been produced.

It is a never-ending cycle that analyzes user engagement and this is what can bring a competitive edge to a product or service.

3. “UX Design is NOT only for Digital Products”

UX Design is much more than just analyzing the interactions of a user and a screen. It can be integrated into the company and it’s services.

4. “UX Design is NOT only about Users”

User experience design ensures we can provide the optimal experience for a user, however, this is defined by what the business goals and objectives are placed. A product or service exists because of business objectives and this cannot be satisfied without understanding and addressing the problem, and creating an attainable solution that will satisfy the customers and the business.

Conclusion

Now that you have a better grasp of common UX myths and misconceptions, you should have a better idea of how user experience design is important for achieving business and product goals — it’s not just about making things look good. To learn more about how UX design can help your product grow, download our Product Manager’s Guide To UX.

[optin-monster-shortcode id=”j0xyyd17y6nm36t8po3z”]

—

What Next

Idea Theorem™ is Toronto based UI UX Agency. We create simple and usable products for web and mobile. Our human-centred design approach lets us understand your customers, identify their pain points & deliver solutions that enhance their experience with your brand. Contact Us if you have any questions and we will be happy to help you.