Facebook App

Miami Ad Design

Mercury International

MIU UX Redesign

Hipster Flash Game

MIU UX Redesign

This was a school project where I had to redesign my school’s terrible website, mymiu.com.

I checked out some other school websites to get some inspiration:

Strategy

The first step was to figure out the needs of the website’s end user.

I determined the user’s needed to be able to:

• find information about the school (either through reading, chatting with an advisor, or contacting the school)
• be able to set an appointment to visit the school.

I also determined that for MIU to consider the site successful, it must:

• Inform the user
• recruit potential students
• expand its brand in the mind of the user

Scope

• To determine the scope of the site, I came up with a list of possible questions a user would ask:
• Where are some examples of student work?
• How much will it cost?
• How long will it take?
• What is there to do there?
• Is it accredited? (this is important for MIU, since it is the exception and not the rule in the AI network)
• How much would I be making after graduation?
• Can I get scholarships?
• Where will I live?
• Who can I talk to for more information?

To meet all of the content requirements, the content in the site must be able to answer all of these questions.

To make the site functionally successful, these questions must be able to be answered quickly.

Structure

Looking at the sites of other universities, I noticed that the layout was pretty standard. I decided to use stick with a traditional interaction design, since there are a lot of different people that would be visiting the site. I wanted to put things where people would expect them to be, so I put a dropdown menu, a header, main content area, and footer with all available links.

The information architecture was a top-down style: links to broader categories were most accessible, with more specific links nested inside other pages.

Skeleton

The interface is designed to impress first, then inform. The navigation has rollover states, and the links that have dropdowns are clearly indicated with a button.

The site’s design puts the most important links on the top, and all of the links on the bottom, for easy accessibility.

Then I wireframed the design:

Fleshed out through use of a wireframe, I looked at the most important information, and made sure to show it in a way that would guide the eye in an organized way.

Surface

After the wireframe was made, I designed a mockup in Photoshop. I wanted to make sure I had a consistent color scheme & design that would maintain cohesiveness in the site (internal consistency), as well as with AI’s other sites (external consistency). For the layout, I relied loosely on the 960 grid.

Once the mockup was made, it was time to start programming. Some things changed from the original– For example, the wireframe called for a flash main area. I quickly realized that I could get what I needed from a javascript slideshow.

This is the final result. Click the link to go to the actual page. (note: it’s just a homepage. I don’t have sub-pages)