Case Study 01
USER EXPERIENCE, FRONT-END DEVELOPMENT,
ART DIRECTION, VISUAL DESIGN. BRANDING
In 1983 WALZ revolutionized certified mail with the Walz Certified Mailer. It broke new ground again in 2002 with its first SaaS offering, CertifiedPro.net. Since then, they have helped thousands of clients across the nation to send, track, and manage more than 300 million transactions.
Visit the website
Looking to attract potential investors, WALZ needed to re-invigorate their CertifiedPro product. A proverbial workhorse, the SaaS solution had endured an extremely long life with little change.
I was tasked with simplifying the experience, creating more stimulating visuals, and implementing responsive front-end technologies all while minimally impacting the core product.
A brief competitor analysis revealed WALZ as the dominant leader in its niche. Their customer base ranging from law offices & mortgage lenders to courts and governmental agencies.
I first identified user behavior patterns through Hotjar click, move, scroll and visitor recordings. Coupled with support ticket analysis, and analytics, there was no lack of data to interpret. I leveraged the active sales team with scripted polls gain further insights on specific interfaces.
The project kickoff brought together key stakeholders, and representatives from development and QA teams to assess business needs, requirements, and to formulate an action plan.
After defining the MVP and setting success metrics, we broke tasks into manageable scrum-sized pieces. The VP of Software Development, the original developer of the product, elected to play both project manager and scrum master roles.
As a product of expert-user and stakeholder interviews, I created proto-personas to inform early design decisions.
Initial assumptions were validated & refined into personas with results of heat maps, user recordings and phone pole feedback.
User Journey Map
Brainstorming with product manager and customer service, we quickly sketched out touch-points and flow.
We then mapped customer responses and emotions to the appropriate points.
The rough sketch were polished & delivered as visual reminders of customer needs.
From a design library developed for an earlier project, I assembled basic wireframes.
Ample whitespace was applied and strict attention given to visual hierarchy and building logical flows.
Gestalt principles were employed to deliver better cognitive grouping and aid in chunking.
High Fidelity Mockups
With the wires as a guide, iteration began on the landing pages of both the app and site.
After some deliberation and several iterations, the base design was approved and work continued to the remaining pages.
A team of one and with back-end on my heels, I had to balance both design & front-end.
After the design of each page was approved, I set to work on creating the front-end code.
Styles were defined in LESS, and Bootstrap used to build out the responsive features.
"A lot of times, people don’t know what they want until you show it to them."" – Steve Jobs
This quote proves particularly insightful when considering products used daily by internal teams and thousands of customers. We can sometimes lose track of the nuances that caused us friction at the beginning. Change came only after I showed how it could be done differently.
Though not all solutions proposed made it to production, we successfully delivered a cleaner, simpler, more polished, and user-friendly experience.