Top Banner
1 PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTURE
29

PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

Jun 27, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

1

PROJECT MOBILE WEBSITE

DANISH MINISTRY OF CULTURE

Page 2: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

2

01 Presentation of case1.1 Motivation 03

1.2 Introduction 04

1.3 Problem Formulation 05

1.4 Constraints 05

02 Analysis 2.1 Introduction 06

2.2 Method, theory and data collection 06

2.3 Introducing the Client 08

2.3.1 The digital strategy 2012-2015 08

2.3.2 Client meeting at the Ministry of Culture 09

2.3.3 Target group and stakeholders 09

2.4 Media and platform usage 09

2.5 Current and future mobile platform trends 11

2.6 Design considerations 12

2.6.1 Best practice in mobile web design 12

2.6.2 Responsive design 14

2.7 User flow 14

2.8 Sub-conclusion of analysis 15

03 Solution3.1 The final prototype 16

3.2 Design process 17

3.2.1 Design manual 18

3.2.2 Customer management system 19

3.2.3 Sketching 19

3.3 Wireframes 19

3.4 Sitemap 22

3.5 Usability-testing 23

3.6 How was this site programmed 23

3.7 Prototyping 24

3.8 Sub-conclusion of solution 24

04 Project process 4.1 Working with the Ministry of Culture 25

4.2 Project management 25

05 The Conclusion

5.1 Conclusion 26

5.2 Future opportunities 28

06 Various 6.1 Books 29

6.2 Web 29

6.3 PDF 29

6.4 Appendix 29

Table of contents

Page 3: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

3

01 Presentation of case

sessions and opportunities of social and mo bile media. “

But when it comes to KUM´s own use of digital media, especially social media and the mobile platform this do not work op-timally. The KUM website is currently not optimized for the mobile and the website contains a large flash picture slider which fills most of the page. This means that people who visit their site from a Smart-phone do not get an optimum display viewing and visitors through an iphone or ipad can´t see the picture slider fun-tion. That is why, in collaboration with KUM, I have chosen to give a proposal on the “look and feel” of a new mobile optimized website.

1.1 Motivation

The media landscape is evolving rapidly and the way we communicate is changing. The of-fline media is pushed into the background by new digital media. Large newspaper houses close or are forced to think in new ways to make money. 1 The new media landscape is characterized by a customized communica-tion, while the social media brings us all in contact with each other. There is a constant change in the media landscape, which is char-acterized by a development in technology and in society. This I find fascinating and is one of the reasons that I chose to write about one of the major shifts in communication right now - the Smartphone.

The reason I choose The Ministry of Culture (which is also defined as KUM in this report) is because I recently got a job there working with their digital media. In connection with research on my new job I read their digital strategy 2012-2015, which states that KUM wish to support the dissemination of culture through the latest technology: “The citizens of Denmark will have access to contemporary digital culture. KUM will work to create a bet-ter digital communication across

1 - http://www.youtube.com/watch?v=uyUksEavmx4 - accessed

10.12.2012 10.02

Page 4: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

4

1.2 Introduction

KUM is a Danish ministry that was established in 1961.

The Ministrys areas cover: Creative arts, music, theater, film, libraries, archives, museums, building preservation and conservation, archeology and ancient monuments as well as higher education in artistic fields. In addition, general cultural purposes, copyright, broadcasting, sports and cultural relations with foreign countries, including the Nordic countries and the EU.

Their main tasks relate to the department and ministerial advisory and legislative initiatives and the management tasks in relation to such gov-ernment, government-approved and subsidized cultural institutions. KUM comprises approx. 30 state institutions.

A new website was introduced in the early summer 2010. The goal was that the site should provide a more contemporary visual expression and a more user-friendly CMS.

Much has happended with technology since 2010 and www.kum.dk, with between 17,000 (low season) and 25,000 (high season) unique users ev-ery month, is KUM’s main communication platform for communicating to stakeholders, partners, press and citizens. Kum.dk is an dominant factor in the overall communication strategy and KUM wants to optimize and re-place the traditional print publications with web publications. But user be-havior and the way you get online is changing. Although KUM´s website is developed by one of the leading digital agencies and the accessibility was a priority from the beginning, a mobile optimized solution was not thought into the concept back in 2010. It seems that KUM, like many other organi-zations has been “surprised” by the fast moving technology.

