Hi, I'm Jordan

UX / UI designer & web developer.

SMCI Preview Clickable Image Animadeus Preview Clickable Image Le Roi Croc Preview Clickable Image

Whats with this guy?

I'm Jordan, a recently graduated Web Developer from British Columbia Institute of Technology.

I love learning new technologies, and finding out what I can do with them. I just taught myself AngularJS and the Google Maps API to create a website that would dynamically display data and make it interactive. I am currently learning react to create fitness progress tracking application.

If you want to reach me, there are a few channels below where I can be found, or you can email me at albert.jordan.coil@gmail.com

Shared Mobility City Index

Visit

My Role

I was a Web Developer and Designer on this project. I did all the front and back end development. As well, I did UX research, as well as UX design, including personas, wireframes, and mockups.

Skills Used

  • UX Process
  • CSS / SCSS
  • PHP / MySQL
  • AngularJS
  • Google Maps API

Initial Sketch.

SMCI Sketch

Lo-Fi Mockup.

SMCI Lo-Fi Mockup

Live Prototype.

SMCI Prototype

Visualizing Data

For my practicum at movmi, I created the Shared Mobility City Index website. I was part of a team that had gathered data from different cities around the world. My task was to find a way to visualize that data.

I looked at different technologies and frameworks that would solve the problem of visualizing city data. I eventually decided on using AngularJS to process and organize the data, and the Google Maps API to present this data on a map.


Self Learning

During the course of this project I was working from home. This means that I had to teach myself the technologies I decided on, AngularJs and the Google Maps Javascript API. It was a rewarding challenge, that produced a final result that I am proud of.

Animadeus

Visit

My Role

I was a front and backend developer as ell contributing to UX Design. Animadeus was my favourite major project from my time at BCIT.

Skills Used

  • UX Process
  • Protoyping
  • PHP / MySQL

Initial Wireframe.

Animadeus Wireframe

Hi-Fi Mockup.

Animadeus High Fidelidy Mockup

Animating On the web

Connor McLeod, Joel Fields, and I decided to make Animadeus for our project class because we felt passionate about CSS3 animations. It was a big collaboration starting with all of us working on a persona, page description diagram, moodboards, and user scenario.

Our UX process drove our design decisions and individual contributions. I worked on sketches, wireframes, prototypes, and eventually taught myself how to use PHP and MySQL to make user accounts and generate custom URLs for user created animations.

Le Roi Crocodile

Visit

My Role

I created this project to explore layout and animation on the web. I took all the photos and video, as well as conducting the interview before coding up an article webpage with a parallax scrolling effect.

Skills Used

  • UX Process
  • jQuery
  • Video / Photo

Web Video and Parallax

I was inspired by a featured article on pitchfork.com on the musical artist Mac Demarco. I wanted to recreate it including the parallax effect, and I thought it would be a great oppurtunity to do the article on my friend, Le Roi Crocodile.

There were two big challenges on this project, the web video and parallax scrolling. I had to learn alot about after effects to get the web video in the proper format and size for the web. The parallax scrolling effect taught me alot about conceptual programming and mapping out my ideas isn't just limited to design.