Owen Essen

Entrepreneur

Designer

Storyteller

Owen Essen

Entrepreneur

Designer

Storyteller

Blog Post

UX/UI Design

December 20, 2017 Design, Portfolio Pages, UX/UI Design

I got into UX/UI design while studying full stack web development at UNC Chapel Hill’s Coding Bootcamp. The program was focused more on writing code than on designing layouts or user experiences, but coming from art/design background (Savannah College of Art and Design) I tended to go above and beyond in making the sites I built both beautiful and user friendly. My teachers took notice and encouraged me to explore further the intersection between the technical side of building websites and the world of art and design. I found the area fascinating and began to dive deeper into the toolbox of a UX/UI designer.

As an artist I approach every project with a sense of vision and the goal of creating something with a distinctive flair. As a full stack web developer, I have an appreciation for how the designs I create will actually be implemented. As a PSM I certified Scrum Master I also have a great appreciation for iterative development and the user-centric, research-based workflow that helps make A-list UIs more competitive.

Below are a selection of UIs/UXs I’ve created.

Availevent

Screenshot of the original Availevent homepage

Availevent is a work-in-progress site I’m currently experimenting with that allows users to buy and sell tickets to private events. It’s a P2P marketplace in the spirit of Airbnb.

Designing the site has been a lot of fun. From a UX standpoint, the mission is to take a complex marketplace and distill it down to a simple, intuitive series of users flows. From a UI standpoint I’ve been experimenting with things like hand coded parallax effects, seamless video integration, transparency and animation effects and dynamic, interactive pages.

NOTE: I recommend viewing this site with the Google Chrome browser. Because it’s still a work in progress I’ve identified some display problems with other browsers that I’m currently in the process of fixing. Sorry for any inconvenience.

Live Demo

Face Match

Wireframe of the Face-Match homepage
Face-Match Screenshot

I was in charge of designing the UI for Face-Match, a site that allowed users to upload a photo and find a stranger who looks like them.

I wanted to come up with a visual paradigm to represent the backend sorting through and comparing an uploaded photo with existing photos in the database. I started thinking about rubik’s cubes and ended up creating a rotating 3D cube with photos of different people on each side. The cube rotated on it’s own, but could also be grabbed and manipulated by the user.

Unfortunately the fully operational site is no longer online, due to higher than expected maintenance costs, but you can checkout the source code on GitHub, a live demo of the front end (including my 3D cube), or watch a video demo of the fully operational site below.

Gardyn.org

Gardyn.org Screenshot

Though UI design for this site was primarily handled by Alec Schleicher and Jeremy He, I was responsible for handling the more high level design for site flow, database interactions, etc.

One of our primarily goals for Gardyn.org from a design standpoint was to figure out the best way to make a large information set as intuitive and easily accessible as possible. We studied sites like Wikipedia and IMDb, which we felt did this very well. Presenting varied information in a highly standardized way helped to make the site more accessible. We also replaced redundant words with graphics to make the site easier to consume quickly and painlessly.

Site flow design for Gardyn.org
Site flow design for Gardyn.org
Gardyn.org API interaction design
Gardyn.org API interaction design
Gardyn.org database structure design
Gardyn.org database structure design

Diagonal Scrolling

Screenshot of Owen Essen's Musicians Gify site

I love experimenting with new approaches to common UI interactions. Diagonal scrolling was one of my more unusual experiments. The idea was to create a system by which items would move diagonally across the page as the user scrolls, weaving in and out of each other. I used GIFs as a test case and made it a requirement that every GIF would remain clickable no matter where it was on the page.

It required some JavaScript wizardly to gauge the dimensions of the browser window and then make the necessary calculations accordingly, but I’m really happy with how it turned out.

Live Demo

Tiki Hangman

Tiki Hangman Game Screenshot

I was asked to design and build a hangman game which gave me the opportunity to really get creative with the UI.

Live Demo

Taggs: