Old Portfolio

The music school I teach at has been in need of a new website for a long time.  I am currently in the process of developing a more functional, user-friendly, and beautiful responsive website to suit their needs.

The first thing I did was create a persona, and then a journey. Actually, the first thing I did was google how to begin creating a website and UX Design, but I digress... I did a lot of research on the how before I started this process since it is my first real-world project, and I'm not just designing a fun website for my dog!  I wanted to get it right, so I read a lot of articles and books...

I went through quite a few varied ideas on Sketch, from really ugly to bizarre, before finding one I liked.

I started with the current websites look and tried to create an "improved" version, which is the one you see creatively titled, "HomePage" and "HomePage View 1."

Then, I did some research online, and looked at some very popular websites such as forbes.com and businessnews, and Apple, and came up with the standard black navigation bar with a full cover size image as the background.

For fun, and because I had been reading about Brutalist websites, I made a Brutalist style sketch as well- I knew it wouldn't work, but I wanted to try everything and see what I liked best.

My boss liked the images I had found on unsplash.com, so I began fleshing out ideas for the image-centric homepage.

I wanted to keep the navigation bar very simple, so I decided on using drop-down menus.  I also explored using a hamburger menu, which works much better on mobile and can include more navigation items without looking.

My boss had requested including a navigational sitemap on the bottom of every page, so I worked out an organized way to display everything in the footer.  It's not a "real" sitemap, but I think it is easy to understand and includes all of the important information he had requested without cluttering the rest of the page.  He also wanted a video on the homepage, so I made sure to include a spot for where the video may go.  I added a contact form on my own volition because I think it will make it much easier for potential clients to contact KCSM.

Then, I got the news from my boss that Kansas City School of Music will be adding a dance division soon, which will mean that KCSM will become Kansas City School of Music and Dance.

After revising the current logo and creating a new logo to accommodate "and Dance," I began experimenting on Sketch with a new layout for the homepage.  I ultimately decided on using a split-screen homepage because it is visually appealing and makes it clear to the user that they have two options: Music and Dance.

This time, I started smaller, and created grayscale thumbnail type sketches.

I added images, and ultimately decided to do away with the top navigational bar for the homepage because it cluttered the split screen and was not necessary to understand the navigational menu.  I added color to the guitar image, which was originally black and white, in order to create more balance.  The high contrast between the white and black split screen creates more excitement and interest.  Color was still lacking, however, so I added a contrasting blue color.  Unfortunately, the original KCSM blue did not have enough contrast in this color scheme.

I kept the drop-down menus from the previous mockups and adjusted some of the listings in the drop-down in order to keep the visual appearance simpler at first glance.

I also kept the rest of the page the same, with contact form and the "sitemap."

I went overboard in how much I needed to do, and learned how to code the site as well.  I had taken the codecademy.com HTML5 and CSS3 Part 1 course last month, and combined that experience with googling things I didn't know how to do, and was able to code this:

The above screenshot has a subtle difference- the "Enter" button turns solid blue when the user hovers their mouse over it.

The one thing missing from my code is the video element, which will be placed below the main images, and above the call to to action contact form.

Here are the documents for the other pages of the website:

 

The main blog page:

Blog post:

The main faculty page:

 

Click on a faculty member:

Click "Lessons" in the navigation bar:

Click on one of the lesson types:

Click on "About us"

Calendar main page:

Click on a specific event:

Lastly, our testimonial page:

Based on feedback and a request for a Carousel style homepage, I came up with the following examples of what we could do:

This website is not live yet, and will continue to be revised with feedback.

Moving forward, the first thing I'd like to fix is the height of the navigation bar if we are going to move toward a carousel homepage instead of a split screen.  I'd also like to tweak some of the colors and make sure that the subheadings are all following the same rules as far as opacity and greyscale go.

However, the biggest thing on the "next" list is building the site itself, remotely, and doing so on a short time-frame- I'd like to have most of it done this weekend.