Page 5: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

5

1.3 Problem Formulation

From this introduction, I have found it useful to work from the following problem formulation:

“How can I design, structure and present content from KUM´s main site on a mobile site to ensure users an easy and quick source of information?”

To answer this question, I will examine the following questions:

• How are the media and platform usage in Denmark?

• What is the most important information on kum.dk?

• What design considerations should I consider when developing a user friendly mobile site?

To achieve a satisfactory response, I have identified several criteria for when a mobile website for KUM can be considered successful:

• Intuitive and user-friendly navigation

• Quick access to easy and clear information

• More and new users visiting the site from a mobile device

• Maintain an aesthetic and visual familiarity with the home site

These questions can be answered through usability testing and web analytics.

1.4 Constraints

Since this project is a real task for KUM and a possible prototype for their future mobile website, factors such as economy and management in KUM will be key factors in this process. My solution will therefore be inspired by my analysis but not necessarily the best solution seen from an analytic point of view. I will reflect on this at the end.

In preparing this assignment, there has been a shift of Ministers which has resulted in the bustle of KUM and therefore less cooperation with the client than I would have liked.

Page 6: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

6

2.1 Introduction

In this chapter I will examine what constitutes a good mobile website for KUM. I will do this by looking at the task from different angles. What is KUM’s own vision of a mobile website and what is important to them? Then I look at the media landscape in the year 2012 and the Current and future trends on the mobile platform. In order to create an optimal design of the phone, I look also at the behavior and use of the mobile platform and mapping out a userflow.

2.2 Method, theory and data collection

Method

The goal of this analysis chapter is to use theory and data to obtain greater insight into differ-ent areas that will help me answer my problem formulation. I will therefore start by looking at recent theories on culture and media as well as investigate and analyze different approaches to design solutions on a mobile platform, based on literature and articles about best practices, us-ability and mobile trends.

Theory

• Design theories on mobile web design

Data

The empirical data in this report are based on a qualitative interview, published articles and ex-pert books e.g. related to mobile communication and design. I choose to divide the methods re-spectively in primary and secondary methods.

02Analysis

Page 7: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

7

Primary methods: Interview and usability test

I have chosen to do an interview with key person in KUM and usability testing to get feedback.

• Interview with responsible for kum.dk, Dorthe Skaaning Mathiesen

I wish to find out what KUM want to achieve with a mobile site and what the goals are?

• Usability testing.

I wish to examine if the target group can navigate the site and find information easily and quickly.

Secondary methods: Books, articles, slides, videos, company material, blogs and all internet related sources.

Criticism of the methods

• The advantage of the interview is that you can get in-depth knowledge and question the answers you receive.

• The disadvantage is that there are very few people you can get to interview and each statement can have a very strong

effect on the outcome.

• The usability testing done on the prototype does not give a total picture of functionality.

Page 8: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

8

2.3 Introducing the client: The Danish Ministry of culture

To understand the organization behind I will briefly describe how it´s managed and take a closer look at their strategy and vision.

KUM consists of The Ministry of Culture department, two boards and approx. 30 state institutions.

KUM’s main tasks is ministerial advisory and regulatory initia-tives and management tasks in relation to such government, government-approved and subsidized cultural institutions.

KUM has different roles and is directional for many institu-tions. In the following section I will describe strategies in more detail.

2.3.1 The digital strategy 2012-20151

KUM´s digital strategy is comprehensive because it covers KUM and the underlying institutions. In short, the ambition is to improve and streamline the digital use within Culture, education and management, and the National Museum of Fine Arts is named as a frontrunner within ex. digital art dissemination. The digital strategy for The Min-istry of Culture as an independent communicative institution is harder to spot. The overall strategy includes a general challenge: «Providing effective services that collects, communicates and make culture available in a modern digital form, as far as possible match the target demand.» Here it is debatable whether kum.dk as an independent digital platform has the modern digital format to match the audience demands? The role of the Smartphone in 2012 lacks focus and the use of social media and technology are outdated and could use some digital innovation.

