Post on 07-Dec-2014
description
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
Fresh and updated content
Fresh and updated content
Fresh and updated content
Mobile useGoal-oriented and eager to
discover
Talking part in dialogue
Talking part in dialogue
Networking Talking part in dialogue
Networking
Networking
Relevant information
easily
Positioning of Sitra
Positioning of Sitra
Better presentation of content
Problems and possibilities from the personas
Clear positioning
Positioning of Sitra
1
A better user experience on multiple touchpoints
Summarised content for
easy digestionClarity and structure
Too hard to use Mobile use
Better presentation of content
2
Up-to-date content in an organised way
3
New trends and points of
view
Fresh and updated content
Control of expert content
Relevant information
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
Might evolve into a web 2.0
user
Educate web 1.0 people into
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
Educating users, sharing learnings and best practices
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
Talking part in dialogue
Educate web 1.0 people into 2.0
users
Goal-oriented and eager to
discover
Summarised content for easy
digestion
Positioning of Sitra
Clarity and structure
Too hard to use
Relevant information easily
New trends and points of view
Fresh and updated content
Better presentation of
content
Control of expert content
CREATING USER JOURNEYS FROM GOALSTell me about Sitra and what they do.
New trends and points of view
Summarised content for easy
digestion
Positioning of Sitra
Clarity and structure
Talking part in dialogue
What is happening right now with Sitra
and can I contribute?
Fresh and updated content
Mobile use
Talking part in dialogue
Networking
Tell me about Sitra and help me find relevant
information.
Summarised content for easy
digestion
Positioning of Sitra
Clarity and structure
Relevant information easily
Goal-oriented and eager to discover
I want to update the content and I should
be educated.
Talking part in dialogue
Too hard to use
Control of expert content
Educate web 1.0 people into 2.0
users
Better presentation of content
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?
Positioning of Sitra
Clear positioning
Positioning of Sitra
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
VIEW VIDEO AT YOUTUBE
One
ABOUT SITRATwo
PROJECTS & PROGRAMMESThree
SEARCH & FINDABILITYFour
THE SITRA WAY
✓ Informative✓ Engaging✓ Easy to use✓ Easy to contribute
CORE USE
ENGAGED USE
LEVEL OF INVOLVEMENT
ProgrammesIMMERSED USE
CREATING USER JOURNEYS RELATED TO PROGRAMSTell me about Sitra and what they do.
New trends and points of view
Summarised content for easy
digestion
Positioning of Sitra
Clarity and structure
Talking part in dialogue
What is happening right now with Sitra
and can I contribute?
Fresh and updated content
Mobile use
Talking part in dialogue
Networking
Tell me about Sitra and help me find relevant
information.
Summarised content for easy
digestion
Positioning of Sitra
Clarity and structure
Relevant information easily
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 digital footprint
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.
Translating by Google Translate.
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
PROJECTS & PROGRAMMESThree
SEARCH & FINDABILITYFour
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
PROJECTS & PROGRAMMESThree
SEARCH & FINDABILITYFour
THE SITRA WAY
Educating users, sharing learnings and best practices
5
Might evolve into a web 2.0
user
Educate web 1.0 people into
2.0 users
CORE USE
ENGAGED USE
LEVEL OF INVOLVEMENT
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
Sitra’s digital footprint
…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
DESIGN & VISUALSFour
MOBILE USE
Contribute to the open source community.
One
WEB TECHNOLOGIESTwo
CMSThree
DESIGN & VISUALSFour
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
DESIGN & VISUALSFour
MOBILE USE
Facebook and BBC offer a real time feed of what’s going on right now.
What is happening right now with Sitra
and can I contribute?
Fresh and updated content
Mobile use
Talking part in dialogue
Networking
MOBILE USERS JOURNEY
CORE USE
ENGAGED USE
LEVEL OF INVOLVEMENT
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
LEVEL OF INVOLVEMENT
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