Website Redesign

COMPANY

SOLE Financial

LAUNCHED

January 10, 2019

Overview

As the new UX Manager at SOLE Financial I identified a major opportunity to provide positive impact to the business; specifically in areas of client acquisition and client/cardholder engagement and retention by addressing the design of our public facing website. This project saved SOLE Financial over $100,000 (based on a third-party bid) and increased sales leads by 300% within the first month of the new site launch.

Problem

At the time, SOLE’s marketing team was growing and this quickly exposed friction in our workflow such as it being difficult for content managers to easily update and post to the blog, as well as additional challenges working through a third party agency to update anything more than copy content.

In addition to these challenges that the marketing team faced concerning the website, it was also apparent, through further investigation, that the overall design of the website did not facilitate easy navigation for visitors on the site, nor further the company’s business objectives overall.

Most of the content was neither discoverable nor up-to-date as a result. It was additionally made clear to us that the intended purpose of the website was not being fully realized given the feedback we received internally, from visitors, and based on site analytical data. From a functional-visual standpoint, the website lacked cohesive branding and general visual unity across its pages and features, and it was not surprising to learn that no style guide had ever been created for the site nor was the site mobile friendly as it was neither responsive nor adaptive which was especially problematic considering the majority of site visitors did so from mobile devices.

Users & Audience

Our solution needed to reach employers learning about SOLE, our product (the payroll paycard), how we could help them achieve their business objectives, and how the whole process worked.

Additionally, we also needed our solution to be accessible for cardholders to learn more about how their paycard works, to further build their trust in a product and a system they may be inclined to distrust, and help them navigate with greater ease to enrollment or login.

Roles & Responsibilities

As UX Manager, I led the entire redesign effort, reporting to our Product Director and Marketing Director. Once I had created a strategy and roadmap for the project, myself and our Product Director interviewed candidates to fill a front-end developer role. The project team consisted of: myself- as team lead, art director, and lead ux/ui designer, a front-end developer, our social media and content manager, and a graphic designer to create digital illustrations. We were co-located and met in-person throughout the life of the project. We managed our tasks through use of a kanban board and worked in two week sprints.

Scope & Constraints

Initially we wanted to extend the redesign effort to include the cardholder account as well, however, due to various budgeting and contractual constraints with the card processing provider at the time, the scope of the project was limited to just the public facing website with plans to later address the account experience after completion of this project.

Process

To initiate this project I first created a business case which began with investigation into identifying problems and opportunities. I met with marketing and content managers, account managers, stakeholders, subject matter experts, our CEO, our CFO, and compliance managers to conduct interviews and get a full picture of our internal workflow, as well as the customer journey for both clients (employers) and users (cardholders). From analyzing the information gathered in these interviews I was able to identify various opportunities that could be address by the website that were also connected directly to specific KPIs set by our CEO for the company.

I presented this business case to our CEO and received approval to proceed.

Moving forward with the project, and together with our social media and content manager, conducted a full content audit of the site. Because the content was of such great importance, the decision was made to proceed with a content-first approach. Designs were then wire-framed and later mocked up according to content needs with first consideration for mobile viewing and interaction.

Using this content and mobile first approach I also conducted several card sorting exercises to determine intuitive site navigation and hierarchy. I sketched mobile designs of the site’s pages and flows to create a paper prototype we could test amongst ourselves, friends, and family. As the solution was refined based on feedback from research that I conducted and usability testing I created higher-fidelity designs. Working with our graphic designer for digital illustrations to incorporate into the interface, and also our front-end developer to implement the designs in our sandbox environment we were able to finalize the website redesign.

Before launching we also made sure to set up more metrics and analytical tools to monitor performance after launch to measure our success and to support continued refinement to the design to meet specific goals as needed going forward.

Outcomes & Lessons

During the month following launch, SOLE saw a 300% increase in sales leads funneled through the lead form on the website. Site engagement increased and overall brand trust increased as well.

From leading this project, I learned how to select and hire an employee, set a strategy and vision for a product, further hone my skills in managing a project, manage a team, conduct ux research, and execute a major design solution from concept to implementation.

Shortly after the new website was launched SOLE Financial was acquired by ComData. After I no longer worked at SOLE, the new leadership decided to keep the website as I designed it, and only rebranded specific graphical elements in order to reflect the new FinTwist product branding.

Air Traveler To-Go App

COMPANY

Visage Collaborative