1 http://www.kulturstyrelsen.dk/fileadmin/publikationer/andre_publikationer/Kulturministeriets_digitaliseringsstrategi_2012-2015._farver.pdf- - accessed 13.12.2012 13.24

Page 9: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

9

2.3.2 Client meeting at KUM 2

To get an idea of which content KUM prioritizes on a mobile site, I had a meeting with the person handling kum.dk - Dorthe Skaan-ing Mathiesen. I already sent Dorthe the questions I wanted to ask, since there was only time for a brief meeting. A summary of the meeting is as follows:

• There is no a internal digital strategy within KUM

• The Ministry wants dynamic and news editorial thinking behind the site. High turnover of news / photos

• Legitimize KUM through visibility among citizens - digital technologies are good tools

• Communicate the Minister’s work and cultural messages on the platforms people use

• Design-wise to stick to the terms and manual. And there is a need for a English version.

• A success criteria could be to get new users on kum.dk and an increased access in visits through a Smartphone.

2.3.3 Target group and stakeholders

According to the interview with Dorthe Skaaning Mathiesen, it is clear that KUM’s target groups are the citizens and press. Under the KUM are a lot of institutions that have their own pre-defined target groups, but KUM as cultural intermediary has all of Denmark as a target group, in addition there are many foreign stakeholders who use the site, therefore a English version is needed. One can then argue that most of the users at the kum.dk are Smartphone users and the need for a mobile optimized website is present. Especially when you as a KUM define themselves as an educational body with a duty to disseminate and pass on cultural politic to the younger audience.

2.4 Media and platform usage

So what characterizes the usage and the development of mobile phones in Denmark and the rest of the world?Mobile phones have become small extremely fast multimedia devices with lots of capacity, fast access to the Internet, large touch screens and with the opportunity to download loads of applications free of charge. Mobile operators in Denmark provide strong 3.5 G mobile network3, which offers mobile access to Internet with a speed that in many cases exceeds the internet speed most Danes

2 See Appendix 1 – Interview med Dorthe Skaaning Mathiesen3 http://borger.itst.dk/forbrug/internet/mobilt-bredband - - accessed 10.12.2012 12.00

Page 10: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

10

has in their homes through cable. The percentage of families with a Smartphone today is 50 %. In almost every home, 97 %, there is currently a mobile phone.4 The spread of the mobile broadband and a fierce competition among telecommunications companies for lower flat rate pricing and unlimited access to the Internet has made the mobile “smart” and is now an essential and integral part of the ecosystem.

It´s not only in Denmark that the use of Smartphones are gaining ground. Cisco has just released its annual Visual Net-working Index, which measures the data traffic in mobile net-work. In the last year, the global mobile data traffic doubled to 597 petabytes per month. This means that the data volume is eight times larger than the entire global Internet traffic in 2000. Mobile video represents more than half of this traffic. The report predicts that mobile data traffic will be 18 times larger in 2016.5 This is supported by the latest figures from mobithinking.com, which shows that manu-facturers of Smartphones expe-rienced a significant increase in demand of Smartphones world-wide.6

(figure 1)

4 http://www.dst.dk/pukora/epub/Nyt/2012/NR229.pdf - - accessed 10.12.2012 14.22 5 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html - - accessed 11.12.2012 20.126 http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#Smartphone-shipments - accessed 11.12.2012 09.02

Page 11: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

11

According to the leading digital media agency Mindshare’s annual advertising analysis 2012 7 then surfing the web and download-ing of applications is substantially higher than for example checking the clock, listening to music or using the Smartphone as a game console. Far more than half googles by phone and mobile payments has seen explosive growth over the past year - more than a third now use their Smartphone for financial transactions (payment via SMS, online banking or similar). (See figure 1)

It´s interesting to see the high number of mobile users browsing the web and how the usage of the mobile phone underlines a media landscape characterized by media convergence. The phone is not a single channel, but represents a new broad platform, that increas-ingly contributes to the already existing areas. Yet there is still one important and very critical barrier to the use of mobile possibili-ties, the Smartphone has a physical limitation as screen size and resolution limits the user experience compared to a main website.

2.5 Current and future trends on the mobile platform

