Keep the conversation going...

Just because someone has left your company, doesn’t mean you can’t keep the conversation going. Some of the world’s largest brands use the Conenza alumni platform to stay in touch with former employees.

alumni community logos

Overview

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.

My Role

  • UX/UI Design
  • HTML5/CSS3/SASS Architecture
  • Interactive Protoyping
  • Responsive Retrofit
Update Conenza Platform UI

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:

Microsoft Alumni Community
Dell Alumni Community
Gates Foundation Alumni Network
BDO Alumni Network

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.

Examples of mobile experiences for Dell & Microsoft Alumni Communities

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.

User flow deconstructed to help understand the many paths a user could take through the registration process.

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:

  1. Information needed to create an account on the Conenza platform.
  2. Client required information to verify a person’s credentials.
  3. Payment (if applicable).
  4. 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.

Step 1 of the new registration process that focuses on having users make a small initial commitment. Only absolutely essential information is collected at this point.Step 2 is for collecting any client required information in order to verify employment at the alumni's parent company.The Microsoft Alumni community is a bit unqiue, in that its a paid membership. Step 3 allows a user to select their tier, as well as donation to the MSAF fund.The last step is the credit card payment step.

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.

Micro Interactions

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.

The save for later button changes states after a user clicks on it to reinforce its action.When a person taps on the search icon, the search input decends and the search button animates in a sequence.

Technical Challenges

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.

An example of the some of the SASS variable abstractions used to control the branding

Results

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.