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.Persona
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.

Screen Shot 2017-07-22 at 12.06.03 PM.png

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.

Screen Shot 2017-07-22 at 12.11.28 PM.png
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.

Screen Shot 2017-07-22 at 1.14.19 PM.png

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.

Screen Shot 2017-07-22 at 1.17.29 PM.png
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:

Screen Shot 2017-07-22 at 1.44.55 PM.png

Screen Shot 2017-07-22 at 1.45.39 PM.png

Screen Shot 2017-07-22 at 1.45.49 PM.png

Screen Shot 2017-07-22 at 1.45.58 PM.pngScreen Shot 2017-07-22 at 1.46.10 PM.png

The above screenshot has a subtle difference- the “Enter” button turns solid blue when the user hovers their mouse over it.Screen Shot 2017-07-22 at 1.45.26 PMScreen Shot 2017-07-22 at 1.46.24 PM.png

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 Main Page

Blog post:

Blog Format

The main faculty page:

 

Faculty Page

Click on a faculty member:

Faculty Individual Page

Click “Lessons” in the navigation bar:

Lessons Main Page

Click on one of the lesson types:

Lessons Individual Page

Click on “About us”

About Us Page

Calendar main page:

Calendar Main Page

Click on a specific event:

Calendar Individual Page

Lastly, our testimonial page:

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:

Homepage 3.1Homepage 3.0

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s