To ensure a contemporary and durable mobile site, I will look at some of the current and future trends that are predicted to become the new “it” on the mobile platform. Gartner, Inc. has identified what they believe will be the most important mobile trends in 2012.8

• Location based services (LBS)

• Social networking

• Augmented reality

• Mobile search

• Mobile commerce

• Mobile payment

• Object recognition (OR)

• Mobile video

Several of the things could be relevant to use for KUM in a future perspective. A lot of the cultural institutions under KUM is already playing with these technologies ex. National Museum of Art using location based indoor technology to disseminate art outside the museum and augmented reality to put up art where the physical limits the museum. But for now I think the video part is something that can be used here and now. Dorthe Skaaning Mathiesen was talking about that video is a good way to add information, short and precise, especially on the mobile platform.

7 http://blogmindshare.dk/2012/04/mobilen-den-digitale-schweitzerkniv/ - accessed 11.12.2012 11.018 http://www.itbusinessedge.com/slideshows/show.aspx?c=87261 - - accessed 11.12.2012 15.01

Page 12: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

12

2.6 Design considerations

Designing websites for the mobile platform brings some unique and challenging situations. As I have mentioned previously user be-havior is different when online on the go. In the book, Designing great iPhone Apps, Oreilley describes it as: “On the Go: One Hand, One Eye, One Big Blur”9. This means the user typically only uses one hand and because of the surrounding noise, the user only has one eye on the phone - this can easily make the content appear blurry for a user. Additionally, the physical setting has changed; the small screen on the mobile phone sets new requirements for design and the way we communicate. In the following I will examine the design considerations one must consider on a mobile device.

2.6.1 Best practice in mobile webdesign

There have been several suggestions as to what best practice is in mobile web design10,11. I have compiled the most common trends and will sum up at the end:

Limited and Big Navigation

Without good, usable navigation, users may get confused, not be able to find what they need or want, and will end up leaving our sites, never to return.

Vertical Lists and Navigation

Having navigation in vertical list format is a good idea for usability, but also a great idea for information architecture. Just as bread-crumbs are organized for a standard website, why not make navigation buttons act in the same way breadcrumbs do, but rather nar-rowed down to specified content from screen to screen?

White space

Just like with design on a standard size screen, whitespace is needed in mobile design as well. In fact, it might be needed more as screen sizes get smaller and navigation may get harder to deal with.

9 Oreilley.Tapworthy. Designing great Iphone apps. June 2010 page 610 http://media.smashingmagazine.com/wp-content/uploads/2010/11/smashing-ebook-4-sample1.pdf - accessed 11.12.2012 15.4811 http://designmodo.com/mobile-web-design-trends/ - accessed 12.12.2012 11.01

Page 13: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

13

Ensure Readability

Ensure the text is big enough, often times it can be best practice to up the font size just a bit on smaller screens.

Search Functionality and Layout

Because of the context in which many users use the mobile web, having search functionality is needed.

Lack of images

It´s generally advised not to use images on mobile websites due to slow internet speed, cost of data and different screen sizes.

Quick Info

Mobile users are looking to gain quick information, often times essential information on the go.

Always Offer a “Main” Mode

Some visitors will become agitated with a mobile template after an extended period of use. It happens, and there’s nothing you can do as a developer to please everybody. The best solution is to offer a link for changing back to the default site layout. In most appli-cations this is placed at the very bottom of the page.

Sum up

I will develop the mobile website based on best practice in web design. Simplicity is key and it´s important to understand that the user wants quick info and that it must be readable and easy to find. However, the sources are american and both web content and lit-erature are from 2010, I will therefore deal critically in terms of opinions on Internet speed and data rates. In Denmark, as I mention in chapter 2.4, the mobile operators provide strong 4G mobile network that exceeds the internet many people have in their homes. This means that image and video usage is more optimal in Denmark compared to e.g. America.

Page 14: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

14

2.6.2 Responsive design

Many new screen sizes are constantly being launched and responsive design could be a good solution for many companys. Respon-sive design is a more costly option but more durable in the long run. At this stage this is not a solution for KUM, they don´t have the resources for the development of this. In a future perspective I believe a responsive design would be a good solution.

2.7 User flow

