Our client, a credit union servicing organization, provides marketing services for financial institutions, such as credit unions, real estate companies, and commercial lenders. Such customer companies assess the capability of our client through their website, which presented the following challenges and opportunities for the client:
1) Difficult to manage and update content (having to go through dev shop)
2) Visual design and brand identity not cohesive and severely outdated
3) Usability challenges for their users while navigating the website
The client and our project team at Nerdery eventually agreed that their the core functions of their website could be improved with a better user experience, which could significantly cover ground towards their business goal of increased lead generation.
After working with Nerdery developers to evaluate different content management systems (CMS) based on client requirements and functionality, we proposed a website redesign using a CMS called Craft.
This website redesign project was an ideal opportunity for me to flex my project management and consulting muscles. We hosted multiple stakeholder workshops to understand the in's and out's of our client's business, including their business model, organizational structure, long-term goals, target customers, key requirements, nice-to-have's, services offered, etc.
I realized soon enough that this research phase would be an undertaking that merited a project calendar, which I always assemble at the early stages of a project:
After establishing a project plan, we invited the client to our office for the first of 3 workshops.
This project taught me the importance of starting off a workshop by aligning on business and user goals in hopes of achieving a balance between the motivations of the client and their customers. The following diagram was a combination of work between us and the client in order for us to fully understand how their business process and user journey maps together (from top to bottom).
Immediately afterwards, we start with the stakeholders and use a human-centered approach by generating personas with the client. With these personas and the goal statement in mind, we embarked on an affinity wall mapping activity to establish a sense of hierarchy and organization of user flows throughout the website.
My design process started with debriefing from the workshop with all Nerdery participants and reviewing the project plan together.
To help illustrate any intricacies and align our project team at Nerdery, I created a sitemap that reflected the findings from our client workshops, especially from the affinity diagrams.
At this point, I had concluded we had enough data from our three client workshops to start sketching out ideas. These sketches of mine eventually became metaframes, which we did as an interstitial step in order to take "baby steps" with the client. Upon presenting the many iterations of the metaframes, the client and us were able to focus only on hierarchy and information architecture, as well as user flow. Upon reflecting on this process, wireframes would have possibly revealed too much of our design at once and thus overwhelmed the client.
After reaching approval from key stakeholders within the client organization, I proceeded to draft several revisions of wireframes in Sketch. In our wireframes, we try to insert as much realistic content as possible in order to ensure that the layout is conducive to the content.
Parts of the header and footer have been purposely redacted.
During implementation, I took the initiative to meet with our front-end developers frequently in a pair-design setting. Aside from handing off traditional wireframes, style guides, and annotations (which I did), we often sat at the same desk and talked our process out loud. This helped the developer become more familiar with my design intentions and in turn enabled me to become aware of any implementation constraints from the developer's perspective.
Our client launched their website during summer 2017 and have seen continued success with lead generation.