Kingston DMK Web Design Document

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


This is an illustrated design document that visually shows the research, analysis and the redesign of the DMK website. The project had to give DMK its own identity as well as showcasing its students work in an Intuitive way.

Transcript of Kingston DMK Web Design Document

  • DMK WebsiteRedesign

    Designed by Alexander Gregory

  • 0 The BriefRedesign The DMK ExperienceThe redesigned website must show the wealth of Kingston University resources available to prospective students including facilities and online resources such as studyspace and the design school. I

  • Navigation- The site must be an innative by showcasing its students work.- Brings student work to the user with minimal navigation. - Shows simplified overview of the 3 courses. - 3D elements should be implemented so it helps the user navigate yet visually expresses what the course does.- THE USER CAN NOT GET LOST.

    Organising Information- Pages with student work or module information must be linked in a way that offers multiple ways to access it. - Module data should have a filter system that a user can use to whittle down what they want to see.- Up to date database with alumni students which they course director can access any time in the future- Up to date database with alumni students information which the course director can access any time in the future- Brings student work to the user with minimal navigation. - Shows simplified overview of the 3 disciplines. - THE USER CAN NOT GET LOST.

    Content- What content do students want to see? - Professional level of work that proves the course develops students skills. - Connections with industry / career prospects.- Course modules types.- Distinction between Msc, Ma and how they work together.

    The BriefFurther Details

  • 1 Analysing DMKLogo + IdentityBy Alexander Gregory

  • Illuminous Green The illuminous green washes out the white text, making it hard to read. The block green

    also draws the users attention making an unnecessary focal point of distraction

    Out of DateIf there is a live blog incorporated make sure it is updated yearly even if it is a token post. It will show the course is advancing

    Digital Media KingstonNo one noticed until analysing the website that the full course title is stated here. Each word is segregated as if they represent each courses as. No one read this as a phrase. There is also no appearance of DMK

    anywhere on the site which is important for branding. DMK has no relevance to

    the triangular logo. The title has to sit with the logo for users to make visual / text associations. Once they learn the link

    between the triangular logo and Digital

    Media Kingston you can then just represent the site with the graphic and no text just like

    McDonalds can just use their infamous M.

    Analysis Digital Media Kingston

    ShapeThe logo outlines D-M-K (Digital Media Kingston) but is a

    too abstract for the logo to visually explain this. The identity

    in general was found to be confusing without any text

    Negative SpaceI like how the initial design uses negative space to form the letter K. However this does not communicate within 2 seconds which is the time it should take.

    ColourThis colour is too vibrant especially when contrasted to white it is too distinctive and therefore distracting. It should not take attention from the main content.

    1. Analysing DMK Identity

  • By merging the existing Kingston University logo with the DMK logo I have created an association with KU but in doing so I have formed a new identity that asserts itself as Digital Media Kingston. This is so prospectus students still know DMK is at KU and is not another university in itself. It would also be appropriate to make the green and blue hue to animate and subtly swish around, to show DMK works towards an interactive & engaging experience. It was a design choice to blend the vivid green and blue together because as isolated colours they are too strenuous on the eye.

    Redesign Logo and Identity

    I want the D-M-K acronym to catch on by prospectus students. A way to do this is by first introducing the logo by its full title. The user will only have to see this in full once therefore i will apply it to the first introduction page of the website that shows a course overview. After the user passes this initial page the DMK logo will appear throughout the site. The DMK acronym is severely needed because the full title will be too small to see within the square logo.

    1. Analysing DMK Identity

  • 2 Deconstructing DMK SiteIdentifying the problemBy Alexander Gregory

  • ScrollingOn a 24 monitor it takes a long time to scroll through the site. There is 5 and a quarter screens the user has to scroll down through.

    Home Page Too much Content2. Identifying the problem

  • Disruptive Module Shapes resembles a digital camouflage pattern

    Layout Irregular Columns

    ColumnsToo many columns contain too many types of information. The shapes are irregular and hard look at. Equal square tiles or columns are needed.

    1 2 3

    4 5 6 7

    2. Identifying the problem

  • CoursesThe courses or work produced from these courses should be the main focal point. Text should not have to explain what it is about, pictures are needed to represent each course.

    BannerThis adds nothing, it does not showcase work or illustrate how the course is run, therefore it is useless. The space could be used for a image gallery.

    Navigation BarThere is to many options for the user to choose from. Links such as People or Culture are to vague, by conducting tests we found users where confused whrn they clicked into these links. People What do these people do? How are they going to help you? The user wants to know perhaps what expertise Tutors bring and what background they have. Instead of People it could be renamed to Tutors which will lead into their area of expertese and what module they run.

    Reading / ScrollingNo one wants to read this. A picture says a thousand words. This is a visual course. There is so much text the user looses track when scrolling. It also feels there is more text than there actually is as there are no visuals to support it.

    Logo / Moving IdentThe logo moves too much in order or it to ingrain a strong identity. It should also include the digital media Kingston title so the user can understand what the logo signifies

    Digital Media KingstonWe did not notice this header, the bright green for one bleaches out the word Digital it puts the user off from reading it as a whole. Instead each word is read separately. It also looks too much like buttons.

    More TextThe user by this point does not care for this text. The key is too draw attention to the most essential part by having as few things as possible. The most essential part is the courses and work produced not Research

    2. Identifying the problem

  • Deconstructing DMK website

    DeconstructionLogo / Navigation / Course. These are the 3 main components that should be clear and easy to use. I have removed unnecessary information. At the moment it is too spaced out due too the banner. You can now see how the banner can disrupt the flow of these components, they are not tied together and look separate.

    2. Identifying the problem

  • Reconstructing DMK website

    Rearrange / Adding Essential ContentBy simply adding 3 images to represent each course it begins to give a clearer representation of what each course does. Images are more powerful than words and communicate within a second. It also helps the composition when these components are in close proximity and are not spaced out. You do not want your to eye jump around the page looking for the navigation as well as the courses.

    2. Identifying the problem

  • Useless BannerYet again space is taken up, it can be used to show case work produced from the 3D CGi course.

    Work?Token work examples accompanied by too much text. There is no sense of student involvement in this site.

    Focal PointThis is where most of the users attention is going. It is focussing on unnecessary illuminous colour that hurts the users eyes. It is hard to read the text because of the extreme contrast, it also washes out any image nearby.

    3D CGi Webpage

    Course LinksThese links allow you to flick through each course, it helps to way up the pros & cons. This is needed unlike the vast options in the navigation bar. (top) Perhaps a way to compare courses would be a good feature for students to decide what course suits them.

    2. Identifying the problem

  • Scrolling ForeverA 1st time user would not know who to be looking for. Perhaps a user would want to know who runs and who is involved with the Game Development course? How long will it take to find that person bearing in mind they have to read every blue banded header to gain this information.

    It would be far quicker to add a filter system that only shows tutors from Game Development or show the tutors that primarily run the Msc modules. It will also help if the profiles where not linear even without a filter if you add 2 or 3 profiles abreast it will be quicker to scroll.

    FilterA simple tick box reveals who is involved with what course. It gives users a way to see who is involved with what course quickly.

    People Webpage2. Identifying the problem

  • 3 User TestingOriginal DMK Site

  • Post-Test Closed Format questionnaireUsability test was carried out to get feedback about the current digital media website of the Kingston University. The usability test was carried out with three participants who have never used the website. These participants were chosen carefully by carrying out a pre-test questionnaire. This questionnaire asks if the age and sex of the participants, the internet skill level and if they have ever used the Digital Media Kingston website. The results from relevant participants should bring all the issues that the prospectus visitors of t