sitra presentation by the deasign group

SITRA.FI RENEWAL CONCEPT by THE DEASIGN GROUPSeptember 2010

Mikko KiviniemiConcept &

IA/UX design

Joni WiikProject Manager

Daniel FlodmanArt Director

Anna Gullstrand Strategist &

Account Manager

Ylva FredrikssonTechnical lead

Hello!

part 01 THE CONCEPTpart 02 THE CONTENTpart 03 THE FRAMEWORKpart 04 SUMMARY

THE CONCEPTpart 01

OUR GOALS

Redefine,restructure,redesign.Create a new Sitra.fi that engages users and offers value to visitors.

CHANGE OF PERSPECTIVE

Talking from the public’s point of view.

…and not from Sitra’s

Working for the Future

AN EXAMPLE ON CHANGE OF PERSPECTIVE

Programmes+ Areas of work

The users don’t know what this means.

The Involved

The General Public

SITRA.FI - A THREE TIER INVOLVEMENT

The Experts

Sitra people

The Specialists

Third Party Contributors

New trends and points of

view

Summarised content for

easy digestion

Might evolve into a web 2.0

user

Talking part in dialogue

Fresh and updated content

Better presentation of content

Clarity and structure

Too hard to use

Control of expert content

Relevant information

easily

Educate web 1.0 people into

2.0 users




Mobile useGoal-oriented and eager to

discover



Networking Talking part in dialogue

Networking

Networking


easily

Positioning of Sitra



Problems and possibilities from the personas

Clear positioning


1

A better user experience on multiple touchpoints

Summarised content for

easy digestionClarity and structure

Too hard to use Mobile use


2

Up-to-date content in an organised way

3

New trends and points of

view




easily

Goal-oriented and eager to

discover

Facilitating conversation and networking

4

Talking part in dialogue Networking

Educating users, sharing learnings and best practices

5


user


2.0 users

3

THE FIVE KEY THEMES FOR REDESIGN

Clear positioning

A better user experience on multiple touchpoints

Up-to-date content in an organised way

Facilitating conversation and networking


1

2

4

5

OUR VISION

Sitra.fi allowing progressive involvment

CORE USEBrowsing site

Gathering informationDownloading publications

ENGAGED USESharing on social media

Commenting on interesting topics

IMMERSED USEActive ambassador

Contributing relevant content related to topics

IMMERSED USEENGAGED USECORE USE

MAPPING GOALS TO LEVELS OF INVOLVEMENT

NetworkingMobile use


Educate web 1.0 people into 2.0

users

Goal-oriented and eager to

discover

Summarised content for easy

digestion



Too hard to use

Relevant information easily

New trends and points of view


Better presentation of

content


CREATING USER JOURNEYS FROM GOALSTell me about Sitra and what they do.



digestion




What is happening right now with Sitra

and can I contribute?


Mobile use


Networking

Tell me about Sitra and help me find relevant

information.


digestion




Goal-oriented and eager to discover

I want to update the content and I should

be educated.


Too hard to use


Educate web 1.0 people into 2.0

users


A MINDSET AND TIMEFRAME FOR MULTIPLE RELEASES

Always in beta

CORE USE

ENGAGED USE

IMMERSED USE

May 2011Oct 2010

Release

Sitra.fi new platform v1.0

Release

v1.1Release

v1.2Release

v1.3Release

v0.1Release

v.0.2

OPENNESS AND BEST PRACTICES

OpennessOpen source Open APIs

SUMMARY OF PART ONE

WE WANT TO CREATE A NEW SITRA.FI THAT★ Speaks the same language as its users★ Is designed from the goal-based user journeys★ Is an exemplary site of a great digital user experience,

in both design and information structure★ Focuses on iterating and releasing often★ Is based on openness and sharing best practices

THE CONTENTpart 02

GUIDELINES FOR PRODUCING CONTENT

Tone of voice, copywriting andSEO.

RESOURCE PLANNING FOR SITRA.FI RENEWAL

The Sitra Way

