• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

Product Development

Jan 31 2023

Photography For UX Designers: The Top 4 Tips To Make The Most Of Online Imagery

Overview

Photography is a crucial part of designing a layout or banner. When thinking about an image to place with text, whether it be overlaying on the image or underneath, above, or to the sides of an image, a designer needs to consider two key factors:

  • Does the image make sense?
  • Does the image have a conversation with the layout?

Elements such as the dynamic imagery of people interacting, strong lines, action, or diversity are all ways that design and imagery can speak to each other.

No alt text provided for this image

Using these elements helps create a story for the viewer to interact with and incite a more personal experience on a larger scale. To have a viewer relate to content is achieving the ultimate goal: Fostering an emotional experience is gold-medal status.

1. Ensure The Image Speaks To The Content

When developing the design of a page with photography in mind, the closer the image relates to the content, the more likely the viewer’s eye moves around the page in a pleasing manner.

Strategically placing images on either side of the screen will help the viewer have resting time between content, which creates a “visual storyline” for the page. The images also help the user stay engaged with the page.

No alt text provided for this image

2. Photograph Composition Builds Directional Sight Lines

Make sure that the main element of the image—such as the people or subject matter— is placed to the right or left. (The exception being the positioning of the direction of the content in an advertisement or banner) If it’s in a layout, making sure to have the image point in the direction of the content that viewer’s need to be directed to focus on first, is crucial.

No alt text provided for this image

3. Appropriate Image Content Enhances The Story

Make sure the subjects in the image are both dynamic as well as inclusive. All subjects should tell a story to help the user understand what the content will say, like the synopsis of a paragraph.

No alt text provided for this image

4. Complimentary Color Theory Provides Both An Aesthetic And User-Friendly Experience

Studies have shown that a dark background with the text knocked out makes for a more eye-grabbing advertisement.

For example, if the image is being used for an advertisement, it’s easier for users to read smaller text if it’s dark text on a light background.

It’s imperative to make sure the section where the text sits is not too busy. The user needs (and wants) to authentically experience content without strenuous distraction.

No alt text provided for this image

Closing Thoughts

Keeping all these elements in mind while looking for imagery to “illustrate” a layout or advertisement will help any user have a better user experience.

Written by Kaela Coppinger · Categorized: Design UX/UI, Product Development · Tagged: design, Designers, INRHYTHMU, learning and growth, product design, product development, ux, uxui

Jan 24 2023

The Importance Of UX Implementation In Financial Institutions

No alt text provided for this image

Overview

As a UX Designer, one will experience a multitude of industries across their career. Two of the most historically challenging areas, across the board, to assert major design change have been Healthcare and Financial.

When approaching an expansive operational change pitch, its important to succinctly addresses the major pain points from a creative/UX view when working with corporate stakeholders that have a seemingly opposite set of skills and expertise (ex. math vs. art).

The challenge becomes: how do we shift traditional “path of least resistance” thinking to a mindset visualizing the importance of forward progress?

The following ten strategy points are key to informing a current and/or future financial services client of the progressive mindset behind updating their UX infrastructures:

1. View Design As A Methodology, Not a Package

No alt text provided for this image

Banks and financial institutions perceive design as a package while fintechs see design as a consumer-centered approach, but let’s call it what it is; a lack of understanding.

Design has been viewed by many clients as “paint” and not “structure,” and that is specifically why it’s so important to educate stakeholders on Design Thinking and Methodologies. It is so much more than making a logo, picking colors, and playing with fonts.

Design-based decision-making should not be led by Product Owners, Project Managers, Developers, Engineers, or even Stakeholders. They can provide unique perspectives, present opinions on research, provide reasonable requirements, all while engaging with in-depth data and applicable feedback. But the rest should be in the hands of the Designer. 

2. Increase The Scope Of UX Design Influence

No alt text provided for this image

UX experts are trained to be user-centric while curating and crafting experiences that ensure user satisfaction and delight. Thinking that “anyone can do this” is pure hubris. Yes, everyone can be creative. No, not everyone is good at it.

Hire the right talent and give them the freedom to explore.

Financial apps must be about ease-of-use and intuitiveness before tackling how pretty it looks or stuffing as many features in as possible. UX, as a design method, ensures that the user is fairly represented against the requirements of the need. Stakeholders typically have strong opinions on design, but they aren’t likely to be the ones using it everyday. It’s acceptable to push back, but you should have the research to support it.

3. Challenge The Banking Legacy

No alt text provided for this image

