• 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

learning and growth

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 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

Dec 20 2022

A Comprehensive Introduction To Swift Package Manager

Introduction

The Swift Package Manager (SwiftPM) is Apple’s tool for managing package dependencies for Swift application development. SwiftPM has been an integrated part of Swift since v3.0.

So, what are Packages? Packages contain reusable code or other resources stored in repositories that your application needs to provide a feature or function. Some examples include, but are not limited to, the fonts and color scheme for your app, a library that provides access to a web resource, a file with images required by your application. Other examples are the APIs and Frameworks that add functionality to your app and simplify your coding tasks.

Let’s work together and breakdown a high-level overview of basic SwiftPM usage and its associated features.

What Do Package Managers Bring To The Table?

Package Managers give developers a way to control which packages and which versions of those packages that the project will consume.

Other features include:

  • Allows easy use of light-weight, reusable libraries
  • Reduces code duplication
  • Supports development best practices by simplifying and supporting modular coding (easy module/package creation)

While it is possible to manually manage dependencies in a project, it isn’t practical for anything but the smallest of applications. Best practices fall on the side of using a package manager to handle this function automatically.

SwiftPM supports Swift 3+ and XCode 8+. Since Swift 5 and Xcode 11, SwiftPM has had cross-platform support for iOS, macOS, and tvOS.

Are There SwiftPM Alternatives?

There are two mainstream alternatives, CocoaPods and Carthage. Both are third-party tools requiring installation and much configuration before use.

CocoaPods

No alt text provided for this image

CocoaPods (2011) – Supports Swift 5+ and Xcode 3.11+ – Mature and stable. A centralized, easy-to-use command-line tool for package dependency management and integration into the application. CocoaPods is written in Ruby.

However, Cocoapods lacks direct control over project configuration and is basically a blackbox. CocoaPods also experiences random build failures that can’t be explained. Resolving these often involves removing and reinstalling CocoaPod dependencies from the project, clearing caches, and completely rebuilding the entire project. These steps can add a significant amount of time to the development process, especially on large projects.

Each CocoaPod dependency must have a “Podspec” file to define the metadata for that dependency. These files are typically uploaded to a different repository from the dependency itself. A “Podfile” within the app project will include a reference to this repository, and CocoaPods will use the information in this Podfile to fetch and install all of the dependencies for the app project. 

Carthage

No alt text provided for this image

Carthage (2014) – A decentralized command-line tool for dependency management. Developers have full project control and must manually provide all package and dependency information. Carthage pulls the packages the developer specifies.Configuration requires much more manual work than CocoaPods and is somewhat complicated.

Using SwiftPM

SwiftPM has many advantages over Carthage and CocoaPods. Foremost, SwiftPM is a native Apple tool integrated into Swift. Other advantages include a quick and simple configuration, easier control over packages and their sub-dependencies, and a GUI built into Xcode for managing package configurations. Each package’s metadata is defined in a “Package.swift” file, which  resides in the same repository as the package source files. 

Package Resolution

With the Package dependencies configured in the SwiftPM GUI, Xcode will download the packages and resolve dependencies at build time with no further developer interaction.

When setting dependencies, you have the following options:

  • By Version: Next Version, Up to next minor, Range, or a specific commit
  • Branch (Specify)
  • Commit(Specify)

Adding A Package To Your Project

  1. Swift Packages> Add Package Dependency 
  2. On the “Choose Package Repository” dialog, enter the desired Repository.
  3. Click Next. 
  4. On the “Choose Package Options” dialog, set the dependency rules (Versions, Branches, Commits). 
  5. Click Next. Xcode now fetches the dependency.
  6. On the “Add Package to YourPrjName dialog,” ensure that the relevant packages are checked and the proper Target is selected in the Add to Target cell.
  7. Click Finish.

Your package now appears in the Navigator under Swift Package Dependencies. Note that SwiftPM can reference both local and remote packages.

Create A Module And Add A Local Package With SwiftPM

SwiftPM simplifies the process of modularizing your code and adding it as a package to a local or external repository. This section will briefly describe the process of creating a module and adding it to a local repository.

  1. Identify a self-contained portion of code or another resource that is suitable for use in a module.
  2. Create a new file: Files > New Package. Name the package accordingly and add it to your application using the same dialog.
  3. Copy the code or resource to the new file.
  4. Delete the existing code or resource from the app
  5. Add the new package to the Application Target. In “Application Project Settings,” add the new package under Frameworks and Libraries.
  6. In the Package code, define the platforms and versions where this Package works.
  7. In the Application’s code files, import the new package into every file where its code or where its resources are used. 

If desired, you could upload the new Package to an external repository for use by developers outside your organization.

Additionally, SwiftPM will allow you to create and use binary packages. Binary packages permit developers to distribute libraries and frameworks without also distributing their source code.

Package Distribution

You can use SwiftPM to distribute resources, in addition to frameworks and libraries. SwiftPM also has built-in support for Apple’s  DocC Documentation format, which makes it easy to build robust interactive documentation files and tutorials. 

The Future

SwiftPM is a mature product still under active development to improve and add new features. Usage stats currently show it being about equal in popularity with CocoaPods. However, since SwiftPM is a native tool that requires no additional work to begin using, its future is more sure than that of CocoaPods or Carthage.

Happy coding!

To learn more about Swift Package Manager as well as its influence in mobile development and to experience Andrew Balmer’s full Lightning Talk session, watch here.

Written by Kaela Coppinger · Categorized: Code Lounge, InRhythmU, Learning and Development, Software Engineering · Tagged: best practices, INRHYTHMU, ios, iOS Ecosystem, learning and growth, Package Management, software engineering, SwiftPM, SwiftUI

  • 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