Contacts

Funding

News and publications

Areas of work

About Sitra

Initial thoughts of structuring content

INITIAL SITE MAP

Homepage

About Sitra Areas of Work Funding The Sitra Way Communications Contacts

Sitra in a nutshell (video+text)

Operations and responsibilities

Working at Sitra

Working methods overview

(link to Sitra Way)

Programmes(incl. future work)

Business development

Sitra investments

Sitra methods and guidelines

Developer blog

Sitra’s digital footprint

Sitra’s Open API and documentation

News archive and search

Publication archive and search

Media bank

Directory

Map and directions

Invoices

One

ABOUT SITRATwo

PROJECTS & PROGRAMMESThree

SEARCH & FINDABILITYFour

THE SITRA WAY

What is Sitra?


Clear positioning


1

CORE USE

ENGAGED USE

LEVEL OF INVOLVEMENT

About Sitra

LOOKING FOR A CLEAR POSITION

We want to liven the presentation of Sitra and to make it interesting and shareable.

A VIDEO IS WORTH A THOUSAND PICTURES

We want to create a visual representation of Sitra.A video that entertains and enlightens.

VIEW VIDEO AT YOUTUBE

One

ABOUT SITRATwo



THE SITRA WAY

✓ Informative✓ Engaging✓ Easy to use✓ Easy to contribute

CORE USE

ENGAGED USE


ProgrammesIMMERSED USE

CREATING USER JOURNEYS RELATED TO PROGRAMSTell me about Sitra and what they do.



digestion







Mobile use


Networking

Tell me about Sitra and help me find relevant

information.


digestion




Goal-oriented and eager to discover

INITIAL SITE MAP

Homepage

About Sitra Areas of Work Funding The Sitra Way Communications Contacts

Sitra in a nutshell (video+text)

Operations and responsibilities

Working at Sitra

Working methods overview

(link to Sitra Way)

Programmes(incl. future work)

Business development

Sitra investments

Sitra methods and guidelines

Developer blog


Sitra’s Open API and documentation

News archive and search

Publication archive and search

Media bank

Directory

Map and directions

Invoices

PROJ

ECT W

EB CO

NTEN

T A TIMELINEVisualize the progress where in time it is right now

SHORT FACTSHow large is this project. For example how many people are involved?

TAGSA good way to oraganize projects and get an idea of what it’s all about.

THE MISSION + FULL DESCRIPTIONExplain the project in three lines of text and a more in depth description.

THE PROGRESS + FINDINGSPost milestones along the way and the results with all findings in the end.

ALL DOCUMENTSTake images, write text documents, shoot videos and create presentations. Then upload them for everyone to view.

FEEDKeep up with every step in the project. Everything from tweets and meeting to uploaded images and quotes.

Headline

Timeline

Short facts Tags

Navigation within the project

Mission / What the project is all about

Progress / Milestones completed

Images Videos Text documents

Latest tweets about the project

Contact person and project lead

SocialWIREFRAMEPROJECTOVERVIEW

WIREFRAMEPROJECTOVERVIEW

Translating by Google Translate.

AGGREGATING CONTENT

CLOUD CITY

OPEN API

AGGREGATING FROM THE CLOUD

Constant tool evaluationAgain. And again. And again. And again…

One

ABOUT SITRATwo



THE SITRA WAY

WE CAN’T STRESS IT ENOUGH

81%* of internet use in Finland starts with a search…

*) TNS Digital World, Digital Life 2008

WE CAN’T STRESS IT ENOUGH

…and 96% use Google / TNS Gallup - Search Engine Marketing 2008

The internal search engine

Total number of hits

You searched for

Top five search results in PROJECTSClick for more

Top five search results in GENERAL PAGESClick for more

Top five search results in DOCUMENTSClick for more

keyword

Featured hit with image,short text and multiple links

Thumbs up or down on the result

of the search

Popular pages

THE SEARCH RESULTS✓ Not just a list✓ Grouped hits✓ Featured hit for