We should remember that it takes two – Product Owners and UX Leads should be solidified as the cornerstone of every good project from the very beginning. You need both of them to always be present: the client advocate and the user advocate.

Traditional corporations rely on structured hierarchy to get things done. However, inserting the pragmatism of Design allows for individual agency and decision-making to happen on a more detailed level and that is where the trust is needed. Your UX folks are smart. Let them do their thing.

The core takeaway is that UX people are needed before the project kicks off and should remain attached during the entire duration to capture data, extrapolate findings, align with visuals, and prepare to iterate on the next version. They help tie it all together. Let the User Experience team understand how users experience your product.

4. Switch From Fragmentation To Ecosystem

No alt text provided for this image

“Fintech”, as a label, is shifting to include any new products and/or brands that are promoting digital as the main primer for change within their organization and offerings. Banks are resistant to this type of change simply due to how their control of wealth is dependent on small static changes over long periods of time: Take money, sit on it, make interest, share dividends.

Fintech is breaking down walls that banks cannot adapt to, like cryptocurrency, DeFi, and other new concepts. Not all banks have invested in fintech, but all fintech have some form of banking service. 

Many traditional banks failed due to the inability to accept rapid evolutions as they typically desire stability and slow, predictable movement. That’s what happened in the mid-2000s when small banks couldn’t invest in online banking in a reasonable timeframe and/or provided a poor user experience. They “stayed the course” right into getting absorbed by larger entities to survive.

We know that embracing flexibility and new ideas can be risky, but a good risk assessment will show massive gains for a healthy investment in UX Research and Design.

5. Put UX Research First

No alt text provided for this image

Fintech excels in Product Design which culminates research and data into a cohesive and consistently built system from the very beginning of the brand’s inception.

Naturally, creating multiple services on one product can be hard. The FDIC says you need this, InfoSec says you need that, Engineering wants to save time and use a 3rd-party API/iFrame, and so on. We are challenged to be in compliance and have a beautiful application for users to intuitively engage with. But that’s the reason why it’s so important to invest in your UX teams!

Make sure that you have the data to support a unified system of products and services while maintaining a Design Language to keep everything looking and operating the same on every page for every user. Consistency matters!

6. Provide A Unique Value Proposition

No alt text provided for this image

Even if you’re “copycatting” products from other systems, your users are different and finding out what their needs are will increase engagement much more than assumptive design ever could. If you don’t know what people think of your product, you’ll never be able to pivot in the right direction. When they move, you move, just like that. There’s a big difference between qualitative and quantitative feedback.

Everyone wants to try to cram their entire product offering into a single app. It’s wonderful to have, but sometimes it’s just plain impossible to accomplish with the time and resources you’ve been given. We can’t always “make it fit” for everyone. The honest truth is that it won’t ever work for everyone and the individuality of your target demographics and focused segmentation should be the most valuable asset in your research arsenal.

Yes, you need a unique value prop, but only if it directly benefits your audience in a positive and engaging way. You want people to tell others about your product in a satisfied way. Bad reviews always lead to abandonment.

Take some time to compare what fintech and your direct competition is doing well and filter out how you can emulate those good ideas while staying on-brand and on-message. A good designer can help translate this information into a fully realized and custom experience.

7. Drop The Obsession With Banking Functionality

No alt text provided for this image

We should try to fit in as much functionality as possible, but not at the expense of the product or its users.

Every customer should have a journey that offers a simple “happy path” to completion. In finance, complexity can often be a source of pride and exclusivity. That may not be the case with all of your customers.

8. Measure Results By Quality, Not Quantity

No alt text provided for this image

Quality vs. Quantity is not a thing anymore. It’s instead the marrying of the two ideals of Quality and Quantity in a cohesive and engaging way.

The qualitative research that needs to be done should be exponentially impacted by the quantitative surveys and analytics gathered during initial research. For examples, we may lose quality when speed is priority, however this is why rapid user testing and prototyping is so important.

Test, review, rinse, repeat.

9. Focus On Emotions Instead Of Information

No alt text provided for this image

Empathy will always be key. People have emotional connections to their finances and the institutions they invest that buying power into. Banks tend to overwhelm people with unfamiliar paperwork, nomenclature, acronyms, and fine print.

The future of finance is making informed decisions based on simplified communication and customer loyalty. Keeping the complex curtains up will keep curious people away.

10. Invest More In Customer Experience Than In Marketing

No alt text provided for this image

The customers you have are worth more than the ones you lack. Marketing tends to focus on garnering new business while maintaining existing relationships are not as much of a priority. And that’s OK! But maintaining long financial relationships with contented customers far outweighs the risk of that unknown potential.

