Solarity was a little credit union with big aspirations. Not only did the team at Solarity Credit Union want a new website – they wanted a website that would set the standard for the industry. They were in the process of re-branding, and wanted their new website to reflect the focus on personalized customer service that they were highlighting throughout the physical and digital banking experience.
The Solarity team had some quality content, but that just didn't seem like enough to get users pulled into site on it's own. Thinking about the physical elements of interacting with the bank, we started to explore ways to bring the idea of the banking 'teller' to life in a digital space. (Oh, and also NOT have it work like Microsoft's Clippy.) One of the more promising interaction design feature concepts was based on a 'digital concierge' idea.
In order to learn a bit more about users, and test out what might make a tool like this successful, we integrated qualitative prototype and user interview sessions into the design process. The user testing sessions were iterative and occurred during the strategy, wireframes, and design phases of the project. This allowed for the learnings to be built-upon and integrated as the project advanced. The study took place in 3 sessions, which scaled from paper prototypes, to grayscale wireframes, to full-color mock-ups. Details on the test subject are below.
Design Research: Planned and conducted design research; created a screener and conducted recruitment for user tests; collaborated with third-party facilitators to establish research goals, test scenarios, and prototype materials.
UX/IX Design: Defined information architecture and product strategy; explored user flows; collaborated with development team and content team to establish a pattern library of 'content blocks' and base templates that could be used across a variety of pages; created paper, low-fidelity, and high-fidelity "click-able" prototypes; laid out wireframes and interaction design; collaborated with visual designer.
Creative Direction: Educated client and internal agency team on iterative, research-based approach to design; led strategy and project vision.
INFORMATION ARCHITECTURE & INTERACTION DESIGN
The website had a TON of content, which I organized into a variety of templates and 'content blocks' (think, bits of functionality that can be added, repeated, reordered, or removed across any template). The pattern library of 'block'-style functionality components and a base set of templates were flexible and easily adopted based on content needs to grow with the company over time.
STARTING WTH PAPER
The first usability evaluation consisted of one-on-one interview sessions. A third-party moderator asked the participants to complete a series of task-based scenarios. The scenarios involved simulated use of the credit union website using a paper prototype and varied from creating a checking account, researching small business loan rates, and learning about the home buying process.
The results were promising. The general concept had positive reactions with the user interviewed, but they often gave up when interacting with the first menu, citing that the options were 'too generic.' It quickly became clear that an alternate version of the interaction should be considered.
Wireframing a couple options
In round 2, we decided to A/B test a couple of interaction ideas, while also moving the test into digital wireframe prototypes. Version A had a digital assistant offered a variation that utilized complete sentences that might represent what users of the website might be looking for. Version B tweaked a bit of the interaction of the previous sentence-builder.
Refining the Interaction
It became clear that users wanted the control to type rather than select from multiple fields for this particular type of interaction!
The last round of testing turned up the level of refinement one more step, introducing some basic design elements, such as color and a field to type in that dynamically serves up a list of pre-populated options based on what is typed. This version was what the design team built upon as the team got closer to the project launch.
From idea to execution...
The evolution of how ideas change throughout the creative process has always been one of my favorite aspects of designing 'in the real world.' It'll be interesting to see how the interaction continues to evolve and refine over time.