DMK WebsiteRedesign

Designed by Alexander Gregory

0 The BriefRedesign The DMK Experience

The 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 + Identity

By 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 problem

By 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 user’s attention is going. It is focussing on unnecessary illuminous colour that hurts the user’s 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 the page would have. Clear and simple instructed tasks were set to test how easily the visitors manage to find information that are necessary for prospectus students to make a course decision.

User Testing Original DMK website6. Bahargul Atabaeva UX User Testing

ResultsAs a result of the usability test the users spent two to three minutes on each task. However, the participants found it difficult to find the information they were looking for. They tend to use the Ctrl + F command to find the information. This shows that the information represented in the website is too long and organised. Also, the participants kept scrolling up and down on each page which shows the users expect the page to be clear. Some of the participants became slightly frustrated about how the information was represented.

Another issue that this test revealed is the buttons labels were unclear as the participants could not decide which links to click on to get the information they were looking for. All the participants could not differentiate the courses that the DMK provide and the more courses section on the page.

Following the usability test, the participants were asked to take a questionnaire that will determine overall feeling about the website. The participants are satisfied with the overall layout of the page, but one participant in particular thought that the page was dated and needs to be slightly updated.

User Testing Original DMK website6. Bahargul Atabaeva UX User Testing

4 DMK Redesign Solving the problems

By Alexander Gregory

Layout DMK Redesign4. DMK Redesign

Grid DMK Redesign

The redesign includes regular equal measures this makes it easier for users to scan and read a lot of content.

4. DMK Redesign

Interface FilterboxGo back to the previous page if you can not remember what page you came from.

The Search bar can be used in context with each page. If you are on the Tutors page it will prioritise tutor names. The plus symbol will activate the drop down filter menu.

The drop down filter can also be used in context with the page. If you where to tick the Game Development box it will show all the Tutors that are involved with Game Development modules. The user could even filter out tutors that are not involved with Msc Courses, perhaps the user would like to know who directs Msc modules.

4. DMK Redesign

Interface Course tabs

These buttons are present on each page to give the user quick access to the courses.

4. DMK Redesign

Focal Point Image / Galleries

Main BannerThe design philosophy was to make the images of student work the focal point. It should be the dominant feature as DMK is a visual course. The first image is in a banner format, this space can be used for 1 - 4 different images or you could embed a video from vimeo. The banner could randomise the students work or arrow controls could be overlayed to give the user the opportunity to flick through the students work.

Module ShowcaseThe images below are organised in a list format that showcase the modules the student has completed. The design has made sure the image is big enough to see and has enough text to explain the module.

4. DMK Redesign

The square logo developed by becoming part of the navigation, we thought it would be intuitive for the user to tumble the cube as way of selecting what page they wanted to go to. If they really did not know where they wanted to go they could spin the cube and select a face at random, this adds a playful element.

3D Navigation Cube

Home page. The user can sellect a face on the cube to go to the next page. The idea of having the cube as the focal point in the home page is so users know how to work the 3D navigation.

1 2

Cube in next page has shrunk.

2nd page. The cube has shrunk into the navigation header in the Next page.

Click

4. DMK Redesign

5 Research + Ideas

By Alexander Gregory

We found through researching contemporary website designs (2011-12) that the best designs that read clear and look simple to use are blocky and modular. This type of design increased with the invention of the iphone and apps. These sites give you just the essential information by using simple layouts and colours.

Existing Websites Tile Design5. Research + Ideas

Simple layouts encourages the designer to use images to represent the product or service. Modular buttons displays the users options clearly.

Existing Websites Breakdown5. Research + Ideas

iphone App Layouts

The iphone takes into consideration the small size of its screen by organising categories or lists in modules. We found that this way of organising information works with desktop screens and websites. The user still wants the designer to curate the information by not displaying it all at once. Our aim was to guide the user through the site so they do not have to think about where to go.

5. Research + Ideas

Venn Diagram Course Layout

G a m e D e v

C o u r s e M o d u l e s

C G i U x D

C o u r s e s L a b s Wo r k I n d u s t r y

M a M s c

C g i F u n d a m e n t a l s C g i F u n d a m e n t a l s

C g i A p p l i c a t i o n s C g i A p p l i c a t i o n s

C + +U x D

A p p l y N o w

S h a re d M o d u l e ( s )

E x p e r i e n c e D e s i g n

E x p e r i e n c e D e s i g n 2( O p t i o n a l )