To realize and map out user expected behaviour, concerning the mobile website, I created a user flow model. (See figure 2) This helps me to get an overview of how a user could get in touch with the mobile website and what information they could need.There are many ways the user can get in touch with KUM´s mobile website, it could be through friends, posters, Googleor through cultural institutions. One of the most trust worthy ways that can make a user (or a customer for that sake) take action is through a recommendation from a friend (word of mouth)12

12 http://socialtimes.com/aspects--‐word--‐of--‐mouth--‐marketing_b69821 - accessed 12.12.2012 16.01

Pros• Different devices can use the same link• One HTML page, which means less maintenance• You’ll never get a hori-zontal scrollbar.

Cons• Development takes time and money• Different platform doesn´t need same content• The mobile-optimized ver-sion of your site downloads the same size images as the desktop version does. This prolongs the loading time• Limits the creativity for each unique platform

Page 15: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

15

This can be done directly in a face-to-face conversa-tion, but also through social medias such as Face-book, where friends can see what each other “like”13 and send links to each other which is also a form of word of mouth14 recommendation. This behavior can lead new users to the mobile website. The outlining of the many channels gives an idea of what considerations should be made in development of the mobile website.

2.8 Sub-conclusion of analysis KUM has drawn up an ambitious digital strategy for its underlying institutions but the strategy for KUM as an independent communicating institution is diffi-cult to discern. With no focus on the mobiles role in 2012, no optimal use of social media and outdated flash technology on their website this indicates a need for digital innovation.

At the meeting with KUM, we agreed that a future mobile website was be dynamic and news editorial philosophy was to be integrated and a success crite-ria could be to attract new users. My analysis also shows that KUM’s target group covers the entire Danish population and statistics shows that over 60% of the Danish population has a Smartphone. So I conclude that a mobile optimized website is a good solution for KUM if they want to convey broad cultural policy.

Finally my analysis shows that the design and user considerations for the mobile platform bring unique and new challenges. The mobile is unique because it gives you the opportunity to use characteristics such as location-based services, object recognition and mobile video, but there are also a number of limitations in the design. The small screen on the mobile phone sets new require-ments for design and according to my analysis it´s necessary to work from best practice guidelines in mobile web design to create a user friendly site.

13 http://developers.facebook.com/docs/reference/plugins/like/ - accessed 12.12.2012 18.0114 http://www.allfacebook.com/af--‐expo--‐facebooks--‐faul--‐touts--‐word--‐of--‐mouth--‐ads--‐2011--‐06 - accessed 12.12.2012 19.01

Figure 2

Page 16: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

16

3.1 The final prototype15

3.2 Design process

In this chapter I will explain the process, the considerations and limitations, I’ve had in the develop-ment of the wireframes and design. The design process is a little different than doing a brand new website, because I don´t have to design everything from scratch. KUM has an excellent website and in addition to the website there is a design manual, that I will have to work from to keep the same visual expression on both websites. This means I don´t have to define every design element.

15 http://www.itu.dk/people/jras/Projekt_kum.dk/Index.html - accessed 12.12.2012 17.21

Solution03

Page 17: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

17

This design challenge is all about structuring information and building the skeleton using the findings of my analysis and providing the users with easy, quick information.

The first design challenge was to get an overview of what content the mobile website should contain. Without the knowledge of content, I could not create the outer frames. Therefore it was necessary to have a phone meeting with Dorthe Skaaning Mathie-sen regarding the final content. We agreed on six areas from the home site that was necessary to have on the mobile website:

1. Possiblity for dynamic info

2. News and press

3. Introducing the Minister

4. The Minister in clips (video)

5. Contact us

6. Social media

Due to economy this meeting put some constraints on using the mobile phones unique features, which goes against some of my analysis, but at least I had an overview of the content and could start to visualize the mobile website.

Page 18: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

18

3.2.1 Design manual

During the design process I used the design manual to make sure there is a common visual reference between the two platforms

The design manual is built up using a number of basic elements: logo, typography, color scheme and a “fifth element”: a graphic that helps to provide KUM design program its special character.

Logo

Font

ACCES Headlines

Verdana body text

Picture Style

