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-solution company that is dedicated to transforming how their worldwide customers and partners use, integrate, and access data by providing solutions to meet the IT challenges of today while providing a reusable framework for the future.

In the summer of 2015, I interned at CONNX Solutions as a UX Designer / UI Developer. At CONNX Solutions, I collaborated with the sales, marketing, and IT teams to redesign the complete corporate website; utilizing both my UX Design skills (sketching, wireframing, prototyping) and my Web Development skills (HTML, CSS, Bootstrap, JavaScript) to create both a desktop and mobile version of the website.

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 analyzing competitor sites, such as Tableau and Informatica, in order to identify best design practices for websites that sell data visualization software.

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

When I started my internship, CONNX had already created basic mockups of what they wanted the new site design to look like. They showed these mockups to me and I provided some feedback based on UX best practices and the findings I came across when I did my competitive analysis. From there, I went ahead and sketched out what I thought the mobile version of the website should look like, since that was something CONNX didn’t have before and that they wanted to include in the new design.

Hi-Fidelity Prototype

After sketching out the designs for the mobile version of the website, I went ahead and created a hi-fidelity version of the wireframes utilizing CONNX’s style guide. These hi-fidelity wireframes then got signed off by my supervisor and I started coding.