Let your product speak for itself through accessibility, effective UI, and an intuitive landscape. You want people to recommend your product to others. Curiosity and satisfaction go hand-in-hand; if you’re interested in something, would you rather find out about it from a banner ad, or several different family members and friends who all gave it glowing reviews?

Closing Thoughts

No alt text provided for this image

UX, UI, Design, and Creative are not as highly valued or involved at an early enough stage of the project to make an impact. Financial companies tend to relegate those team members to Production Art and QA Maintenance asks due to a lack of understanding of how effective and powerful adding UX Designers can be. Keeping them out of the project loop will not only dull their edges, but have them looking for new roles elsewhere.

Fintech teaches us that looking at finance in a customer-centric way is effective, profitable, and mirrorable at the corporate scale for banking.

Written by Kaela Coppinger · Categorized: Design UX/UI, Financial Services, Learning and Development, Product Development · Tagged: best practices, design, Design Programs, INRHYTHMU, learning and growth, ux, uxui

Jan 10 2023

Why You Should Migrate Away From AngularJS

Overview

With the legacy experience of the Angular Javascript framework, web developers have grown to lean on the framework as a go-to tool. Today, we wanted to go through a few of the reasons why you should look to migrate your existing AngularJS projects (any Angular release version under 2) to a more modern and actively supported framework (or library).

Even though AngularJS is a fantastic piece of technology that surely was top of its class when it came out (October 2010) and despite the fact that we’ve enjoyed working with its successor Angular.io (also known as Angular 2+), AngularJS has become outdated (EOL December 2021), and a risk to your company in a variety of different ways.

No alt text provided for this image
@2017, Scott Adams, Inc.

The framework has reached end of support (Version Support Status). This means that it has become read-only mode, therefore it will not be updated further. The framework has not been developed for over a year now (Release 1.8.2 happened in October 2020), and even though extended support was supposed to end mid-2021, it was extended to December 2021 due to the global pandemic. Here’s a blog post by the Angular team regarding discontinued long term support.

To add some support to the point, Angular was created and mainly maintained by Google. Google recognized the shortcomings of AngularJS, and completely rewrote it to release Angular.io. AngularJS only made it to version 1.8.3, however Angular.io has already made it to major version 13 (current at time of writing), with many more versions to come.

What Could Be Making You Hold On To Your Existing AngularJS Apps

No alt text provided for this image
@2016, Scott Adams, Inc.

Trust us, we’ve been there. You have a perfectly functioning application which needs little maintenance, and you have engineers who know it in and out already. Why invest a part of your budget in fixing something that’s not broken? Why bring in new people that don’t know the product? Why push your engineers to do something new/different to what they’ve been doing?

The Reasons

No alt text provided for this image
  • Technology: As stated earlier, AngularJS is outdated. This means that in its feature-set, performance, and just keeping up with latest developments in Javascript and the web browsers, AngularJS has clearly lagged behind, mainly due to the fact that it has been in maintenance mode and not actively developed on for years. If you stay on this framework, you won’t take advantage of the rapidly evolving web world, and the evolving smart devices, and their new features.
  • Support: As the framework is no longer maintained, any new issues or limitations you encounter will not only lack an answer/help from the AngularJS team (again, not supported anymore), you most probably also won’t have a huge community online to help you with it, like you would have with any modern framework. This could mean a longer time to fix issues that come up in your application, and a rough experience for your engineers and users.
  • Security: Perhaps the biggest reason why you should move away from AngularJS. Like any unsupported package out there, you won’t be protected when any new security exploits are identified, be it within the framework itself, or any of its thousands of dependencies and indirect dependencies (yes, your app can be exploited by vulnerabilities in the dependencies of the dependencies of AngularJS which is your app’s dependency… you get the point). Usually when something like this happens in an actively supported package, a fix will be published quite swiftly in response to it, or any dependency that includes the vulnerability will be updated with a newer version.
  • Talent: Not only do you want to provide the best possible experience for your users, but also for your app engineers. When you are trying to retain or expand your software team, AngularJS will weigh on any engineer’s decision. Engineers will want to work with quality, cutting edge technology. It is hard for engineers to get or even stay excited about working on a framework that has reached end of life. It will be much easier for you to retain and hire engineers if your apps run on modern technologies and following best practices and industry trends. I cannot stress how much easier it will be to fill open positions when your tech stack is attractive for the engineers. You can also think about what will happen once you actually find someone willing to do the job on your legacy system, they will play hard to get and you’ll end up paying more for an engineer that is probably not up to date on industry standards.
  • Business: For current technologies, the help you will get from the online community is massive, which speeds up the time it takes to fix and implement new features, and to resolve critical situations that may arise. Not only your engineers will be happier and more engaged in what they are doing, it also impacts your branding. Are you a company that invests in and works with the latest and greatest? Or a company that settles with whatever is there?