KUM has a desire to strengthen its communication by developing a photo and illustration concept that complements the Ministry’s visual identity. In this regard, KUM´s has decided to invite Danish artists to create a series of new photos and illustrations

Fifth element

The fifth element is a rectangular box placed horizontally and used from 0-100% - it can be both a saturated color surface and a weak tone that is placed over a picture or illustration

Page 19: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

19

3.2.2 Customer management system

Kum.dk is built in a CMS system and I tried to think the CMS box structure into the design, which makes the design easier to implement.

3.2.3 Sketching

In the beginning of the design process it was difficult to imagining how all to get all that info into a very small screen and still make it user-friendly. I started out by sketching a one to one paper version of the mo-bile phone to get a feeling of the size of the buttons. In that way I could, in a simple way, test the functionality and size. After some sketching and desktop research on mobile website designs I came up with some sug-gestions.

3.3 Wireframes

With most of the content in place, I felt ready to begin creating the wireframes of the site and its functions. Working on the wi-reframes was somewhat of a challenge, because the amount of information on the main website is enormous and structuring this information to ensure users an easy and quick source of information was challenging.

In working with the wireframes there have been several factors I have taken into consideration.

• My analysis

• Best practice in mobile web design

• KUM design manual

• www.kum.dk

Page 20: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

20

Wireframes16

It has been important for me that the site is user friendly, this is the primary reason for optimizing the site for a mobile platform. As previously described, the screen is small and people’s behavior on the mobile phone sets high requirements for usability. To meet these requirements I have chosen to use images on the home page as buttons. This is a good solution because the buttons have a large click area which is user friendly, visual and makes a visual reference to the website and complies with the design manual about image use.

When placing the logo, search bar and links back to the main website at the top, I was doing this with the “F-Shaped Pattern for reading Web content” in mind.

“Eye tracking visualizations show that users often read Web pages in an F-shaped pat-tern: two horizontal stripes followed by a vertical stripe.17”

16 See appendix 217 http://www.useit.com/alertbox/reading_pattern.html - accessed 12.12.2012 20.11

Page 21: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

21

Home page

In the bottom of the page I put a link back to the main site to offer the user a “main” mode.

Besides from the main mode, my analysis shows that it´s important to offer the user a search functionality, because many users on the mobile website searches for quick and specific information. Therefore I have chosen to have a broad and visible search functionality as part of the header, so it´s accessible from all pages. Regarding the use of images some best prac-tice advice is not to use images due to slow internet speed and cost of data. I have chosen to use images anyway, because my analysis showed that most of the mobile internet users in Denmark have a very fast internet connection on their phones where data is included in the price.

Content page

A content page is a blank module page with the option to put in text, images, video, google maps and links. This makes it flexible and useable for many purposes – e.g. a link page or a campaign page.

Page 22: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

22

3.4 Sitemap

It was important to me that the information architecture was simple to ensure users an easy and quick source of information. This has resulted in this preliminary structure that contains the maximum of three levels. Level one is the home page that con-sists of six content modules, similar to the mainpage on the main website. The modules are all flexible and the content can be replaced, the plan is to have four permanent modules and two module where the content changes regularly e.g. News, press or videos. Level two can be a either a content page or a list. Level three is the maximum level and can also be a content page.

See sitemap (this solution only contains two levels but possible with a third level if needed)

Page 23: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

23

3.5 Usability-testing

I decided to test the site on five different people, three fellow stu-dents at ITU and two persons from KUM. Both tests were focused on functionality, but I also wanted the ITU test persons to provide some feedback on the aesthetics, because the persons are compe-tent in that field of expertise. The KUM test was also to get feed-back if they could imagine using that exact prototype in the future.

I focused on functionality and wanted to find out whether the re-spondents could navigate the site and find information. The proce-dure was to give them various tasks while I observed them.

Conclusion: All test persons was confused in the beginning about the site not working 100 percent. They kept pressing the slider even though they were told that it was not active. But besides that I only got positiv feedback on both visuals and on navigation. Some of the test persons would have liked more exciting content pages but at the same time mentions that it is nice that the pages are so simple on a small screen.

3.6 How was this site programmed?18

The site is programmed in HTML5 and CSS3 also using jQuery.

