CONNX Solutions – Joanna Kaner

TIMEFRAME

3 months

MY ROLE

UX Design & Front-End Development

TOOLS USED

Justinmind Prototyper, Sublime Text

MY DELIVERABLES

Lo-Fidelity Wireframes, Hi-Fidelity Prototype, and HTML/CSS/JavaScript Code

Project Background

CONNX Solutions is a database solutions company committed to transforming how customers and partners around the world access, integrate, and utilize data.

In the summer of 2015, I interned at CONNX as a UX Designer / UI Developer. During my internship, I worked closely with the sales, marketing, and IT teams to redesign the corporate website and develop a mobile-responsive version of the site. This project allowed me to apply both my UX design skills — including sketching, wireframing, and prototyping — and my front-end development skills, using technologies such as HTML, CSS, Bootstrap, and JavaScript.

Old Website

Here are a few screenshots of the website before the redesign.

CONNX Solutions Old — Solutions Home Page

CONNX CDC Old — Change Data Capture Solution Page

CONNX DataSync Old — Old DataSync Product Page

Process

Competitive Analysis

I began the design process by conducting a competitive analysis of industry leaders such as Tableau and Informatica. This helped me identify effective design patterns and UX strategies commonly used on websites that market data visualization software.

When I joined CONNX, the team had already developed basic mockups for the new site. After reviewing these, I provided feedback grounded in UX best practices and insights from my competitive analysis. One area that hadn’t yet been addressed was the mobile experience. Since CONNX wanted to expand the site’s accessibility to mobile users, I took the initiative to sketch out responsive mobile designs. These designs aimed to retain core functionality and visual consistency while optimizing for smaller screens.

Notable Findings:

Breadcrumbs.
Products are categorized (ex: Data Integration).
Solutions are categorized with sub-menus under each category (ex: Solutions by Industry).
Icons are utilized for categories.

Lo-Fidelity Wireframes

Since CONNX had already created low-fidelity wireframes for the desktop redesign, I took the initiative to sketch concepts for the mobile version — an aspect that hadn’t yet been explored but was a key goal for the new site.

Hi-Fidelity Prototype

After sketching lo-fidelity wireframes for the mobile version of the website, I created hi-fidelity designs using CONNX’s style guide to ensure visual consistency. I then presented these wireframes to the marketing team and my supervisor for review and feedback before beginning development.