As the dating product lead and art director at Community Connect Inc*, a DotCom era startup, I was responsible for overseeing the dating sections across its various communities. Community Connect was a company that developed niche social networking sites for different ethnic and minority audiences in the U.S., with networks such as AsianAvenue, BlackPlanet, MiGente, and Glee.
I oversaw UX research and development, UI direction, branding, and marketing, as well as frontend production for BlackPlanet LOVE, AsianAvenue FLIRT, and MiGente Amor.
As the dating art director and UX lead, I worked with a team of 2 designers, a product strategist, a content writer, a backend developer, and a project manager/producer.
Upon joining the team, I contributed to a year-long project that comprehensively redesigned CCI’s dating product, which involved user research, collaborative UX design, prototyping, testing, and ultimately, a branding and UI redesign and implementation.
In the team’s existing process, design members would develop the website’s HTML code, incorporating all aesthetic UI and branding aspects, before handing it over to the backend engineers for integration with the application code and database system.
In this dating redesign project, we radically transformed our front-end development methodology to align with recent web standards updates, migrating from HTML 3.2 to HTML 4.01 and adopting the HTML+CSS methodology, which had finally achieved consistent cross-platform support in web browsers.
Here are some of the redesigned UI themes, including those for AsianAvenue Flirt, BlackPlanet Love, and the newest of the dating sites, MiGente Amor which for which this design direction would be the first version.
In these, I set the direction for each property, creating moodboards, color palettes, and choosing fonts and other styles. I also created the branding direction for MiGente Amor, and updated the branding for BPL/AAF then created the homepage mockups for each community.
After presenting the directions to the team and making a final presentation to the company’s C suite, I designed all the template pages for BlackPlanetLove and guided my designers in creating the necessary additional pages for AsianAvenue and MiGente.
This work was part of the web 2.0 era, the 2nd wave of the web, which predates the mobile web.This version of the site was not designed for mobile interactions, which didn’t become common for another 8 years.
This new front-end coding paradigm enabled us to separate the site’s UI visual elements from the application code and HTML, revolutionizing the way the cci community sites were built.
Earlier versions of the CCI community site had UI and branding elements embedded in the HTML, making each of the company’s networks a group of standalone applications.
For example, BlackPlanet Love’s code was independent of AsianAvenue Flirts’ code, leading to complex, redundant, and resource-intensive maintenance, updates, and bug fixes when updating the site or adding new functionality.
As a result, we struggled to maintain feature parity across networks. Furthermore, each community’s dating site would develop its own unique bugs and system issues due to the distinct usage patterns of its audience, even if they shared a common initial codebase.
I worked with John Merlino, the designer I supervised, to make a case for adopting the new CSS+HTML development methodology, as our current methods were overwhelming us with the task of maintaining three sites that should have been more manageable, but the constantly diverging code base made it anything but.
We presented this change as a real efficiency gain, highlighting the streamlining it would bring to our process and the significant benefits it would have on our code.
Our team-level suggestions led to a massive company-wide change, necessitating significant adjustments to the engineering team structures to accommodate new responsibilities, and ultimately resulting in a three-fold reduction in code duplication across different communities.
Instead of maintaining three code bases for each section of a community, we could have one application code base which would connect to different database backends and different CSS/JavaScript front ends.
The backend developers would now be responsible for the product’s actual functionality, including creating the frontend HTML and JavaScript, which would reduce the likelihood of conflicts within the application code.
The design team focused solely on the UI’s aesthetic and branding aspects, managing all of the CSS related to how the sites looked.
We developed a vast, reusable component library for each community by breaking down and abstracting UI interface elements, making it easier to reskin them at a higher level, and enabling their reuse across different communities without affecting their specific functionality.
The backend team could just use a base ui element and the appropriate colors, shadows, strokes, patterns, textures, fonts would be applied at a higher level.
You can see a lot of our project’s work replicated in today’s JavaScript/CSS frameworks like React, Angular, and Vue, even though our work predated these frameworks by years.
The company experienced far-reaching consequences as a result of these changes, which led the dating team to become the prototype product team and influenced the corporate-level adoption of our methods.
The company converted the dating team’s CSS library into a front-end coding framework, enabling the reuse of code elements across different community silos and product categories, including BP/AA/MG and dating, jobs, and directories.