Closing Thoughts

No alt text provided for this image

With confidence, we have seen the impact that migrating legacy applications has had for many of our customers, and it is massive. Not only do applications come alive and look and feel more modern, but engineers come to work in a better mood and eager to get things done, and a true engineering culture is fostered.

Written by Kaela Coppinger · Categorized: Code Lounge, Product Development, Software Engineering, Web Engineering · Tagged: angularjs, best practices, INRHYTHMU, JavaScript, ux, Web Development, web engineering

Jan 04 2023

Creating An Effective Proxy Using Node And Express

Overview

Engineers are often faced with the challenge of pulling together multi-website/application projects, without full cross-platform permissions. Utilizing both a Node and an Express proxy, can pull together two websites/applications in a formal and cohesive format.

The aforementioned situation comes up more often than one would think, whether it be a question of host permissions or compatibility, it can undoubtedly pull up a number of possible roadblocks. There are several reasons a developer might not be able to run a site or app in their local environment; perhaps it’s complex to set up or involves a number of permissions. Regardless of the reason, Node and Express can present a novel way to solve the problem.

No alt text provided for this image

In Matt Billard’s Lightning Talk session, we will be uncovering the the primary strategies for Creating An Effective Proxy Using Node And Express:

  • Overview
  • The Architecture
  • How It Works
  • “Gotchas” To Avoid
  • Live Demonstrations
  • Closing Thoughts

The Architecture

No alt text provided for this image

The browser makes a request to the Node Express proxy server where the following three scenarios crop up:

  1. If the user requested an HTML page, we need to combine the page from website 1 and 2. The proxy first asks website 1 and then website 2 for its HTML. It then modifies the two HTML files, combines them, and returns the result to the browser. (Details on how this works below.)
  2. The HTML page will then request the CSS, JavaScript, and other assets it requires. These requests will again go through the proxy which will pass on the requests. If website 1 has the asset, great, the proxy will return it to the browser. 
  3. If website 1 does not have the asset, the proxy will then ask website 2 and return it to the browser.

In the example below, when using the InRhythm.com website as the target into which an engineer can inject some local code (in this case a basic Create React App project); the final result is an actual screenshot of the 2 websites living together in the same browser window.

No alt text provided for this image

How It Works

As mentioned above, website 1 and 2’s HTML are combined. This involves a few steps. Webpages can’t have 2 doctype, html, head, or body tags, so the use of some regex to strip those, will be required. Now that website 2’s HTML is ready, a coder can inject it before website 1’s closing </body> tag. 

No alt text provided for this image

The above code shows the modifications to website 1’s HTML.

It shows a few things:

  1. Many websites have full ‘absolute URLs’ for their links. They look like this: https://www.inrhythm.com/who-we-are/. The problem is if the user clicks on this, they’ll be taken away from our proxy and go to the target website. One can solve this by removing all www.something.com pieces while retaining the language the after the slash.
  2. Injecting the CSS as discussed above, removes backgrounds and allows clicks to pass through website 2 to website 1. (Keep in mind this will probably be slightly different depending on the two sites a coder is combining.)
  3. Injecting the HTML from website 2 must be modified before closing the </body> tag.
No alt text provided for this image

“Gotchas” To Avoid

It can take a variety of trial and errors in order to develop a proxy to one’s exact specifications. Some of the most common occurrences, a coder may find themselves troubleshooting are:

  • Websites usually compress or “Gzip” their content. Normally this is a great thing. It means less data is transferred and websites load more quickly. However, when in need of a proxy, it can become quite troublesome for ease of use. An engineer can’t parse, manipulate, and modify HTML if it looks like gibberish. The solution is actually quite simple: as it turns out, there’s a header one can send with their request to ask the server not to Gzip anything.
No alt text provided for this image
  • When using a proxy, all requests are going to have the header “host” set to “localhost.” Now this is probably not a problem for most sites, but to the target server, this doesn’t look like a very normal request, and indeed, one will find some websites responded abnormally and will return pages that looked nothing like expected. The solution cab be found in modifying one of the headers of the request. 