Besides a picture slider on the top of the index page, which is a jQuery code containing a list of images, the site is fairly static. It has been important to me that it appears simple and user-friendly. To get the search function to work, implementation of database coding such as PHP or another is required. The programming has been a challenge because HTML5 is new to me. I have previously made a little bit programming but most had to be revamped. Some defects are still getting the screen to get stuck on the mobile phone screen and have it adjusted 100% and some other few things. But a prototype as an interactive mock up show the intention. 18 See appendix 2

Page 24: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

24

3.7 Prototyping

In the development of this site, I have tried to take advantage of an itera-tive development approach. The advantage of this approach is that a pro-totype is typically easier for users to learn and subsequent use effectively in everyday life, as users have influenced the development. This scenario is more wishful thinking than real process as KUM have not had time to participate in this development due to changed circumstances.

3.8 Sub-conclusion of solution

It has been a difficult but fun task to structure and redesign content from KUM main website into a mobile platform. The biggest challenge has been to organize and sort the content based on my findings and wishes from KUM. It was of course a shame that there is no economy to develop more specific mobile features or time to brain-storm on other cool ideas, KUM basically “just” needed me to investigate if there is a need for a mobile site and then quickly get to work on the design.I think I´ve succeeded to integrate key design elements from the design into the mobile platform. My user testing went well and the users where able to locate the information quick and easy. The process is not yet fin-ished, so there may be further changes in programming and functionality.

Index.HTML

Style.CSS

Page 25: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

25

4.1 Working with KUM

The overall process of working with KUM has been good. The tone has been very loose and the meetings were open for discussion with everyone expressing their opinion and straight away I was given a lot of responsibility. There have been a ministerial change in the middle of my process that has resulted in this project has been downsized and I have not got the sparring I needed. So the process was far from perfect but it gave me an insight into how organizations work and that it is not always possible to implement an optimal project, because there are other factors to take into consideration such as economy and projects with a higher priority.

4.2 Project management

The overall process and project management are based on the QISH model. This approach has been used during my design process and my report writing.It was important to first clarify the problem areas to be able to write a problem formulation that I could work from. It was important during my project to gain knowledge about the media landscape, user behavior and best practices in mobile web design in order to develop a user friendly mobile website

It was a challenge to structure and put everything into an action plan, because the I had to wait for KUM to answer my queries and in the end I had to just keep working without input from them. I have been working on all aspects of the process alone and even though it was nice to be the boss and not have to deal with practicalities with other group members, it has been a very large work load. This project being 1 out of 3 deliveres at ITU there has not been a lot of time to make everything perfect, so all things considered Im happy with the result. When KUM is getting started on this project, I hope I will play a role in making this project come to life.

04Project process

Page 26: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

26

5.1 Conclusion

In this conclusion I will look back at my project as a whole and answer the questions asked in my problem formulation:

“How can I design, structure and present content from KUM´s main site on a mobile site to ensure users an easy and quick source of information?”

To conclude on this I will answer my three asked under questions.

• How are the media and platform usage in Denmark?

My analysis showed that the use of Smartphones are gaining ground in Denmark. A recent survey shows that the proportion of Danes (18-65 years) with a smartphone rose to 51% from 33% last year.19 So it´s not only the digital natives that increase their consumption of the Smartphone’s many opportunities, there is also an increase among the older audience and in the way they use the phone. More and more use the phone to look up information and surf the web and this development supports the importance of this project. If KUM want to communicate cultural political policy and funding initiatives broadly, they need to accom-modate the platforms the citizens are using – the Smartphone.

• What is the most important information on kum.dk?

My analysis of best pratice in web design and my meeting with KUM resulted that the solu-tion is to keep the amount of information limited. My analysis showed that users must go onto a mobile site to do something or find something specifically and quickly, therefore the site shouldn´t contain text heavy content or too many levels of navigation. We agreed on the following content:

19 http://www.mcb.dk/pages/visnyhed.asp?newsguid=90076- accessed 13.12.2012 08.07

05The Conclusion

Page 27: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

27

1. Possiblity for dynamic info

2. News and press

3. Introducing the Minister

4. The Minister in clips (video)

5. Contact us

6. Social media

