Page 1

DMK Website Redesign

Designed by Alexander Gregory


0

The Brief Redesign 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


The Brief Further Details 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.


1

Analysing DMK Logo + Identity By Alexander Gregory


1. Analysing DMK Identity

Analysis Digital Media Kingston Colour

Shape

This colour is too vibrant especially when

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

contrasted to white it is too distinctive and

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

therefore distracting. It should not take

in general was found to be confusing without any text

attention from the main content.

Negative Space I like how the initial design uses negative space to form

the letter K. However this does not communicate within 2 Out of Date

Digital Media Kingston

If there is a live blog incorporated make

No one noticed until analysing the website

sure it is updated yearly even if it is a token

that the full course title is stated here. Each

post. It will show the course is advancing

word is segregated as if they represent each

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

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.

seconds which is the time it should take.


1. Analysing DMK Identity

Redesign Logo and 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.

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.


2

Deconstructing DMK Site Identifying the problem By Alexander Gregory


2. Identifying the problem

Home Page Too much Content

Scrolling On 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.


2. Identifying the problem

Layout Irregular Columns

1

4

Disruptive Module Shapes resembles a digital camouflage pattern

2

5

3

6

7

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


2. Identifying the problem

Navigation Bar There 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.

Logo / Moving Ident The 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 Kingston We 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.

Banner This 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. Courses The 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. Reading / Scrolling No 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.

More Text The 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

Deconstruction Logo / 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 Content By 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

3D CGi Webpage

Useless Banner Yet 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 Point This 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.

Course Links These 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

People Webpage Scrolling Forever A 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.

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


3

User Testing Original DMK Site


6. Bahargul Atabaeva UX User Testing

User Testing Original DMK website Post-Test Closed Format questionnaire Usability 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.


6. Bahargul Atabaeva UX User Testing

User Testing Original DMK website Results As 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.


4

DMK Redesign Solving the problems By Alexander Gregory


4. DMK Redesign

Layout DMK Redesign


4. 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 Filterbox Go 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 Banner The 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 Showcase The 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

3D Navigation Cube Cube in next page has shrunk.

Click

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.

1

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.

2

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


5

Research + Ideas By Alexander Gregory


5. Research + Ideas

Existing Websites Tile Design

We found through researching contemporary website designs (201112) 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.


5. Research + Ideas

Existing Websites Breakdown

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


5. 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 Kingston

DigitalMedia

Courses

Labs

Work

Industry

Apply Now

Course Modules Shared Module(s)

Ma

g ei sFiugnnd a m e n t a l s E x p e r i e n c eCD

Game Dev

Msc Cgi Fundamentals

Experience Design 2 (Op t io nal)

CGi

Cgi Applications

Cgi Applications

UxD

C++

UxD

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

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


5. Research + Ideas

Interactive Graphs Layers

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.


6

Implementation Making DMK Website


6. Josh Hancock UX Implementation

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 actually visiting which could then be fed into our final design. The most viewed page was Courses followed by People and then About.


6. A Gregory Implementation / Workflow

Wordpress Vs Dreamweaver

Wordpress

Original Design prototype 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.

Dreamweaver


6. Implementation / Workflow

Implementation From Design to Web

Web developers code, making the layout functional using Dreamweaver.

Designers layout (non-working)

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


6. Josh Hancock Implementation

Database MySQL 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 database management system.

To support the PHP website and be able to develop the website offline, XAMPP was used as a development tool. Consisting of the Apache HTTP Server, MySQL and interpreter scripts, XAMPP could process 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.

Front end filter (query input) designed for the user

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 Coding Implementation

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.

CSS style sheet.


6. Bahargul Atabaeva UX Implementation

Site Map Diagram


7

Conclusion

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


7. Conclusion

Organising Information We 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 Navigation We 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.


8

Credits

Designer Alexander Gregory Coder Josh Hancock 3D CGI Serina Subrai UX Bahargul Atabaeva UX Shane harrison

Kingston DMK Web Design Document  

This is an illustrated design document that visually shows the research, analysis and the redesign of the DMK website. The project had to g...

Read more
Read more
Similar to
Popular now
Just for you