Design Insights

Project Objective

SupportCarryZilean.com provides educational resources for League of Legends players who are eager to learn how to play Zilean in the support role.

The website offers in-depth articles and resources to help viewers become better players.

My role was to research relevant content, design the website, and create informative articles.

I collaborated with professional game analysts and content creators to create a unique experience for visitors.

New Skills Used

• Flexbox
• AngularJS for static and dynamic content
• FileZilla
• More organized file structure
• Atom

Insights Learned

This was my first time building a full website without a framework or grid system, so the experimenting with Flexbox was incredibly fun. One key insight that I learned from Flexbox is that prefixing is a necessary part of any project, especially if you do not plan on using a framework.

Initially I was concerned about the incompatibility of Flexbox and IE, but after looking at the visitor data through Google Analytics, the number of users visiting through IE was under 2%.

Project Objective

This website shows the work that I have been a part of, as well as the progress that I have made as a UX Designer.

This is the 6th iteration of this website, designed towards a the popular single-page websites, along with several quality content pages describing my work.

New Skills Used

• GitHub
• Foundation 5
• Grunt/Gulp
• JQueryUI
• Mobile First Approach

Insights Learned

When I originally started building this website, I thought it wouldn't take long. Yet as I started working on it, I became more aware of little things that I would like to do differently.

Although I've known about the mobile first approach to writing CSS, I've always coded for the screen size in front of me, then scaled back with media queries. This time, I started the design process thinking about mobile first, then the transition into larger screen sizes.

Additionally, I've also revisited the content strategy of each page and aligned those articles to be more UX focused.

Project Objective

This is a listing website for the furniture that my family was looking to sell before we moved to Washington. Unfortunately, it is out-dated since we have already moved and sold many of the items on the website.

New Skills Used

• AngularJS for populating content
• More JS than normal
• Command line functions

Insights Learned

This was a quick website that I build for my family. I took the time to try out using AngularJS for the recursive items, instead of having to list every single item.

I will admit that I don't fully understand AngularJS, but I do see the power that the framework holds. There were many useful ways for me to quickly alter data to reflect changes in product and prices.

That said, there are a few design decisions that I would go back and do differently, such as putting a main-wrapper over the whole page to shrink content on larger screens closer to the center, rather than spreading content to the edges of larger screens.

Project Objective

This is a listing website for the furniture that my family was looking to sell before we moved to Washington. Unfortunately, it is out-dated since we have already moved and sold many of the items on the website.

New Skills Used

• Bootstrap 3
• JQuery
• Sass
• Compass

Insights Learned

This iteration of my portfolio is a polishing of the previous version, with content and styling cleaned up. Before, there was too much white space and the page looked incredibly flat. I sought to change that by incorporating pattern backgrounds and darker contrasts.

This project was also the first where I started working with Sass/Scss and compass, where I had a single .scss stylesheet with everything piled into it, including Bootstrap's css.

I also learned about Bootstrap as a grid system, which relieved many headaches in the design and coding of this website. At the time, I fell in love with Bootstrap.