KingstonDigitalMedia

The 1st prototype focussed on how to organise the three DMK courses. We wanted to show how the courses overlap in terms of course modules, this would illustrate how Ma and Msc courses integrate and work together to create a game or UX project

5. Research + Ideas

Daisy disk is an app for mac that visually shows the contents of your hard disk.

Daisy Disk Organising Information

Perhaps we could use this graph to display course modules? Each petal could show how long or how much the module is worth in terms of credits.

5. Research + Ideas

The above graph is an image taken from an interactive graph that filters out information you do not want to read yet. This shaped the idea of using a filter system, one that will allow the user to find out what each course offers even if the user does not know which course to apply for, this system should help them compare the courses.

Interactive Graphs Layers5. Research + Ideas

6 ImplementationMaking DMK Website

Google Analytics

From the 5th December Google Analytics was set up on the existing DMK website. This data gave useful insight into what pages visitors were actu-ally visiting which could then be fed into our final design. The most viewed page was Courses followed by People and then About.

6. Josh Hancock UX Implementation

Development originally started in Wordpress but later in development switched to Dreamweaver. As seen below the results show a more accurate outcome from the original design spec.

Original Design prototype

Wordpress Vs Dreamweaver

Wordpress

Dreamweaver

6. A Gregory Implementation / Workflow

Designers layout (non-working)

Web developers code, making the layout functional using Dreamweaver.

Implementation From Design to Web

Functioning website. (includes links & hover-over animations)

6. Implementation / Workflow

The website was created using PHP (Hypertext Preprocessor). PHP is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. This is supported by MySQL, an open source relational data-base management system.

Front end filter (query input) designed for the user

Database MySQL

To support the PHP website and be able to develop the website offline, XAMPP was used as a develop-ment tool. Consisting of the Apache HTTP Server, MySQL and interpreter scripts, XAMPP could pro-cess our website written in PHP and draw data from the MySQL database.

Course table in the MySQL database. This data can be used to display the filtered modules on the web page by querying the database.

Back end database ( runs the query so it outputs the filtered data on the page)

6. Josh Hancock Implementation

Dreamweaver Stylesheets

Like in Wordpress separate Header and Footer php files have been created. These can then be added using the include function to any page. This saves time and is beneficial as making a change to these files will change the display in every page. Another advantage is that the site can easily be imported into Wordpress as there are separate header and footer files, an index page, a style sheet and other pages can be set as different page templates.

6. Josh Hancock Implementation

CSS style sheet.

Dreamweaver Div Containers

As in any website it is beneficial to have a separate style.css sheet. To keep the style consistent across the website one style sheet is created that is linked to every page in the website. As every page contains the same div containers for holding the content the style can be altered for the main body, the header, the columns etc.

6. Josh Hancock Coding Implementation

Site Map Diagram6. Bahargul Atabaeva UX Implementation

7 ConclusionThe project drew on the strengths of each member of the team. From testing, design to implementation. The project managed to keep to its production line but in the end more time and resources were needed during the implementation stage to get a final product. The site is student friendly and its structure guides prospective students to essential information. It expresses both the diverse and collaborative aspects of the three major disciplines in digital media that are shown within student galleries.

Organising InformationWe managed to deconstruct the existing website and identify the problems such as inefficient methods of organising text and the limiting use of images. This was the main problem which effected the functionality of the DMK website. It did not clearly display what the course produces in terms of work. It did not show this visually which is what counts as digital media is all about show not tell. Mass amounts of text only represented the course modules which limits the prospective student.

3D NavigationWe wanted a playful way to navigate around the site. We thought a 3D cube would be a good way to select different links by spinning it around and pressing each face. To make the user aware of this we would introduce this 3D feature in the home page and then minimise the cube to the left corner of the navigation bar once they have clicked into the core of the site. There were several coding problems with this as we could not integrate the source code into the php language so we could not implement it.

Most struggles were based on implementing the chosen ideas with the current level of experience and knowledge in the chosen development language. This created uncertainties at times and forced members to develop new skills and researches whilst making an attempt to create the project in its final design. All team member specialized in a particular area from ideas and planning to mock ups and coding. This process of work enabled the projects development to maintain a strong and stable base even if though at times it may have seemed that ideas and solutions were to ambitious for level of coding skill.

7. Conclusion

8 CreditsDesigner Alexander GregoryCoder Josh Hancock3D CGI Serina SubraiUX Bahargul AtabaevaUX Shane harrison