PROJECT TYPE

Proof of concept

Overview

The design firm I was contracted with, Visage Collaborative, was hired to create a proof of concept for a mobile app idea. The purpose of the app was to offer a service to weary, rushed, hungry travelers to make their journey more comfortable and accommodated.

Problem

Hundreds of thousands of travelers pass through airports every day. Most people can relate to a time when they were stressed, hungry and in a rush to make their connecting flight. Despite the abundance of dining options within airports people don’t always have the time to wander in search of sustenance and make it to their connection and most airlines only offer basic snacks merely to tide passengers over until they reach their destination. Outside of persuading airlines to offer more substantial meal options inflight, how can we help hungry travelers who are in a rush, to be fed and happy?

Users & Audience

The opportunity to solve this problem is huge as the target audience for this product is any hungry smartphone user who travels via air, with connecting flights through busy airports, especially when connection windows are tight. This will also be primarily utilized by the more frequent traveler, though the occasional infrequent traveler may still download such an app to use in context of their circumstance.

Roles & Responsibilities

As lead designer on this project I led initial brainstorm sessions where we identified assumptions and areas where more research would be needed and continued to lead the team through several ideation phases. Our team consisted of our stakeholder, myself as lead designer, a junior designer, and a front-end developer.

Scope & Constraints

As a proof of concept with a tight budget we were constrained to keep the scope of work to a click-through prototype and guerrilla usability testing. Our team was also remote so we were limited to meeting and discussion over Google Hangouts with screen-sharing, and conference calls.

Process

Our small project team, joined by others at Visage Collaborative, conducted a remote Design Studio session and presented our sketches over Google Hangouts. We took our collective ideas and determined where we wanted to push the design and do more discovery. I researched how airline ticket barcoding works and how we could leverage the information contained within them which informed the design of one of the features.

As a team we sketched and discussed and I distilled our designs and discussions into what became our inVision App prototype. We tested the usability with friends and family, made tweaks and created a roadmap of the potential evolution for the app into the future.

Outcomes & Lessons

The client was very excited about our solution and received it well. From working on this project I learned how to translate and apply design processes I was familiar with in-person into successful remote collaboration. I also learned a lot about how airlines work, flight scheduling, how airports in general run, how restaurant services are coordinated within the airport and how boarding passes work. Ultimately the project was shelved as the client didn’t have the time or resources to push the concept further into full-blown development. However, the lessons learned through the process of collaboration and ideation proved to be valuable to my own professional development.

Insurance Bundling

COMPANY

USAA

PROJECT TYPE

Proof of concept

Overview

The Fortune 200 financial services company I was employed by wanted to develop a solution to bridge the gap between their siloed insurance product offerings; this would simplify member’s acquisition of multiple products to ensure adequate protection of their property. An internal design competition was held to inspire innovation and quickly iterate through many possible solutions.  

Problem

New insurance products had been developed at different times over the years as the company grew, thus complicating the experience of buying auto insurance versus homeowners or renters insurance, etc. This caused many who needed multiple types of insurance to lose momentum or abandon obtaining additional products altogether.

Users & Audience

The solution was intended to help members of this financial institution who are in some way affiliated with the military, either currently serving, retired, or the family members of a service-member, who need to insure their car, home, or other personal property.

We used pre-existing personas that had been created by our independent usability/user research team. Three personas were selected to focus our designed solution.

Roles & Responsibilities

The team consisted of: myself- acting as team lead and lead designer, two other designers, a producer, and a front-end developer. We were co-located and met in-person to tackle the problem. Together, we collaborated on understanding the problem and white-board possible solutions.

The project had to be completed in a month, outside of the regular project work we were each responsible for. I recruited the team members, kept us organized, and focused our objectives during our collaborative sessions.

Scope & Constraints

We had access to basic company resources, however, the project was unfunded. Otherwise, we had four weeks of personal time to produce a viable prototype of our solution.

We had to acquire information regarding the system architecture to understand the limitations and opportunities of the back-end design, as well as, identify the challenges that our solution would need to account for and seek to overcome.

This project required the application of commonly used design patterns from the e-commerce retail space to bundle multiple insurance products into one seamless checkout experience.

Process

My team met to sketch ideas for solving the issue of multiple, disparate quote flows, and how we could design the questions and flow to satisfy several product needs at once. Our goal was to have just one quote flow that could  dynamically serve quotes for any combination of insurance products, as well as use algorithms to make statistically relevant product recommendations.

