17 May 2021

The React framework advantage

We’re big fans of React at Catch. But just what is React, and how do we use it?

React is a JavaScript library used in web development to build interactive elements on the web. The main advantage for end users is the fast interactivity they’re provided with, as there should be very little reload time when new data is presented on their screen. This, in turn, leads to a more positive user experience.

The React advantage for End Users

As you probably know, we’re Drupal experts. Whilst Drupal is an excellent CMS for general website usage, there comes a time when users want a bit more which is when we reach for React to build a ‘web app’ to sit on a page.

Think of Google Maps, for example. What a pain it would be if there was a noticeable page refresh (such as clicking on a link and waiting for the page to reload) each time you zoomed in or out or panned across the map. React helps eliminate this friction, allowing elements to quickly load on a page as the user interacts with them.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

ReactJS.org

The React advantage for Developers

React is a JavaScript library that at a fundamental level is used to build many components each with their own independent ‘state’ that tells the component what to do. If you think of a button on a website as a component, the state might include the colour, the text (e.g. ‘Click Here’) and the URL (e.g. ‘https://www.catchdigital.com’). As you build out your React project with components, it allows you to avoid the time-intensive process of coding and testing over and over meaning you can build new features and scale your application.

Developers can reuse the button all over the web app and update the ‘state’ of each of these using ‘props’. The advantage to this is that every button on the site will look and behave in the same way. Of course, components will be much more complicated than just a button, and can do more than just take a user from one page to another.

Below are some helpful definitions to understand the terminology used when discussing React.

  • State - The current data that is within the component, any time this is updated and the state changes, a re-render will take place
  • Props - This is how information or data is passed from one component into another. For example if we reuse the button analogy where have colour, text and url managed in the state of the button, we could also have disabled as a state. If the button component is associated with a contact form, we could set the disabled state of the button to be true until all of the fields of the form are completed and then update the state of the button component using props

Developers are able to reuse tested code and know that it will stand up to stress.

The React advantage for our clients

We now know that React is a data driven tool, and allowing our clients to manage the content for a data driven API means we can treat Drupal as a headless CMS for the output of JSON in an API format. New content can be created in the same way new pages can be created. The same goes for content within each page, reducing what could be a time intensive process to update their site (or multiple sites from one data source).

Some examples of our use of React

From quickly adapting to what the user is looking for on the TV Guide on our Freeview web platform:

To helping students filter and book available accommodation in London via IQ Student Accommodation:

To helping global telecommunication company SES provide users with the ability to search for satellite footprint information using their “Our Coverage” tool within their existing Drupal solution:

Or providing the Internet Advertising Bureau (IAB) Members with a quick and easy way to view Adspend data in a graph that instantly updates as you change dates and add filters:

Catch is experienced in offering our clients effective solutions that take advantages of all the benefits of React.

If you're ready to start your journey and see how we can help you improve your connection with your audience through smart technology like React, don't hesitate to get in touch.

27 Nov 2019

UX, bias & the good fight

Hi, I’m Michael Reiss, one of the UX Designers in the strategy team here at Catch. I'm hugely passionate about research and the value it brings to UX and digital strategy work, and I particularly champion the customer through my work. In the below I talk about the very real possibility for bias to interfere with research and share my tips for remaining objective.

If you've opened this post you may already be familiar with audience research. And not only are you familiar, but you're convinced of its benefits. The likes of Amazon’s Jeff Bezos, Glossier’s Emily Weiss, and AirBnb’s Brian Chesky and Joe Bebbia have attributed their success to having an understanding of their users. Instead of continuing its praises, I think it’s more interesting to consider how even those of us who conduct audience research for a living are not as objective as we think. 

According to the below study, we're actually pretty terrible at being objective, despite thinking we’re better at it than those around us.

Out of a sample of 600+ people, 85% believed they were less biased than the average person. This study led to social psychologist Emily Pronin coining the term "bias blind spot," which explains how not only does everyone have cognitive bias, but everyone also believes they are less biased than others.

Out of a sample of 600+ people, 85% believed they were less biased than the average person.

(Source: Princeton Publications)

Yikes.

And while it’s great that just reminding ourselves of this bias is a huge step in avoiding it’s potential influence, there are a few measures we can take to prevent falling into the bias trap.

The numbers don't lie? 

When we begin the research process, it's common to begin by deciding who to interview and what to ask them. For example, we've decided to collect user input for a sports drink company. Great, right? While perhaps a bit exaggerated, the below may sound familiar, especially when time and budget is tight.

We know the product so well, we have lots of site data and market research, so we know what our audience thinks of us. Not only are we the users (because we happen to also drink sports drinks), but we can imagine what our different audiences think of us and our competition.

Unfortunately, we're likely too engulfed in the day to day, to get accurate data from speaking just within our immediate teams. And if we do decide to conduct user interviews, bias can influence who we choose to interview (eg failing to consider all relevant groups of people) and the types of questions asked (eg leading questions).

While we've all heard that "the numbers don't lie," suggesting quantitative data is always objective, what about the steps we take to find this data, or how it is collected? That initial email request for specific datasets, or the Google search and selection of the study that most affirmed your hypothesis? That darn bias sneaks in yet again!

So how do we avoid UX bias?

  • Looking as far and wide as possible: of course make sure to source for any and all existing information on audience. But don’t stop there. Ensuring that we’re engaging with people from multiple departments, at different levels, and asking who they believe their audiences to be (and who they aren't, and why? …) The process of collecting multiple perspectives and asking them to explain their reasoning will provide us with great insight. 

  • Try to do the above activity in person, if possible during a workshop. Invite people from different departments with different levels of seniority. Separate people from their managers or those they work with on a daily basis to encourage open and honest input.  Use ice-breakers to help people loosen up and feel more comfortable. 

  • When you determine who your audience is, print out their persona and make sure everyone on the team can see it as a reminder of who you're working for! 

  • Collect a list (or slack your team members) of the most surprising information you've learned during your audience research. The habit of light heartedly calling out your assumptions and reminding yourself of surprises leads to a more open-minded approach to setting up audience research.

  • Ensure the whole team stays aware of the real possibility of having to pivot the project based on future research findings. We all need to be aware and educated of this possibility: providing updates on the research process as it progresses definitely helps.  Don’t be afraid to expose all team members to rough & ready “work in progress” brainstorms to give exposure to the work and provide space for far and wide input. It may take some initial effort, but you'll save yourself from future stress by having the flexibility to provide the best insights and recommendations.

  • The good news among all of this bias is that our users will quickly prove or disprove assumptions by telling us what they need, want, and expect! We just have to be comfortable with having assumptions disproven and allow time to adjust direction of research.

Bias can be hard to shake, but we're adept at avoiding it’s traps and giving accurate insight: if you’re thinking about audience research or wider UX strategy, we're here to help. 

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com