• What design considerations should I consider when developing a user friendly mobile site?

Simplicity is key and it´s important to understand that the user wants quick info and that it must be readable and easy to find.

I have worked after these best practice guidelines and incoorperated them into the solution.

- Limited and Big Navigation

- Vertical Lists and Navigation

- White space

- Ensure Readability

- Search Functionality and Layout

- Quick Info

- Always Offer a “Main” Mode

The usability tests showed that this design approach works and that the site provides a userfriendly, easy and quick source of information.

Page 28: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

28

5.2 Future opportunities

Looking ahead, KUM must have a strategy and some goals with their mobile website, if they want to lead a modern, digital institution that communicates through all platforms. This mobile website is a fine solution right now with the limited resources in mind. But going forward I think it´s important to involve the target group and examine how to exploit the mobile’s unique functionalities. It could be using shorter video clips produced in a quick view version for the mobile, or other mobile technolo-gies to fill the lack of visibility of KUM and to attract new users as Dorthe talked about in the interview. The mobile is a great tool to merge the physical and the digital world and to help to make your message come across. KUM should use their resources, their young ambassadors and the competencies from their institutions to gather focus groups and brainstorm on how a mobile website could help them to communicate through this platform in the best way. A future opportu-nity could be to develop another mobile website or an App that functions more as a practical and fun culture information tool for the citizens.

Finally, they should consider having a responsive design in order to raise the user-experience of the site, when entering from all platforms in the future. Especially because the sale of devices with screen sizes between pc and mobile is increasing, the so called phablets 20

20 http://politiken.dk/tjek/digitalt/forbrugerelektronik/ECE1634785/analysefirma-phablets-er-fremtiden/ - accessed 12.12.2012 22.31

Page 29: PROJECT MOBILE WEBSITE DANISH MINISTRY OF CULTUREjesperrasmussen.weebly.com/uploads/4/1/4/2/41429113/... · 2020-03-15 · 2.6.1 Best practice in mobile web design 12 2.6.2 Responsive

29

6.1 Books

Tapworthy: Designing great iphone Apps by Josh Clark - O’Reilly Media (June, 2010)

Synlighed er eksistens by Christian Have – ICMM (September, 2004)

6.2 PDFhttp://media.smashingmagazine.com/wp-content/uploads/2010/11/smashing-ebook-4-sample1.pdf - accessed 13.12.2012 13.24

http://www.dst.dk/pukora/epub/Nyt/2012/NR229.pdf - accessed 13.12.2012 18.04

6.3 Web http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html - accessed 12.12.2012

http://www.gartner.com/it/page.jsp?id=1278413 - accessed 12.12.2012 08.21

http://www.business.dk/ledelse/derfor-skal-din-virksomhed-have-en-mobil-strategi - accessed 12.12.2012 15.01http://www.demib.dk/aviser-krise-1158.html - accessed 12.12.2012

http://borger.itst.dk/forbrug/internet/mobilt-bredband - accessed 12.12.2012 07.41

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html - accessed 13.12.2012

http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#smartphone-shipments - accessed 13.12.2012 21.01http://www.wilke.dk/om-wilke/presse/over-halvdelen-af-danske-unge-har-nu-en-smartphone.aspx - accessed 13.12.2012 22.31http://blogmindshare.dk/2012/04/mobilen-den-digitale-schweitzerkniv/ - accessed 13.12.2012 13.0 www.itbusinessedge.com/slideshows/show.aspx?c=87261 - accessed 13.12.2012 12.01

http://thecreativeservicesblog.com/2011/12/responsive-design-explained/ - accessed 13.12.2012 9.29 http://edition.cnn.com/2011/11/30/tech/mobile/new-version-google-maps-indoors-wired/index.html - accessed 13.12.2012 12.28 http://designmodo.com/mobile-web-design-trends/ - accessed 13.12.2012 13.28

6.4 Appendix

Appendix 1 – KUM digital strategySee folder on DVD – Appendix - Appendix 1 - Interview Dorthe Skaaning Mathiesen

Appendix 2 – Wireframes, design and programmingSee folder on DVD – Appendix - Appendix 2 - Wireframes, Design and Programming

06Literature list