We engaged with product management and other business development teams to evaluate and refine the questions asked during the quote process flow in order to reduce the cognitive load and time required to complete an insurance quote, as both affected the likelihood of  completing a purchase. We also worked to reduce redundancy in questioning to maximize efficiency in the flow.

Considering the need for restructuring the backend system architecture, we worked through the system redesign and created a new model structure to support our solution.

Using the mobile first approach we sketched mobile screen designs of the flow and created a working paper prototype we could test amongst ourselves, friends, and family. As we refined our solution and paper prototype, we created higher-fidelity designs and then a functioning prototype for demo.

Outcomes & Lessons

We presented our solution to executive leadership and earned 4th place in the competition. Parts of our solution were borrowed, and later combined, to become the requirements for a later project implementing product bundling across all channels and was launched for public use.

From this project, I learned how to select and assemble a team, lead the collaboration, and execute a design solution from concept to prototype. As we combed through existing processes, I learned how to question the reasoning behind previous business and design decisions as well as identify opportunities for improvement to satisfy both business and user needs.

I no longer work for said company, however, my team’s solution did contribute significantly to the way this company now conducts business; namely, in serving a solution to allow multiple product acquisition options for its members.

Property Risk Assessment

COMPANY

USAA

PROJECT TYPE

Web Application

Overview

My employer wanted to further develop and implement a web application that had done well in pilot testing. The initial application allowed members of this insurance company to look up their property by address to see what, if any, catastrophic events were a threat. The project I became apart of took this application further to add additional functionality and features to make the application a tool of empowerment to assist members in mitigating the risks known to their property and to what degree a particular risk was a threat. 

Problem

Every year insurance companies pay out a lot of money to cover claims when disaster strikes. Socio-economically not everyone is able to access a comprehensive database of information detailing the level of risk of wildfires, storm surge, flooding, earthquakes, hurricanes or tornadoes when making home-buying decisions. Much of this data is dispersed in several different governmental databases. If people have access to an aggregation of this information they may be able to make more informed decisions and not purchase a home in a floodplain or where the wildfire risk is significantly high, thus avoiding a further claim payout and protection of people’s property and the things they care about. The other problem people face is when they are already living where there is a risk the their property, what can they do to mitigate that risk?

Users & Audience

This application is intended for members of this insurance company who are looking to purchase property or who want to know what the risks are to their current property and how to address those risks. 

Roles & Responsibilities

My role on this project was that of UX and UI design. I worked very closely with another UX designer to work through edge cases, information hierarchy and architecture and how to incorporate the features and additional functionality the team had settled upon to incorporate into this phase of the application's development lifecycle. Besides myself and the other UX designer the team also consisted of two business/product owners, a front-end developer, a few back-end developers, a technical analyst, a project manager and our scrum master. 

Scope & Constraints

The scope of this consisted of taking an existing design that had been born of an innovation competition and add additional features and functionality that would further the usefulness of the tool beyond just informing members of risk. The primary additional feature was a risk mitigation “To-Do” list. A constraint or challenge we encountered was that of conflicting priorities from both of the business/product owners and the tendency of our team to slip into prescriptive design by committee. We were able to overcome these challenges by encouraging each other to cooperate, collaborate and compromise. As designers we listened to input from the business and were able to interpret their priorities and present designs that satisfied both parties without compromising the overall vision and were met with great approval.

Process

This project started off with a Design Studio session where our entire team and stakeholders had a chance to sketch and communicate assumptions and vision for the product. We were able to discover potential features to add to the application through this process. Beyond the Design Studio we worked in agile, scrum and had two week sprints. We iterated through designs and created paper prototypes we conducted usability tests with early in the project. For the usability tests we had a moderator and myself in the room with the user, I was the “computer” moving the papers and pages to simulate interaction with the tool. We collected our observations from these tests and made adjustments accordingly to our designs and iterated through to a high-fidelity prototype we also tested before implementing the final build of the tool.

Outcomes & Lessons

From this project I learned about the effectiveness of a Design Studio early in a project, how to navigate design decisions when you have two business/product owners on a project who sometimes disagree about priorities, and how to conduct successful paper prototype usability tests. 

Challenges will almost always be present in a project whether they are internal to the team or external. Success, however, depends on you being able to overcome those challenges and obstacles through constructive collaboration and cooperation. The Property Risk Assessment Tool launched and was a success right away.