Have an idea? Let's get in touch.

© Rachael Ng 2019

YorkFest

 

Bringing together York University Lions 

Role

Ideation

UI/UX

Visuals

Coding

Timeline

UI/UX Design and Coding - September 2019

(1 month)

 

 

Type

Website

Tools

Adobe XD

Photoshop

Illustrator

HTML

CSS

The project assigned was to choose an event of our choice and design and code a website for it.

THE CHALLENGE

THE SOLUTION

At the time of this project, an event was going on at my university, YorkFest. When I went to take a look at their website to find event details, I struggled to spot key information quickly, and was bombarded with text that was not applicable to me. I began to make mental notes about things I would change about the site, and realized this would be the perfect website to redesign for the project.

THE ORIGINAL SITE

I began by taking key information, and noting the things I would change about the original site. The most prominent things I noticed were:

  • The immense amount of text was the first thing a person saw when arriving at the YorkFest site. Although it gave background on what the event is, it was daunting to read due to the sheer amount.

  • Information not relevant to attendees was on the main page, adding to the volume of unnecessary text.

  • The way the events were listed made it hard to find key information such as the date of the event, and what time it was. Although the event images were visually pleasing on an individual basis, all of them being side to side was too much visual information at once.

INITIAL PLANNING

I made possible site maps after combing through the original sites information, and brainstorming which page it would suit best.

I sketched out possible layouts for the desktop, tablet, and mobile version. 

LOW FIDELITY MOCKUPS

VISUAL DESIGN

I wanted to keep the look similar to York University's brand, as it was an event aimed at York students. I did this by keeping red as a primary colour, along with white and black. I wanted to make the events look fun, and have the information easy to find. Unlike the original website, I did not want to bombard the user with a lot of visual information and unnecessary text. 

HIGH FIDELITY MOCKUPS

After creating the mid-fidelity mockups, I inserted the images and colour. The only difference between the mid-fidelity and high-fidelity is the sponsor logos were changed to be in greyscale on the high-fidelity version.

Home Page

Events Page

About Us Page

Opportunities Page

Throughout the entire process of designing and coding this site, I learned a lot. I wanted to try many things, such as motion graphics, Javascript, and implementing other visual elements. Although this was the case, I was unable to do so due to limited time and coding ability.

Even though I was unable to do a lot of what I wanted to do, I still improved my coding skills, and I am grateful for the opportunity to do so. This was my first experience with responsive design and coding, and I can definitely say that through the challenges I faced, I learned plenty about CSS. It amazed me how there were so many different ways to code a page.

Looking back, I would definitely change some things. I'd like to tweak some of the typography on the home and events page, to establish a clearer sense of hierarchy. I would learn motion graphics to make the experience a little more fun, and more visual elements on the home page.

REFLECTION