No alt text provided for this image
  • Due to needing to modify requests quite a bit, this may result in some possible browser abnormalities. The solution to this problem is to delete the ‘content-length’ header before the proxy sends the browser any final response. This will stop the browser from truncating the response and removing all the hard work needed to customize one’s proxy. 
No alt text provided for this image
  • When combining sites that use https, the proxy might complain that the SSL certificates don’t match what it’s expecting. Turns out it’s rather easy to relax this with the following code: 
No alt text provided for this image

Live Demonstrations

Matt Billard has crafted an intuitive demonstration to help guide you through these principles in practicum: 

No alt text provided for this image

Be sure to follow Billard’s entire Lightning Talk to view this impressive demonstration in real time.

Closing Thoughts

The Node.js framework Express allows an engineer to create web servers and APIs with minimal setup. Using Express in a Node.js application to create an API Proxy to request data from another API and return it to a consumer, is a vital skill to add to one’s skills toolkit. Using Express middleware to help optimize the API Proxy, will allow a coder to raise the bar and improve performance for returning data from the underlying API.

To develop and learn from Billard’s signature “Code Collider” proxy, feel free to download the direct code from GitHub.

Happy coding!

To learn more about Creating An Effective Proxy Using Node And Express, along with some live test samples, and to experience Matt Billard’s full Lightning Talk session, watch here.

Written by Kaela Coppinger · Categorized: Cloud Engineering, InRhythmU, Product Development, Software Engineering · Tagged: Code Collider, Code lounge, express, INRHYTHMU, learning and growth, Node, Node.js, product development, proxy

Jan 03 2023

Creating Robust Test Automation For Microservices

Overview

No alt text provided for this image

Any and all projects that a software engineer joins will come in one of two forms: greenfield or legacy codebases. In the majority of cases, projects will fall into the realm of legacy repositories. As a software engineer, it is their responsibility to be able to strategically navigate their way through either type of project by looking objectively at the opportunities to improve the code base, lower the cognitive load for software engineering, and make a determination to advise on better design strategies.

But, chances are, there is a problem. Before architecture or design refactors can be taken its best to take a pulse on the health of a platform End to End (E2E). The reason being, lurking in a new or existing platform is likely a common ailment of a modern microservices approach – the inability to test the platform E2E across microservices that are, by design, commonly engineered by different teams over time.

Revitalizing Legacy Systems

No alt text provided for this image

One primary challenge faced by a number of software engineers, is the adaptive work on a greenfield platform that has fallen several months behind from a quality assurance perspective. It becomes no longer possible for QA to catch up, nor was it possible for QA to engineer and execute E2E testing to complete common user journeys throughout the enterprise system.

To solve this conundrum, E2E data generation tools need to be created so that the QA team can keep upbuilding and testing every scenario and edge case.

There are three main requirements for an E2E account and data generation tool.

The tool should:

1) Create test accounts with mock data for each microservice

2) Link those accounts between up and downs stream microservices

3) Provide easy to access APIs that are self-documenting 

Using a tool like Swagger, QA can use the API description for REST API, i.e. OpenAPI Specification (formerly Swagger Specification) to view the available endpoints and operations to create accounts, generate test data, authenticate, authorize and “connect the microservices.”

No alt text provided for this image

Closing Thoughts

By creating tools for E2E testing, a QA team was able to eliminate the hassle of trying to figure out which upstream and downstream microservices needed to be called to ensure that the required accounts and data were available and set up properly to ensure a successful test of all scenarios i.e. based upon the variety of different data types, user permissions, user information, and covering the negative test cases. The QA team was able to catch up and write their entire suite of test scenarios generating the matching accounts and data to satisfy those requirements. The net result of having built an E2E test generation tool was automated tests could be produced exponentially quicker and the tests themselves are more resilient to failure. 

Even though the microservices pattern continues to gain traction, developing E2E testing tools that generate accounts and test data across an enterprise platform will likely still remain a pain point.

There’s no better way to maintain a healthy system than to ensure accounts and data in the lower environments actually work and unblock testing end-to-end. 

Written by Kaela Coppinger · Categorized: Agile & Lean, Cloud Engineering, Java Engineering, Product Development, Software Engineering · Tagged: cloud engineering, INRHYTHMU, JavaScript, learning and growth, microservices, software engineering, testing

  • Go to page 1
  • Go to page 2
  • Go to page 3
  • Interim pages omitted …
  • Go to page 7
  • Go to Next Page »

Footer

Interested in learning more?
Connect with Us
InRhythm

110 William St
Suite 2601
New York, NY 10038

1 800 683 7813
get@inrhythm.com

Copyright © 2023 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT