I am Ariel Cotton.  I'm an artist, product designer, & maker of interactive things.

I craft beautiful, human-centered interfaces for web and mobile applications. I draw and write comics about life in Berlin and New York City. I even tinker with electronics and make interactive art from time to time.


The Data Incubator

Categories UX design
Tools Balsamiq

Visit site


Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

The Data Incubator is a fellowship for data scientists who recently graduated from university. They approached me to redo the UX design for their brochure website. Their main goal was to make the website as accessible as possible for their three audiences: data scientists who wanted to learn more about the fellowship, employers looking to hire data scientists, and employers interested in corporate training techniques for data scientists. In the process, I sought to make the entire website more intuitive in general.

Initially, the website was one page, split up into different sections, with parallax scrolling. As you can see below, there was only one section on the whole site dedicated to describing the fellowship and hiring data scientists, and many useless, redundant sections that distracted from the main point of the site.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

The website was slow-loading because of the parallax, and the headings were hard to read because many of them were placed over busy photographs.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

I used Balsamiq to produce a series of wireframes proposing a restructure for the site. The first step was to remove the unnecessary sections, and to create individual sections for the fellowship, hiring data scientists, and corporate training for data scientists. Then, I did away with the one-page concept and suggested they use individual pages for each section, for the sake of navigability. The index page would contain banner links to each of the three important sections, thus stressing the main point of the site immediately.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

What followed after purging the website of its unnecessary content was assigning the remaining content on the site to each of the three pages and adding new content requested by the client.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

The company then remodeled their site after my wireframes. Here are the results.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

They removed the parallax scrolling, divided the content into separate sections, and picked photos that were less distracting from the heading text. They also reduced the size of the header to save screen real estate, as per my suggestion.

Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing Ariel Cotton UI UX Design The Data Incubator Brochure Website Tech Software Wireframing

Top