monitored keywords✓ Instant feedback✓ Easy to make new

search.

Document

ACCESSING DATA

Different access points for different uses

Project

Publication archive

External sevice/site

Mobile

Document

Document

Document

Project

One

ABOUT SITRATwo



THE SITRA WAY


5


user


2.0 users

CORE USE

ENGAGED USE


ProgrammesIMMERSED USE

User experience guidelines

Best practices

The Sitra Way

How-to guides

Agile methods in Sitra

Usability findings

Leadership in Sitra

Sitra.fi roadmapProject

processes

Open API documentation

User personas

Sitra processes

Copywriting and SEO

Developer blogs

Best web tools


…and more

SUMMARY OF PART TWO

THE SITRA.FI CONTENT MUST★ Position Sitra in an easily understandable and

shareable way, talk with the public in mind★ Present the work Sitra does in a clear and

interesting way using the user journeys as a basis★ Emphasise on an intelligent in-site search★ Open up Sitra’s processes, guidelines and

practices with The Sitra Way

THE FRAMEWORKpart 03

One

WEB TECHNOLOGIESTwo

CMSThree

DESIGN & VISUALSFour

MOBILE USE

Bring users into the present“The future is already here. It's just not very evenly distributed.”

William Gibson

ACCESSIBILITY GOOD

OUR WAY OF SEEING IT

GREAT EXPERIENCE

HTML5 & CSS3

BROWSER SUPPORT

PROGRESSIVE ENHANCEMENT

One

WEB TECHNOLOGIESTwo

CMSThree


MOBILE USE

Contribute to the open source community.

One

WEB TECHNOLOGIESTwo

CMSThree


MOBILE USE

OUR MISSION AND GOAL

Create a feeling of activityMake content come aliveRemove need for fancy imagesMake the layout fail safeHave high legibility

AN EXAMPLE OF THE SOLUTION

Graphic visualization rather than plain text

Same content but a different

visualization solution

Today

Tomorrow

All energy projects Overview project Project feed

One

WEB TECHNOLOGIESTwo

CMSThree


MOBILE USE

Facebook and BBC offer a real time feed of what’s going on right now.




Mobile use


Networking

MOBILE USERS JOURNEY

CORE USE

ENGAGED USE


Mobile site

Flickr Upload App and the Apple App Store

WHAT ELSE CAN I USE MY SMARTPHONE FOR? A mobile site is a nice starting point. But we think mobile use should be taken a bit further.

CORE USE

ENGAGED USE


Mobile toolsIMMERSED USE

SUMMARY OF PART THREE

THE SITRA FRAMEWORK★ Brings users into the current tense using standards, conventions

and progressive enhancement without forgetting accessibility★ We use a well known open source cms so everything we develop

can be used by others★ A design that inspires, draw the user into the content and is

largely automatically generated★ Allows also a user journey-based great mobile experience and in

the future, mobile tools

SUMMARYpart 04

SUMMARISING OUR VISION

KEY TAKEAWAYS★ CONCEPT

Our Sitra.fi concept based on the user journeys serves as basis for an excellent and holistic digital experience

★ ENGAGEMENTWe wish to bring aggregated content and engaging interactions to Sitra.fi

★ SOCIAL AND OPENWe want to work in an open and transparent way to ensure the best possible results and involve users all the way

Our concept is fulfilling the Sitra vision:★ Solving an intended typical organisation website combination in

the best way possible★ Sharing and creating information for a better society★ Essential information in a clear way, and additional information

also available★ Visual aspects make for effective clarification★ Showing what is going on online★ Distinguishing experimental buzz from serious groundwork★ Information in a format that can be utilised further★ Different service in different languages★ A service that affects the everyday lives of a large group of people

SUMMARISING OUR VISION

IT’S NOT WHAT YOU SAY IT’S WHAT YOU DO.

THANK YOU FOR YOUR TIME

sitra presentation by the deasign group

Documents

uptodate content

expert content people

content discovertoo

contributing relevant

users relevant information

users dont

easy people

networking dialogue