Since joining the Conenza team, I’ve been the lead UX designer and developer in charge of completely refreshing and retrofitting the front-end UI/UX into a modern & mobile-friendly experience. I’ve led the efforts to address customer pain-points and create a truly scalable UX architecture.
Conenza is a SaaS-based provider of corporate alumni products and services to Fortune 500 companies. The ROI for these companies is re-recruitment and business opportunities with former employees. Simply, it’s cheaper to rehire than it is to hire. The potential savings can add up to millions of dollars a year. Our platform also allows for the complete ownership of the branding and user data that others, such as LinkedIn, do not provide. The challenge was to modernize an antiquated UI and codebase with significant technical debt.
- UX/UI Design
- HTML5/CSS3/SASS Architecture
- Interactive Protoyping
- Responsive Retrofit
The UI was significantly updated to be more welcoming and modern. Large engaging imagery and more prominent CTAs replaced text-heavy pages that had no clear hierarchy. Buttons, typography, inputs, and various other elements were rewritten to be consistent and customizable. As I standardize UI elements and interactions, I traverse them into a style guide library.
Here are a few examples of alumni communities that have been built on the themeable, SASS-based template architecture (more on that later) that I created:
In addition, Conenza’s mobile experience was outdated. Our leadership knew our mobile experience needed a lot of work, something we actively avoided during sales demos. To help alleviate these pain points and to have a competitive product, I removed the mobile templates and coded all the responsive styles, building on the improved UI/UX.
Improving the Registration Flow
Since our communities are largely gated and I felt that the registration process needed to be improved to minimize any friction in joining. The existing registration process was cumbersome because our clients often requested anywhere from 12-25 pieces of information in order to gain access while others required a separate payment flow. I began by deconstructing the existing process to understand the variation between clients.All images are owned by Conenza and used by permission.
I modeled Conenza’s registration UX around the notion of collecting the minimal amount of information needed to get started and gradually engage them through the signup process. Confronting users with so many form fields violated form best practices emphasized in research studies.
I decomposed our registration into a sequential process:
- Information needed to create an account on the Conenza platform.
- Client required information to verify a person’s credentials.
- Payment (if applicable).
- Let them know their account would be verified within certain number of days.
I prototyped the user flow into high-fidelity HTML mockups to help illustrate the desired flow and interactions to our team.
All images are owned by Conenza and used by permission.
I removed the redundant password field while adding a show password button. Additionally, there is variability in our password requirements, but those requirements (often extensive) were hidden behind an input hint (oddly later reverted back to an input hint by the request of our CX team purely for an aesthetical POV). I exposed those to help the people successfully navigate the password creation process. I do feel that it’s punitive to end users by applying corporate policies to a 3rd-party system that has no connection to the parent company’s network. The forgot password page is one of our most visited pages because people are constantly forgetting their password due to the complex requirements.
If we had the development resources and time to support it, I would have build additional UX functionality, such as:
- A password generator that meets the corporate requirements.
- A password meter to help a person understand if their password is secure enough.
- Visual reinforcements to help a person understand which requirements have been satisfied.
I also challenged our CX to push back on client fields that seem unneeded, as well as to help our clients understand that additional fields lead to lower conversion rates. A better practice would be to also gradually collect new information as the user engages within the community and once they believe there’s value in doing so.
As part of updating our platform, I'm introducing animated elements, such as multi-state buttons, dropdowns that expand outward, drawers that open up with staggered animation, among others. There are so many good interactions out in the wild that it's hard not to want to do it all...although not the ideal experience in our client's context. Here are a few examples of elements that help communicate interactivity.
We’re a small team at Conenza, so I’m constantly balancing user, business, and technical considerations as I prioritize features for my UX designs.
One of my biggest limitations is having to use or workaround existing HTML (often table-based) markup, and varying levels of shared CSS styles. Initially, the codebase was fragmented and new implementations were essentially cut and pasted from older clients.
I integrated SASS into our CSS architecture, abstracting variables and modules into logical groupings. I’ve had to spend quite a bit of time considering best practices in scalable CSS/SASS architecture. There are over 200+ variable abstractions within our SASS settings file for each client that helps fine tune the branding and experience. I also built numerous mixins to help support variations in common UI elements and other formatting.
The results have been dramatic. I’ve cut the implementation time for new clients from an average 3-5 days to minutes. We can now update a client’s branding and have those changes cascade throughout the site.