Objective

I was brought on to first tackle the over bloated and overloaded color system Q2 previously used. Our style sheets had hundreds of hardcoded colors in CSS that caused the Q2 theme builder provided to our clients to load slowly and resulted in quite a few pain points. There was a lack of consistency in our color stylings that needed to be addressed.

Method + Outcome

As I joined this project mid way through, a developer was already working on code that would automatically generate shades and tints of any primary color that was input. My work revolved around determining how those shades and tints were calculated and how many of each would be generated. I worked together with another designer to determine our grey, blue, and opacity palettes. After landing on a color system, it was time to actually remap our old colors to the new color system. Working with a developer, together we located and remapped 226 hardcoded colors. Additionally, we remapped 128 mutated colors. In total, I made 354 changes to the colors to remap them to our new color system.

Objective

Based off of our new color system, build out the beginnings of an updated theme builder through user interviews, competitive and comparative analysis, and research synthesis.

Background

The Q2 theme builder is essentially how financial institutions are able to skin their online banking applications. This meant adding primary colors, logos, and background images to our standard application. The theme builder had several quick fixes that could be addressed, but there were also quite a few bigger pain points that were consistently brought up by clients and Q2 employees (generally, our web designers and developers who would spend the most time with the tool) alike.

Research

I began by auditing our theme builder - how it is used, approximately how much time employees and clients spent using it, and general customization options it provided. I also compared our capabilities against other tools to see what was being offered with builders such as Squarespace.

I utilized the Q2 research team to reach out to 2 long term clients, coming in contact with their design team to interview them on what they liked about its current state and what they thought should change. Additionally, I interviewed internally - our team of web designers are the main point of contact with Q2 clients who use the themebuilder. In its current state, our clients would essentially provide one of our web designers their logos and primary colors and those designers would fill in the rest. I interviewed a total of 5 Q2 web designers to get their opinions as well.

The Problem

An overwhelming amount of responses to these interviews was that our tool lacked customization - customers were excited at the prospect of having their very own mobile banking app and the ability to theme it - but we fell flat from our promise by only offering color, logo, and image changes. Essentially, each mobile banking platform we provided to our clients looked exactly same, just reskinned. An end user could be the client of two different financial institutions and see the exact same mobile banking application with little to no differentiation. Additionally, our theme builder didn’t have capabilities to show what a mobile preview would look like so it often times looked different or incorrect compared to the web preview.

The Method

Because this would be a net new product under Q2 Config, I knew this was at least a 2+ year project, and I only had 6 months. I wouldn’t be able to address all the wants and needs of our clients - that would be up to the next designer. But what could I address and solve now? I needed to decide what I could feasibly take on - in this step, I worked closely with 2 other designers to determine what to focus on and how to flow the information architecture. The information architecture was a huge portion that had to be addressed before anything else. I went through multiple user flows of theme builders and created several interactive studies to see how Q2 employees moved through the theme builder in its current state.

Additionally, I cataloged each “themeable” component (such as primary buttons, hover states, radio buttons, etc) in the theme builder and categorized them as primary, secondary, or tertiary colors. I presented these components to Q2 employees and had them group the components into each category via a Mural board.

From my research it was determined that we should begin by focusing on colors, fonts, and mobile previews. I ended up narrowing this to simply colors and mobile/web previews after cataloging components in their groups. I started with low fidelity wire-framing where I rapidly tested with Q2 employees to get their initial thoughts. After switching to hi fidelity frames, I conducted a usability test with the Q2 research team. I created a full prototype for theming brand colors in Axure and we tested 6 participants. One thing to note is our theme builder is currently utilized by Q2 employees who work with our clients to update the theme builder. This new tool would be given straight to Q2 clients, and with that comes usability and accessibility concerns that had to be addressed along the way. Because of this I also am familiar with WCAG and A11y accessibility requirements.

Outcome

In user testing, the color selection for the theme builder was ultimately well received and many users were very excited to switch over to the future version. I attribute this mainly to the extensive research done beforehand to ensure I was making the right decisions for the users the entire step of the way.

Because this work is owned by Q2, I can only provide two very early wireframes to show. I can't show you mockups, research reports, or prototypes, but know that I took care to apply each step of the UX process to this project.

As far as results go, because the theme builder is still in the very early stages (I was just working on colors, after all!) this product will likely not be released for a while. However, many internal Q2 employees as well as clients have expressed interest in the theme builder and are looking forward to its release.

Lessons Learned

By far the most important lesson I learned during this project was the incredible value of user research, and the fact that it doesn't only impact the design team.  User research was able to help myself and the designers I worked closest with prioritize, give the development team direction, help the sales team sell, and ultimately help us all have more productive conversations with our customers.